Adventures from Enzyme to React Testing Library

Transcript

1. to React Testing Library Adventures from Enzyme
2. This talk will ▸ Walkthrough about our experience migrating from Enzyme to React Testing Library
3. This talk won't ▸ Discuss about snapshots ▸ Convince you about writing tests ▸ How to setup these libraries
4. ▸ I write code and lead a team at Loadsmart ▸ Previously, I worked in some companies in Brazil and organized some conferences for web developers in Brazil: Front in BH, Front in Recife, Pernambuco.JS, and Rio.JS. ▸ github | twitter: davidsonfellipe ▸ https://fellipe.com/ ✋ Hello!
5. Enzyme ▸ JavaScript Testing utility for React ▸ Provide some API wrappers that make it easier to manipulate, navigate, and simulate events. ▸ Also allows us to access to props, state, methods
6. Example with Enzyme ... test('<Foo / >: allows us to set props', () => { const wrapper = mount(<Foo bar="yes" />); wrapper.setProps({ bar: ‘not-today‘ }); expect(wrapper.props().bar).toEqual(‘not-today'); });
7. After some years using Enzyme ▸ A lot of tests depending on the implementation like classnames, states, props, component names ▸ A lot of snapshots (full of implementation details) tests making a False safety ▸ And then, Testing Library started to appear.
8. Another testing library? Maybe I can guess what you are thinking…
9. React Testing Library Tests mirror the way your software is used If you're not using Jest, then you must install jsdom
10. React Testing Library Limited number of ways you can interact with elements Enforce you to use things like placeholder, aria, test-ids to interact with elements
11. Which query should I use? Queries Accessible to Everyone Semantic Queries Test IDs getByLabelText getByPlaceholderText getByText getByDisplayValue getByAltText getByTitle getByRole getByTestId* Priority Based on the Guiding Principles
12. Another motivation https: //github.com/airbnb/enzyme/issues/2011
13. After some time using RTL ▸ Focus on user cases than coverage ▸ A lot of data-testid in production code ⚠ ▸ Still have some large snapshots ⚠ ▸ React-testing-library from 6 to 9 ⚠
14. Remove data-testid // test <p data-testid="crazy-id">{someAwesomeText} </p> // production code <p>{someAwesomeText} </p> With babel-plugin-jsx-remove-data-test-id you can remove data- test-id attributes from your production builds.
15. Disallowing large snapshots https: //github.com/jest-community/eslint-plugin-jest/blob/master/docs/rules/no-large-snapshots.md
16. Enzyme RTL ▸ focusing on the implementation ▸ helps on the component tree navigation ▸ shallow, render, mount ▸ focused on user behavior ▸ based on selectors that the user see ▸ render, will never support shallow rendering you can write user focused test with enzyme, but it’s not natural
17. enzyme vs @testing-library/react https: // www.npmtrends.com/enzyme-vs-@testing-library/react
18. And now is a recommended tool https: //twitter.com/kentcdodds/status/981961256008548352
19. How is it working so far? ▸ It’s improving the tests readability ▸ Helped us create tests easier to be reused if we change the implementation ▸ Encouraging writing code with better accessibility ▸ Starting to use eslint-plugin-jest
20. Thank you! ▸ github | twitter: davidsonfellipe ▸ https://fellipe.com/
21. Photos ▸ https://unsplash.com/photos/3l3RwQdHRHg ▸ https://unsplash.com/photos/8rj4sz9YLCI ▸ https://unsplash.com/photos/PXB7yEM5LVs ▸ https://unsplash.com/photos/h3VTw0wGOyo