$30 off During Our Annual Pro Sale. View Details »

TDD In React Using Enzyme

r31gN_
July 25, 2016

TDD In React Using Enzyme

r31gN_

July 25, 2016
Tweet

More Decks by r31gN_

Other Decks in Technology

Transcript

  1. TDD in React using Enzyme

  2. None
  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

  22. None
  23. None
  24. None
  25. None
  26. None
  27. Full rendering

  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  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_