Tools & tricks for testing React applications

React Testing Tools & Tricks
1 / 25

Heavy Machinery Required
3 / 25

UI Testing with React
6 / 25

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

Think in Components & Data
Flow
11 / 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

Shallow Rendering
Props
Props
14 / 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

Visual and Container Components
23 / 25

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

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

Tools & tricks for testing React applications

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Similar to Tools & tricks for testing React applications

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

More from React London Community

More from React London Community (7)

Recently uploaded

Recently uploaded (20)

Tools & tricks for testing React applications