This talk will
▸ Walkthrough about our experience migrating
from Enzyme to React Testing Library
Slide 3
Slide 3 text
This talk won't
▸ Discuss about snapshots
▸ Convince you about writing tests
▸ How to setup these libraries
Slide 4
Slide 4 text
▸ 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!
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
Example with Enzyme
...
test(': allows us to set props', () => {
const wrapper = mount();
wrapper.setProps({ bar: ‘not-today‘ });
expect(wrapper.props().bar).toEqual(‘not-today');
});
Slide 7
Slide 7 text
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.
Slide 8
Slide 8 text
Another testing library?
Maybe I can guess what you are thinking…
Slide 9
Slide 9 text
React Testing Library
Tests mirror the way your software is used
If you're not using Jest, then you must install jsdom
Slide 10
Slide 10 text
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
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
Another motivation
https: //github.com/airbnb/enzyme/issues/2011
Slide 13
Slide 13 text
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 ⚠
Slide 14
Slide 14 text
Remove data-testid
// test
{someAwesomeText}
// production code
{someAwesomeText}
With babel-plugin-jsx-remove-data-test-id you can remove data-
test-id attributes from your production builds.
Slide 15
Slide 15 text
Disallowing large snapshots
https: //github.com/jest-community/eslint-plugin-jest/blob/master/docs/rules/no-large-snapshots.md
Slide 16
Slide 16 text
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
Slide 17
Slide 17 text
enzyme vs @testing-library/react
https: // www.npmtrends.com/enzyme-vs-@testing-library/react
Slide 18
Slide 18 text
And now is a recommended tool
https: //twitter.com/kentcdodds/status/981961256008548352
Slide 19
Slide 19 text
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