Slide 1

Slide 1 text

Unit Testing React Day 2022

Slide 2

Slide 2 text

Ego Slide Luca Del Puppo (aka Puppo) Full-Stack Developer at Flowing a Claranet Italian Company @puppo92 https://www.linkedin.com/in/lucadelpuppo/ [email protected]

Slide 3

Slide 3 text

The Test Pyramid

Slide 4

Slide 4 text

Jest vs React Testing Library (RTL)

Slide 5

Slide 5 text

Sporchiamoci le mani Example https://puppo.github.io/reactday-2022-workshop-testing/ Code https://github.com/Puppo/reactday-2022-workshop-testing

Slide 6

Slide 6 text

React Testing Library Selectors

Slide 7

Slide 7 text

Single Element Type of Query 0 Matches 1 Match >1 Matches Retry (Async/Await) getBy... Throw error Return element Throw error No queryBy... Return null Return element Throw error No findBy... Throw error Return element Throw error Yes

Slide 8

Slide 8 text

Multiple Elements Type of Query 0 Matches 1 Match >1 Matches Retry (Async/Await) getAllBy... Throw error Return array Return array No queryAllBy... Return [] Return array Return array No findAllBy... Throw error Return array Return array Yes

Slide 9

Slide 9 text

Query types - Queries Accessible to Everyone - getByRole - getByLabelText - getByPlaceholderText - getByText - getByDisplayValue - Semantic Queries - getByAltText (img, area, input) - getByTitle - Test IDs - getByTestId

Slide 10

Slide 10 text

Thanks!

Slide 11

Slide 11 text

Give me your feedback

Slide 12

Slide 12 text

Milano Frontend - 25 Ottobre 2022 Registrazione https://tinyurl.com/zawyva9z

Slide 13

Slide 13 text

NgRome - 02 Ottobre 2022 Sito https://t.co/7Z4wXMapva Coupon (-15%) LucaCarbonara22