Do Enzyme ao Testing Library

@pablordinella

Do Enzyme ao Testing Library

@pablordinella

Enzyme

Pega o retorno do seu componente e te dá utilitários para:

  • navegar na árvore componentes
  • fazer seleções (seletores CSS, nome de componente...)
  • acessar props e state
  • executar métodos

Testing Library

Testing Library

@testing-library/dom

@testing-library/react

Testing Library

@testing-library/dom

queries

fireEvent

async utils

Testing Library

@testing-library/dom

queries

ByLabelText
ByPlaceholderText
ByText
ByAltText
ByTitle
ByDisplayValue
ByRole
ByTestId

get

getAll

query

queryAll

find

findAll

X

fireEvent

click

change

input

keyDown

keyUp

blur

focus

...

wait
waitForElement
waitForDomChange
waitForElementToBeRemoved

Testing Library

async utils

@testing-library/dom

Testing Library

@testing-library/react   a.k.a. react-testing-library

render()

O que o Testing Library não faz

  1. Shallow rendering shallow()
  2. Static rendering render()
  3. Navegação na árvore de componentes
  4. Obter instância de componente
  5. Acessar e setar props
  6. Acessar e setar state

Tudo isso são coisas que o usuário final não pode fazer, entao seu teste também não deveria fazer

Problemas com Snapshots

É repleto de detalhes de implementação (nome de componentes e props). Qualquer refactor quebra o teste

Problemas com Snapshots

É repleto de detalhes de implementação (nome de componentes e props). Qualquer refactor quebra o teste

Muitas vezes é difícil entender a falha

Problemas com Snapshots

É repleto de detalhes de implementação (nome de componentes e props). Qualquer refactor quebra o teste

Muitas vezes é difícil entender a falha

O dev se torna descuidado e atualiza o snapshot por atualizar

Problemas com Snapshots

É repleto de detalhes de implementação (nome de componentes e props). Qualquer refactor quebra o teste

Muitas vezes é difícil entender a falha

Como o teste quebra a todo momento, o dev se torna descuidado e atualiza o snapshot por atualizar

Causa falsa sensação de que o teste está cobrindo o cenário, e acabamos por não escrever o teste adequado

Como seria com o Testing Library

Características do Testing Library

A intenção do teste fica clara; testa somente o que importa

Baseia-se na renderização real do componente, o resultado no DOM

Exemplo com interação (Enzyme)

Baseia-se na implementação

Não garante que o conteúdo do tab certo está aparecendo (falso positivo)

Exemplo com interação (Testing Library)

Só se importa com o que está no DOM

Valida o que o usuário está vendo

Resiliente, não quebra com refatorações

Por que é ruim testar detalhes de implementação 

  • Testes podem quebrar, mesmo quando o componente continua funcionando depois de uma refatoração. Falsos negativos
     
  • Testes podem passar quando você quebra sua aplicação. Falsos positivos

Nomes de classes CSS

State/Props

Nomes de componentes

Qualquer coisa que o usuário final não vê!

Exemplos de detalhes de implementação

Como o Testing Library ajuda na acessibilidade

ByLabelText
ByPlaceholderText
ByText
ByAltText
ByTitle
ByDisplayValue
ByRole
ByTestId

.find('Progress')

Utilitários assíncronos

wait
waitForElement
waitForDomChange
waitForElementToBeRemoved

Dúvidas e dificuldades

Mudança de mindset

  • Como vou navegar pelos componentes?
  • Como simular esta interação?
  • Como sei que chamou esta função?

Quase todas as vezes a dificuldade estava no conhecimento da API do DOM

Pensar em como o usuário encontra os elementos e interage com eles

Experimentação com o devtools e consultas no MDN

@testing-library/user-event

Simulação de eventos do usuário

click(element)

dblClick(element)

type(element, text, [options])

selectOptions(element, values)

fireEvent.change(input, { target: { value: '23' } })

userEvent.type(input, '23')

 

Migração

Adicione o @testing-library/react

Comece a testar novos componentes com ele

Refatore testes que forem quebrando

Escreva testes.

Não muitos.

A maioria de integração.

caro

casos complexos

lento

barato

casos simples

rápido

Testing Library

  • Baseia-se no DOM renderizado
  • Tem seletores "humanizados"
  • Interações em nodes do DOM
  • Testa do ponto de vista do usuário final

Enzyme

  • Baseia-se no retorno do componente
  • Facilita a navegação na árvore de componentes
  • Simula interações
  • Testa implementação

Happy Testing

@pablordinella

Do Enzyme ao Testing Library

By Pablo R. Dinella

Do Enzyme ao Testing Library

  • 449
Loading comments...

More from Pablo R. Dinella