TDD In React Using Enzyme

Transcript

1. TDD in React using Enzyme
3. Vlad “Reign” Zelinschi UI Tech Lead @ 3PillarGlobal @r31gN_ on Twitter
4. Let’s start with the “Oh, sh*t!” moments...
5. The “Oh, sh*t” summer collection 2016 • Fixing a bug that caused numerous issues in other parts of the programme • Not knowing that your code broke stuff • Fear of changing code • Fear of removing obsolete/unused code • Realising you have designed a bad API/interface for others to consume • Realising you have a pile of hard to read spaghetti code
6. But there’s a way out...
7. TDD!
8. TDD is not about testing. It’s a way of thinking and coding.
9. TDD • Write new code only if you have an automated failing test • Eliminate duplication
10. RED Write a test that doesn’t work GREEN Make the test pass (sins allowed) REFACTOR Eliminate all duplication
11. TDD • It’s about the mindset of continuous improvement • Tests are a means of achieving that, of accommodating your brain with this flow
12. Why Enzyme?
13. Enzyme • It’s a JS testing utility for React • Easy to work with, jQuery like traversal • Easy to integrate with test runners, assertion libraries and build process (Karma, Mocha, Chai, Browserify, Webpack, etc.) • Popularity, good maintainance & support, good docs, community, backed by AirBnB
14. The stack
15. The stack • Babel (React preset and all…) • React latest • Mocha, Sinon, Chai • Test utils • Jsdom (needed for mounting components) • Enzyme • https://github.com/r31gN/tdd-react-enzyme
16. Enzyme - rendering types • Shallow rendering • Full rendering (mounting) • Static rendering
17. Shallow rendering • It considers your component as a unit • It does not render children components (renders “one level deep”) • It does not require a DOM (no mounting, no lifecycle components, etc.) • Fast • Use it for making markup related asserts
18. Full rendering (mounting) • It renders child components as well • Requires a DOM API to be present (use jsdom for that) • Slow • Ideal for use cases when you have components that interact with the DOM API, use lifecycle hooks (eg: componentDidMount), etc.
19. Static rendering • It renders React components to static HTML for analysis • Uses Cheerio under the hood • Work with the resulting HTML - find(), text(), etc.
20. Examples time :)
21. Shallow rendering
27. Full rendering
37. TDD with Enzyme • Remember the TDD cycle - Red/Green/Refactor • Set this as a mindset • Mix static with full rendering (they serve different purposes) • Enzyme is very friendly (very nice API, well documented) • You will have to pair it with other technologies: either go for a granular stack (Mocha + Chai + Sinon) or opt for something like Jasmine (comprehensive, lots of functionality under one roof)
38. http://thereignn.ghost.io/a-step-by-step-tdd- approach-on-testing-react-components-usin g-enzyme/
39. Keep on smiling, because you are the most beautiful people when you do. Reign
40. Thank you! @r31gN_