React and Redux took the world by storm. These JavaScript libraries allow you to write applications consisting of reusable components while avoiding bugs related to side-effects. But I suspect that developers do not unit test their React/Redux code. Or at least not as much as they could. During this talk, I will showcase the unit tests we have written for our eventriX product. These tests run fast and cover the most important aspects of our client-side code running in the browser. These practical real-world examples could inspire you to write more and better unit tests for your own React/Redux application.

1. +
+ Unit Tests =

2. Alin Pandichi

3. Alin Pandichi
Open space
Coding Dojo
Bucharest Java User Group
Global Day of Coderetreat

4. Alin Pandichi
Open space
Coding Dojo
Bucharest Java User Group
Global Day of Coderetreat
Software developer @
Mozaic Labs
Building eventriX

8. Jest: Capture snapshots of React trees or other
serializable values to simplify testing and to
analyze how state changes over time.
describe('Welcome (Snapshot)', () => {
it('Welcome renders hello world', () => {
const json = renderer.create(<Welcome />).toJSON();
expect(json).toMatchSnapshot();
});
});

9. Enzyme is a JavaScript testing utility for React
that makes it easier to assert, manipulate, and
traverse your React Components' output.

10. Mocha is a JavaScript test framework
running on Node.js and in the browser.
var assert = require('assert');
describe('Array', function() {
describe('#indexOf()', function() {
it('should return -1 when the value is not present', function() {
assert.equal(-1, [1,2,3].indexOf(4));
});
});
});

11. Chai ­ assertion library for node and
the browser that can be paired with any
javascript testing framework.
expect(foo).to.be.a('string');
expect(foo).to.equal('bar');
expect(foo).to.have.lengthOf(3);
expect(tea).to.have.property('flavors').with.lengthOf(3);

12. Sinon.js ­ spies, stubs and mocks for
JavaScript. Works with any unit testing
framework.
it('makes a GET request for todo items', function () {
sinon.stub(jQuery, 'ajax');
getTodos(42, callbackFunction);
assert(jQuery.ajax.calledWithMatch({
url: '/todo/42/items'
}));
});

13. Other testing tools:
● redux­mock­store ­ A mock store for testing
your redux async action creators and
middleware.
● fetch­mock ­ mock http requests made using
fetch

14. Istanbul – code coverage tool that works well
with most JavaScript testing
frameworks: tap, mocha, AVA, etc.

16. To recap...
● I wouldn’t recommend Jest
● I’d rather use:
Enzyme + Mocha + Chai + Sinon
● Try to test the ES6 classes rather than
the React components

17. To recap...
● Writing tests after production code will
lead you to “white­box testing”
● Writing tests before production will
force you to think more about
component contracts

18. Questions?
@alinpandichi

19. Resources
http://mochajs.org/
http://chaijs.com/
http://sinonjs.org/
http://airbnb.io/enzyme/
https://istanbul.js.org/
https://github.com/arnaudbenard/redux­mock­store
http://www.wheresrhys.co.uk/fetch­mock/
https://facebook.github.io/jest/

20. Image resources
http://diysolarpanelsv.com/images/arrow­with­heart­in­middle­clipart­16.png
https://i1.wp.com/www.tugberkugurlu.com/Content/images/Uploadedbyauthors/w
http://1.bp.blogspot.com/­pkJqNgkmRe4/Tz0k6JUwJMI/AAAAAAAAAhU/h8byzSXB
http://paulocoelhoblog.com/wp­content/uploads/2012/06/IsayNO1.jpg