React testing with Enzyme - Basics

Fundamentals on how what Enzyme is and how to perform testing of React components.

Transcript

1. React testing with Enzyme - Basics Olivier Robert October 4th 2017
2. Intro http://airbnb.io/enzyme/ • Made by AirBnB • Can be used with many test runners e.g. Jasmine, Chai or Jest • Provide component rendering and testing utilities to make it easier: ◦ Writing assertions ◦ Traversing of the component output
3. Usage with Jest How to set it up: • Add NPM dependency: `npm install enzyme` • For full DOM rendering: ◦ Add other dependencies: `npm install jsdom enzyme-to-json` ◦ Configure JEST ⇒ See Enzyme Guide
4. Core rendering API shallow • Renders only the component but not its children ⇒ Great for Unit Testing • Use it in most cases
5. Core rendering API mount • Renders the component and its children ⇒ Great for Integration Testing • Use it when testing that props are passed down properly
6. Core rendering API render • Renders the component and its children to an HTML file ⇒ Never used • Most expensive and slow
7. Debugging Enzyme debug()returns the output of the component rendering
8. Assertion on children components When using shallow, children components are not rendered:
9. Assertion on children components
10. 1 million dollar question What if I don’t want to use Enzyme? • Jest snapshot testing • React test renderer
11. Enzyme is the defacto testing utility companion of Jest because it saves time
12. Use carbon.now.sh for nice code samples
13. Thanks! Contact Nimbl3 hello@nimbl3.com 399 Sukhumvit Road, Interchange 21 Klongtoey nua, Wattana Bangkok 10110 20th Floor, Central Tower 28 Queen's Road Central, Hong Kong nimbl3.com