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
- Shallow rendering shallow()
- Static rendering render()
- Navegação na árvore de componentes
- Obter instância de componente
- Acessar e setar props
- 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
