Component Testing with React Testing Library and Jest

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

Component Testing with React Testing Library and Jest Kemet Dugue kdugue