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????