Testing Frameworks
react-testing-library vs Enzyme
Why?
Smaller, simpler API
Query Single
- getBy
- findBy
- queryBy
Query All
- getAllBy
- findAllBy
- queryAllBy
Selectors
- LabelText - label or aria-label
- PlaceholderText
- AltText
- Text - element text content
- DisplayValue - form element value
- Title
- Role
- TestId - Escape hatch, don't use unless needed
Async
- wait - retry until stops throwing
- waitForElement - retry until returns element
- waitForDomChange - retry every time DOM changes
- waitForElementToBeRemoved - retry until does not return element
Events
- fireEvent
fireEvent.click(getByText('Submit'))
Other
- Cleanup - use in afterEach to reset DOM
React Testing Library
No shallow rendering
foot gun with hooks
Deals with async well
waitForElement()
findBy/findByAll query
Closer to user behaviour
does not care about implementation details
Actually uses document.createElement and ReactDOM.render
similar to our apps rendering
Now ships with create-react-app
as it is the future
"The more your tests resemble the way your software is used, the more confidence they can give you."
Kent C. Dodds
creator of react-testing-library
Enzyme
Cares about implementation details
state and props
users do not!
Weird, test specific things
clicking a link requires test specific parameters to be passed along when simulating
Pro
Existing knowlege within the team
Demo
Setup Jest
with Gatsby
Setup React-Testing-Library
Resources
Article
Article not by author
Course
testingjavascript.com need purchase
Cheat Sheet
Decision
Use react-testing-library