Testing React Components

Transcript

1. Testing React components Andrei Picus
2. Who? andrei.picus@hootsuite.com github.com/NiGhTTraX Started with JS 10 years ago In love with TDD
3. What? 1. How to write good unit tests. 2. How to unit test a React component. 3. How to write the tests. 4. How to run the tests.
4. What’s a unit test? A test, whose result (pass or fail) depends on the correctness of only one interesting piece of behaviour.
5. Testing a client-server relation Do I ask the interface the right questions? Do I correctly handle all of the responses? Do I respond correctly to the questions? Do I try to respond to the questions? Contract C S INTERFACE Collaboration
6. The interface • lifecycle methods • callbacks • public methods • DOM event handlers
7. Inter-component communication Do I send the correct props? C Do I call the right callbacks? Do I react correctly to the new props? Do I implement the callback? API P
8. Intra-component communication Do I compute the correct state? render() Component Do I call the right callbacks? Do I render the right things? Do I implement the callback? API
9. Mocking component methods Component = React.createClass({}) Component._class.prototype .__reactAutoBindMap[method] // cb .constructor[method] // static [method] // public
10. Mocking component methods You need to do it on the component’s class before rendering.
11. Mocking children • Mock the NodeJS module. • Have a mixin/lib that loads a component and mock that. • Shallow render.
12. SinonJS sinon.spy(Component, ‘updateFoo’) sinon.stub(Component, ‘render’) .returns(null) sinon.stub(Component, ‘loadChild’) .returns(null)
13. sinon-chai expect(stub) .to.have.been.called.and .to.have.been.calledWith(42);
14. Setup a component Put it into a certain state and then assert stuff on it. Don’t do two actions that mutate state in a single test => create another test where you load the component in the 2nd state
15. Running the tests Browserify (webpack doesn’t work with sinon) MochaJS ChaiJS SinonJS Karma Istanbul
16. Example config NiGhTTraX/react-test-buffet
17. That’s all folks