how to unit test your react/redux app
TRANSCRIPT
+
+ Unit Tests =
Alin Pandichi
Alin Pandichi
Open spaceCoding DojoBucharest Java User GroupGlobal Day of Coderetreat
Alin Pandichi
Open spaceCoding DojoBucharest Java User GroupGlobal Day of Coderetreat
Software developer @Mozaic LabsBuilding eventriX
Enzyme is a JavaScript testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output.
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();
});
});
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)); }); });});
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);
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'
}));});
Other testing tools: ● reduxmockstore A mock store for testing your redux async action creators and middleware.
● fetchmock mock http requests made using fetch
Istanbul – code coverage tool that works well with most JavaScript testing frameworks: tap, mocha, AVA, etc.
Resources
http://mochajs.org/http://chaijs.com/http://sinonjs.org/http://airbnb.io/enzyme/https://istanbul.js.org/https://github.com/arnaudbenard/reduxmockstorehttp://www.wheresrhys.co.uk/fetchmock/
https://facebook.github.io/jest/
Image resourceshttp://diysolarpanelsv.com/images/arrowwithheartinmiddleclipart16.pnghttps://i1.wp.com/www.tugberkugurlu.com/Content/images/Uploadedbyauthors/wlw/1934ffeb460c_FB47/youneedsometestsyo.jpghttp://1.bp.blogspot.com/pkJqNgkmRe4/Tz0k6JUwJMI/AAAAAAAAAhU/h8byzSXBAU/s1600/TheRealDeal.jpghttp://paulocoelhoblog.com/wpcontent/uploads/2012/06/IsayNO1.jpg
