Tools & tricks for testing React applications

•

2 likes•1,794 views

Robert Knight, Software Engineer at Mendeley Rob will explore how to take advantage of React's use of JavaScript/JSX and the virtual UI to catch regressions earlier and make writing and debugging tests for React components easier and faster.

Technology

React TestUtils
React.addons.TestUtils.renderIntoDocument(component)
.scryRenderedDOMComponentsWithClass(component)
.findRenderedDOMComponentWithTag()
React.addons.TestUtils.Simulate.click(component, event)
.mouseDown(component, event)
7 / 25

describe('TweetItem', () => {
it('should display item details', () => {
const tweet = {
user: {
screenName: 'reactjs',
...
},
text: 'Announcing React v0.13',
...
};
const item = React.addons.TestUtils.renderIntoDocument(
<TweetItem tweet={tweet}/>
);
const userScreenName = React.findDOMNode(item.refs.userScreenName);
expect(userScreenName.textContent).to.equal('@' + tweet.user.screenName);
const text = React.findDOMNode(item.refs.text);
expect(text.textContent).to.equal(tweet.text);
});
});
8 / 25

jsdom
Fake DOM environment that runs in Node
Good Enough™ for a lot of testing
// setup.js - setup the fake DOM
jsdom.env({
html: '<body><div id="app"></div></body>',
done: (errors, window) => {
global.document = window.document;
global.window = window;
global.navigator = window.navigator;
}
});
// run our tests
mocha --require setup.js <test files>
9 / 25

Isolation
Props
Callbacks
Component Trees
Callbacks & Actions
12 / 25

$Component Matching React.addons.TestUtils.scryRenderedComponentsWithType(component, type) .isCompositeComponentWithType(component, type) .findAllInRenderedTree(component, testFunction) it('should display tweets', () => { const list = TestUtils.renderIntoDocument( <TweetList tweets={TEST_TWEETS}/> ); const items = TestUtils.scryRenderedComponentsWithType(list, TweetItem); expect(items.length).to.equal(TEST_TWEETS.length); }); 13 / 25$

$const shallowRenderer = React.addons.TestUtils.createRenderer(); const renderList = () => { shallowRenderer.render(<TweetList tweets={TEST_TWEETS}/>); const list = shallowRenderer.getRenderOutput(); return list.props.children.filter(component => component.type == TweetItem); } let items = renderList(); expect(items.length).to.equal(TEST_TWEETS.length); expect(items[0].props.isSelected).to.equal(false); items[0].props.onClick(); items = renderList(); expect(items[0].props.isSelected).to.equal(true); 15 / 25$

Builtin fake DOM
Automatic parallelization
Fastforward time
17 / 25

Automatic mocking of
require()
require()
require()
require()
require()
18 / 25

Caveats
undefined is probably not a function
Automatic mocking
Does not currently run in the browser
Differences between jsdom and (insert browser
here)'s DOM
Browser dev tools
19 / 25

$Mocking require() with rewire import rewire from 'rewire'; var TweetList = rewire('../src/TweetList'); class StubTweetItem extends React.Component { render() { return <div>stub tweet</div>; } } TweetList.__set__('TweetItem', StubTweetItem); Can be used in Node and the browser via rewire webpack 21 / 25$

Didn't I see this somewhere before...
24 / 25

github.com/robertknight/reacttesting
Robert Knight
@robknight_
25 / 25

What's hot

Droidcon Berlin Barcamp 2016Przemek Jakubczyk

Spring mvc my Faviourite SlideDaniel Adenew

Intro to Retrofit 2 and RxJava2Fabio Collini

Automated%20testing%20with%20Espresso2.xTatsuya Maki

Android developmentGregoire BARRET

React js t7 - forms-eventsJainul Musani

Angular2v2Yoeri Van Damme

Droidcon2013 pro guard, optimizer and obfuscator in the android sdk_eric lafo...Droidcon Berlin

Discussing Errors in Unity3D's Open-Source ComponentsPVS-Studio

Unit Testing on Android - Droidcon Berlin 2015Buşra Deniz, CSM

Java Quiz - MeetupCodeOps Technologies LLP

Migrating an application from Angular 1 to Angular 2 Ross Dederer

Clean TestNoam Almog

Angular2 workshopNir Kaufman

Using hilt in a modularized projectFabio Collini

Pluginkla2019 - React PresentationAngela Lehru

React js t8 - inlinecssJainul Musani

Riacon swizntunney

What's hot (18)

Droidcon Berlin Barcamp 2016

Spring mvc my Faviourite Slide

Intro to Retrofit 2 and RxJava2

Automated%20testing%20with%20Espresso2.x

Android development

React js t7 - forms-events

Angular2v2

Droidcon2013 pro guard, optimizer and obfuscator in the android sdk_eric lafo...

Discussing Errors in Unity3D's Open-Source Components

Unit Testing on Android - Droidcon Berlin 2015

Java Quiz - Meetup

Migrating an application from Angular 1 to Angular 2

Clean Test

Angular2 workshop

Using hilt in a modularized project

Pluginkla2019 - React Presentation

React js t8 - inlinecss

Riacon swiz

Similar to Tools & tricks for testing React applications

React for Re-use: Creating UI Components with Confluence ConnectAtlassian

Workshop 23: ReactJS, React & Redux testingVisual Engineering

MeetJS Summit 2016: React.js enlightenmentArtur Szott

Introduction to React and MobXAnjali Chawla

React Native for multi-platform mobile applicationsMatteo Manchi

Intro react jsVijayakanth MP

Workshop 26: React Native - The Native SideVisual Engineering

Dependency Injection for AndroidFirst Tuesday Bergen

Dependency Injection for Android @ Ciklum speakers corner Kiev 29. May 2014First Tuesday Bergen

The real beginner's guide to android testingEric (Trung Dung) Nguyen

The evolution of redux action creatorsGeorge Bukhanov

React & Redux for noobs[T]echdencias

React.js workshop by tech47.inJaikant Kumaran

Building a js widgetTudor Barbu

Flex Building User Interface ComponentsAhmad Hamid

Mobile Software Engineering Crash Course - C06 WindowsPhoneMohammad Shaker

JSAnkara Swift v React NativeMuhammed Demirci

Introduction to React JS for beginners Varun Raj

React native by example by Vadim RubanLohika_Odessa_TechTalks

Java Web Programming [8/9] : JSF and AJAXIMC Institute

Similar to Tools & tricks for testing React applications (20)

React for Re-use: Creating UI Components with Confluence Connect

Workshop 23: ReactJS, React & Redux testing

MeetJS Summit 2016: React.js enlightenment

Introduction to React and MobX

React Native for multi-platform mobile applications

Intro react js

Workshop 26: React Native - The Native Side

Dependency Injection for Android

Dependency Injection for Android @ Ciklum speakers corner Kiev 29. May 2014

The real beginner's guide to android testing

The evolution of redux action creators

React & Redux for noobs

React.js workshop by tech47.in

Building a js widget

Flex Building User Interface Components

Mobile Software Engineering Crash Course - C06 WindowsPhone

JSAnkara Swift v React Native

Introduction to React JS for beginners

React native by example by Vadim Ruban

Java Web Programming [8/9] : JSF and AJAX

Recently uploaded

Presentation on how to chat with PDF using ChatGPT code interpreternaman860154

GenCyber Cyber Security Day PresentationMichael W. Hawkins

🐬 The future of MySQL is Postgres 🐘RTylerCroy

WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal

Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersThousandEyes

The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge

Slack Application Development 101 Slidespraypatel2

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung

Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia

The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad

FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhisoniya singh

08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls

08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls

Boost PC performance: How more available memory can improve productivityPrincipled Technologies

A Call to Action for Generative AI in 2024Results

04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG

08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls

Swan(sea) Song – personal research during my six years at Swansea ... and bey...Alan Dix

CNv6 Instructor Chapter 6 Quality of Servicegiselly40

Understanding the Laravel MVC ArchitecturePixlogix Infotech

Recently uploaded (20)

Presentation on how to chat with PDF using ChatGPT code interpreter

GenCyber Cyber Security Day Presentation

🐬 The future of MySQL is Postgres 🐘

WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service

Enhancing Worker Digital Experience: A Hands-on Workshop for Partners

The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf

Slack Application Development 101 Slides

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...

Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...

The Codex of Business Writing Software for Real-World Solutions 2.pptx

FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi

08448380779 Call Girls In Greater Kailash - I Women Seeking Men

08448380779 Call Girls In Diplomatic Enclave Women Seeking Men

Boost PC performance: How more available memory can improve productivity

A Call to Action for Generative AI in 2024

04-2024-HHUG-Sales-and-Marketing-Alignment.pptx

08448380779 Call Girls In Civil Lines Women Seeking Men

Swan(sea) Song – personal research during my six years at Swansea ... and bey...

CNv6 Instructor Chapter 6 Quality of Service

Understanding the Laravel MVC Architecture

Tools & tricks for testing React applications

1. React Testing Tools & Tricks 1 / 25

2. UI Testing 2 / 25

3. Heavy Machinery Required 3 / 25

4. Fragile Tests 4 / 25

5. Timing Issues 5 / 25

6. UI Testing with React 6 / 25

7. React TestUtils React.addons.TestUtils.renderIntoDocument(component) .scryRenderedDOMComponentsWithClass(component) .findRenderedDOMComponentWithTag() React.addons.TestUtils.Simulate.click(component, event) .mouseDown(component, event) 7 / 25

8. describe('TweetItem', () => { it('should display item details', () => { const tweet = { user: { screenName: 'reactjs', ... }, text: 'Announcing React v0.13', ... }; const item = React.addons.TestUtils.renderIntoDocument( <TweetItem tweet={tweet}/> ); const userScreenName = React.findDOMNode(item.refs.userScreenName); expect(userScreenName.textContent).to.equal('@' + tweet.user.screenName); const text = React.findDOMNode(item.refs.text); expect(text.textContent).to.equal(tweet.text); }); }); 8 / 25

9. jsdom Fake DOM environment that runs in Node Good Enough™ for a lot of testing // setup.js - setup the fake DOM jsdom.env({ html: '<body><div id="app"></div></body>', done: (errors, window) => { global.document = window.document; global.window = window; global.navigator = window.navigator; } }); // run our tests mocha --require setup.js <test files> 9 / 25

10. Isolation props props 10 / 25

11. Think in Components & Data Flow 11 / 25

12. Isolation Props Callbacks Component Trees Callbacks & Actions 12 / 25

13. Component Matching React.addons.TestUtils.scryRenderedComponentsWithType(component, type) .isCompositeComponentWithType(component, type) .findAllInRenderedTree(component, testFunction) it('should display tweets', () => { const list = TestUtils.renderIntoDocument( <TweetList tweets={TEST_TWEETS}/> ); const items = TestUtils.scryRenderedComponentsWithType(list, TweetItem); expect(items.length).to.equal(TEST_TWEETS.length); }); 13 / 25

14. Shallow Rendering Props Props 14 / 25

15. const shallowRenderer = React.addons.TestUtils.createRenderer(); const renderList = () => { shallowRenderer.render(<TweetList tweets={TEST_TWEETS}/>); const list = shallowRenderer.getRenderOutput(); return list.props.children.filter(component => component.type == TweetItem); } let items = renderList(); expect(items.length).to.equal(TEST_TWEETS.length); expect(items[0].props.isSelected).to.equal(false); items[0].props.onClick(); items = renderList(); expect(items[0].props.isSelected).to.equal(true); 15 / 25

16. Mocking 16 / 25

17. Builtin fake DOM Automatic parallelization Fastforward time 17 / 25

18. Automatic mocking of require() require() require() require() require() 18 / 25

19. Caveats undefined is probably not a function Automatic mocking Does not currently run in the browser Differences between jsdom and (insert browser here)'s DOM Browser dev tools 19 / 25

20. require('module'); 20 / 25

21. Mocking require() with rewire import rewire from 'rewire'; var TweetList = rewire('../src/TweetList'); class StubTweetItem extends React.Component { render() { return <div>stub tweet</div>; } } TweetList.__set__('TweetItem', StubTweetItem); Can be used in Node and the browser via rewire webpack 21 / 25

22. What the Flux? 22 / 25

23. Visual and Container Components 23 / 25

24. Didn't I see this somewhere before... 24 / 25

25. github.com/robertknight/reacttesting Robert Knight @robknight_ 25 / 25