25
React Testing Tools & Tricks 1 / 25
| Date post: | 04-Aug-2015 |
| Category: |
Technology |
| Upload: | london-react-user-group |
| View: | 421 times |
| Download: | 1 times |
React Testing Tools & Tricks
1 / 25
UI Testing
2 / 25
Heavy Machinery Required
3 / 25
Fragile Tests
4 / 25
Timing Issues
5 / 25
UI Testing with React
6 / 25
React TestUtilsReact.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
props
10 / 25
Think in Components & DataFlow
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
Mocking
16 / 25
Builtin fake DOM
Automatic parallelization
Fastforward time
17 / 25
Automatic mocking ofrequire()
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
require('module');
20 / 25
Mocking require() with rewireimport 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 rewirewebpack
21 / 25
What the Flux?
22 / 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
