Component Testing with React Testing Library and Jest

A presentation at Granite State Code Camp Conference 2022 in November 2022 in Manchester, NH, USA by Kemet Dugue

Slide 1

Slide 1

Component Testing with React Testing Library and Jest Kemet Dugue kdugue

Slide 2

Slide 2

Agenda 1. Brief Introduction 2. Intro to React Testing Library (RTL) 3. Live Demo ( featuring Todo App) 4. Additional Resources 5. Q+A

Slide 3

Slide 3

About Me ● Engineer at Uber ● Interests: ○ Yoga ○ Hiking ○ Short Fiction

Slide 4

Slide 4

Opinions and Q+A

Slide 5

Slide 5

React Testing Library ● Test what the user sees ● Testing Components on the DOM, not internal component state ● Developer-friendly

Slide 6

Slide 6

Querying Query Priority 1. Accessible to Everyone (getByRole, getByPlaceholderText, getByText) 2. Semantic (getByAltText, getByTitle) 3. Test IDs (getByTestId)

Slide 7

Slide 7

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

Slide 8

Slide 8

Todo App Example!

Slide 9

Slide 9

Resources ● React Testing Library: https://testing-library.com/docs/react-testing-libr ary

Slide 10

Slide 10

Questions????