A presentation at Granite State Code Camp Conference 2022 in in Manchester, NH, USA by Kemet Dugue
Component Testing with React Testing Library and Jest Kemet Dugue kdugue
Agenda 1. Brief Introduction 2. Intro to React Testing Library (RTL) 3. Live Demo ( featuring Todo App) 4. Additional Resources 5. Q+A
About Me ● Engineer at Uber ● Interests: ○ Yoga ○ Hiking ○ Short Fiction
Opinions and Q+A
React Testing Library ● Test what the user sees ● Testing Components on the DOM, not internal component state ● Developer-friendly
Querying Query Priority 1. Accessible to Everyone (getByRole, getByPlaceholderText, getByText) 2. Semantic (getByAltText, getByTitle) 3. Test IDs (getByTestId)
Rendering / Testing the DOM ● Render: renders the component ○ methods provided: ■ debug: debugging the DOM (can see HTML elements) ■ rerender: re-render your React component ■ cleanup: unmount ■ …many more ● screen: what allows us to interact with the elements that are being rendered ○ Provides the query method: ■ getByRole ■ getByText ■ getByPlaceholderText ■ …many more
Todo App Example!
Resources ● React Testing Library: https://testing-library.com/docs/react-testing-libr ary
Questions????
for free. You
can too.