Unit Testing your React / Redux app (@BucharestJS)

Unit Testing your React / Redux app (@BucharestJS)

• 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 GETrequest 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