@testing-library
Or, how I learned to stop worrying about the DOM.
NewStore · August 11, 2020
Testing the frontend
with confidence.
Browser Tests
- Convenient
- Fast
- Maintainable
- Robust
React + Enzyme
- Convenient
- Fast
- Maintainable
- Robust
Shallow rendering.
Too easy to test implementation details.
- Shallow rendering.
- Querying by component name or properties.
- Component instance state inspection.
- Testing only with the browser.
- Testing implementation details.
Cooperation
↕
Single responsibility
Loose
↕
Precise
Easy to refactor
↕
Hard to refactor
Hard to debug
↕
Easy to debug
The messy middle
“Write tests. Not too many. Mostly integration.”
Guillermo Rauch
“Integrated tests are a scam.”
J.B. Rainsberger
A unit test must run in isolation.
A unit test must be fast.
A unit test must focus on a ‘small’ part of the system.
Testing from the outside-in.
While writing tests, I focus on visible behaviour, not...
- ...what subcomponents I’m going to need.
- ...how they’re implemented.
- ...who implements them.
Fake it till you break it
“Mocking is a code smell.”
Eric Elliot
- 100% code coverage.
- All tests are green.
-
The application is still broken.
You don’t need to test third-party components.
But maybe you should.
“The more your tests resemble the way your software is used, the
more confidence they can give you.”
Kent C. Dodds
Like a browser test, but not
An API that mimics user interaction.
Less this
$('div.login .btn-primary + a').click()
More this
fireEvent.click(screen.getByText(/recover password/i))
get
getAll
query
queryAll
find
findAll
|
+ |
ByRole()
ByLabelText()
ByPlaceholderText()
ByText()
ByDisplayValue()
ByAltText()
ByTitle()
|
getByRole()
getByLabelText()
getByPlaceholderText()
getByText()
getByDisplayValue()
getByAltText()
getByTitle()
Escape hatch
getByTestId()
What you get back is DOM nodes.
fireEvent.click(screen.getByText('Click me!'))
Encourages not testing implementation details.
Promotes good accessibility practices.
Frameworks
- React (Native)
- Vue
- Angular
- Preact
- Svelte
Upgrades your testing tools
- Cypress
- Puppeteer
- TestCafe
- Delightful user-centric API.
- Discourages testing implementation details.
- Promotes creating accessible frontends.
Learn the tradeoffs.
Test with confidence.