Tweet
Tweet

Slide 1

Slide 1 text

React -by SIMONE AMORIM testing-library

Slide 2

Slide 2 text

O que devo testar? O teste deve parecer o mais possível da interação do usuário com nosso código.

Slide 3

Slide 3 text

O que devo testar? Não testamos se o valor de uma prop está correto. Testar o comportamento do usuário final e não do código. Em vez de nos concentrarmos no código e em como ele funciona, simplesmente assumimos a perspectiva do usuário.

Slide 4

Slide 4 text

Acessando e renderizando a árvore do DOM

Slide 5

Slide 5 text

Qual devo usar?

Slide 6

Slide 6 text

screen queryBy* 03 ● igual ao getBy* ● para elementos fora do DOM ● retorna null findBy* 02 ● assíncronas ● aguarda uns 5min pra checar o DOM ● gera um erro getBy* 01 ● síncronas ● confere o elemento no DOM ● retorna um erro

Slide 7

Slide 7 text

Qual devo usar?

Slide 8

Slide 8 text

Qual devo usar? Test IDs 03 ● getByTestId Queries semânticas 02 ● getByAltText ● getByTitle Queries acessíveis para qualquer pessoa. 01 ● getByRole ● getByLabelText ● getByPlaceholderText ● getByText ● getByDisplayValue

Slide 9

Slide 9 text

screen.getByRole("") Você deveria usar IDs apenas como última alternativa!

Slide 10

Slide 10 text

Qual devo usar?

Slide 11

Slide 11 text

Qual devo usar?

Slide 12

Slide 12 text

Qual devo usar?

Slide 13

Slide 13 text

debug() Permite imprimir a árvore do DOM

Slide 14

Slide 14 text

Interagindo com elementos do DOM

Slide 15

Slide 15 text

Existem duas formas de interagir com eventos.

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Esperando por dados

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Qual devo usar?

Slide 20

Slide 20 text

Qual devo usar?

Slide 21

Slide 21 text

Mocking requisições da API

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Referências ● Which query should I use? ● Common mistakes with React Testing Library ● Accessibility tree (AOM) ● Testing Playground ● Considerations for fireEvent ● Fix the "not wrapped in act(...)" warning

Slide 24

Slide 24 text

Vlws Galera! SIMONE AMORIM FEEDBACKS SÃO BEM VINDOS