Testing React components Andrei Picus

Who? andrei.picus@hootsuite.com github.com/NiGhTTraX Started with JS 10 years ago In love with TDD

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.

What’s a unit test? A test, whose result (pass or fail) depends on the correctness of only one interesting piece of behaviour.

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

The interface ● lifecycle methods ● callbacks ● public methods ● DOM event handlers

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

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

Mocking component methods Component = React.createClass({}) Component._class.prototype .__reactAutoBindMap[method] // cb .constructor[method] // static [method] // public

Mocking component methods You need to do it on the component’s class before rendering.

Mocking children ● Mock the NodeJS module. ● Have a mixin/lib that loads a component and mock that. ● Shallow render.

SinonJS sinon.spy(Component, ‘updateFoo’) sinon.stub(Component, ‘render’) .returns(null) sinon.stub(Component, ‘loadChild’) .returns(null)

sinon-chai expect(stub) .to.have.been.called.and .to.have.been.calledWith(42);

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

Running the tests Browserify (webpack doesn’t work with sinon) MochaJS ChaiJS SinonJS Karma Istanbul

Example config NiGhTTraX/react-test-buffet

That’s all folks