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
findBy/findByAll query - wraps waitForElement
Events
- fireEvent
- userEvent
Other
- cleanup
- debug
- rerender
- unmount
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
Cool stuff
Demo
Testing Demo
One more cool stuff
Use Globals
... but not too many globals
... the earth is flat
not global
Resources
Article
Article not by author
Course
Cheat Sheet
Decision
Use react-testing-library