How to unit test your React/Redux app
-
Upload
alin-pandichi -
Category
Technology
-
view
62 -
download
1
Transcript of How to unit test your React/Redux app
![Page 1: How to unit test your React/Redux app](https://reader035.fdocuments.net/reader035/viewer/2022062905/5a6d3ee97f8b9aff418b50e7/html5/thumbnails/1.jpg)
+
+ Unit Tests =
![Page 2: How to unit test your React/Redux app](https://reader035.fdocuments.net/reader035/viewer/2022062905/5a6d3ee97f8b9aff418b50e7/html5/thumbnails/2.jpg)
Alin Pandichi
![Page 3: How to unit test your React/Redux app](https://reader035.fdocuments.net/reader035/viewer/2022062905/5a6d3ee97f8b9aff418b50e7/html5/thumbnails/3.jpg)
Alin Pandichi
Open spaceCoding DojoBucharest Java User GroupGlobal Day of Coderetreat
![Page 4: How to unit test your React/Redux app](https://reader035.fdocuments.net/reader035/viewer/2022062905/5a6d3ee97f8b9aff418b50e7/html5/thumbnails/4.jpg)
Alin Pandichi
Open spaceCoding DojoBucharest Java User GroupGlobal Day of Coderetreat
Software developer @Mozaic LabsBuilding eventriX
![Page 5: How to unit test your React/Redux app](https://reader035.fdocuments.net/reader035/viewer/2022062905/5a6d3ee97f8b9aff418b50e7/html5/thumbnails/5.jpg)
![Page 6: How to unit test your React/Redux app](https://reader035.fdocuments.net/reader035/viewer/2022062905/5a6d3ee97f8b9aff418b50e7/html5/thumbnails/6.jpg)
![Page 7: How to unit test your React/Redux app](https://reader035.fdocuments.net/reader035/viewer/2022062905/5a6d3ee97f8b9aff418b50e7/html5/thumbnails/7.jpg)
![Page 8: How to unit test your React/Redux app](https://reader035.fdocuments.net/reader035/viewer/2022062905/5a6d3ee97f8b9aff418b50e7/html5/thumbnails/8.jpg)
![Page 9: How to unit test your React/Redux app](https://reader035.fdocuments.net/reader035/viewer/2022062905/5a6d3ee97f8b9aff418b50e7/html5/thumbnails/9.jpg)
![Page 10: How to unit test your React/Redux app](https://reader035.fdocuments.net/reader035/viewer/2022062905/5a6d3ee97f8b9aff418b50e7/html5/thumbnails/10.jpg)
Enzyme is a JavaScript testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output.
![Page 11: How to unit test your React/Redux app](https://reader035.fdocuments.net/reader035/viewer/2022062905/5a6d3ee97f8b9aff418b50e7/html5/thumbnails/11.jpg)
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();
});
});
![Page 12: How to unit test your React/Redux app](https://reader035.fdocuments.net/reader035/viewer/2022062905/5a6d3ee97f8b9aff418b50e7/html5/thumbnails/12.jpg)
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)); }); });});
![Page 13: How to unit test your React/Redux app](https://reader035.fdocuments.net/reader035/viewer/2022062905/5a6d3ee97f8b9aff418b50e7/html5/thumbnails/13.jpg)
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);
![Page 14: How to unit test your React/Redux app](https://reader035.fdocuments.net/reader035/viewer/2022062905/5a6d3ee97f8b9aff418b50e7/html5/thumbnails/14.jpg)
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'
}));});
![Page 15: How to unit test your React/Redux app](https://reader035.fdocuments.net/reader035/viewer/2022062905/5a6d3ee97f8b9aff418b50e7/html5/thumbnails/15.jpg)
![Page 16: How to unit test your React/Redux app](https://reader035.fdocuments.net/reader035/viewer/2022062905/5a6d3ee97f8b9aff418b50e7/html5/thumbnails/16.jpg)
Other testing tools: ● reduxmockstore A mock store for testing your redux async action creators and middleware.
● fetchmock mock http requests made using fetch
![Page 17: How to unit test your React/Redux app](https://reader035.fdocuments.net/reader035/viewer/2022062905/5a6d3ee97f8b9aff418b50e7/html5/thumbnails/17.jpg)
Istanbul – code coverage tool that works well with most JavaScript testing frameworks: tap, mocha, AVA, etc.
![Page 18: How to unit test your React/Redux app](https://reader035.fdocuments.net/reader035/viewer/2022062905/5a6d3ee97f8b9aff418b50e7/html5/thumbnails/18.jpg)
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/
![Page 19: How to unit test your React/Redux app](https://reader035.fdocuments.net/reader035/viewer/2022062905/5a6d3ee97f8b9aff418b50e7/html5/thumbnails/19.jpg)
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
![Page 20: How to unit test your React/Redux app](https://reader035.fdocuments.net/reader035/viewer/2022062905/5a6d3ee97f8b9aff418b50e7/html5/thumbnails/20.jpg)