how to unit test your react/redux app

Post on 28-Jan-2018

60 Views

Category:

Technology

1 Downloads

Preview:

Click to see full reader

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: ● redux­mock­store ­ A mock store for testing your redux async action creators and middleware. 

● fetch­mock ­ 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/redux­mock­storehttp://www.wheresrhys.co.uk/fetch­mock/

https://facebook.github.io/jest/

Image resourceshttp://diysolarpanelsv.com/images/arrow­with­heart­in­middle­clipart­16.pnghttps://i1.wp.com/www.tugberkugurlu.com/Content/images/Uploadedbyauthors/wlw/1934ffeb460c_FB47/you­need­some­tests­yo.jpghttp://1.bp.blogspot.com/­pkJqNgkmRe4/Tz0k6JUwJMI/AAAAAAAAAhU/h8byzSXBA­U/s1600/TheRealDeal.jpghttp://paulocoelhoblog.com/wp­content/uploads/2012/06/IsayNO1.jpg

top related