react hooks testing library

biblioteca de teste de ganchos de reação

Utilitários de teste simples e completos do React que incentivam boas práticas de teste.

Leia os documentos

---

Uma nota sobre o suporte do React 18

Se você estiver usando a versão atual do react-testing-library , substitua

 import { renderHook } from '@testing-library/react-hooks'

com

 import { renderHook } from '@testing-library/react'

Depois de substituído, @testing-library/react-hooks pode ser desinstalado.

Detalhes

Como parte das mudanças no React 18, foi decidido que a API renderHook fornecida por esta biblioteca será incluída como adições oficiais à react-testing-library (PR) e react-native-testing-library (PR) com a intenção é fornecer uma implementação mais coesa e consistente para nossos usuários.

Seja paciente enquanto finalizamos essas alterações nas respectivas bibliotecas de testes. Enquanto isso, você pode instalar @testing-library/react@^13.1

Índice

• O problema
• A solução
• Quando usar esta biblioteca
• Quando não usar esta biblioteca
• Exemplo
  • useCounter.js
  • useCounter.test.js
• Instalação
  • Dependências de pares
• API
• Colaboradores
• Problemas
  • ? Erros
  • Solicitações de recursos
  • ❓ Perguntas
• LICENÇA

O problema

Você está escrevendo um gancho personalizado incrível e deseja testá-lo, mas assim que o chama, você vê o seguinte erro:

Violação invariante: os ganchos só podem ser chamados dentro do corpo de um componente de função.

Você realmente não quer escrever um componente apenas para testar esse gancho e precisa descobrir como irá acionar todas as várias maneiras pelas quais o gancho pode ser atualizado, especialmente dadas as complexidades de como você conectou tudo junto .

A solução

A react-hooks-testing-library permite que você crie um equipamento de teste simples para ganchos React que lida com sua execução dentro do corpo de um componente de função, além de fornecer várias funções utilitárias úteis para atualizar as entradas e recuperar as saídas de seu incrível gancho personalizado. Esta biblioteca tem como objetivo fornecer uma experiência de teste o mais próxima possível do uso nativo de seu gancho de dentro de um componente real.

Usando esta biblioteca, você não precisa se preocupar em como construir, renderizar ou interagir com o componente react para testar seu gancho. Você pode simplesmente usar o gancho diretamente e afirmar os resultados.

Quando usar esta biblioteca

1. Você está escrevendo uma biblioteca com um ou mais ganchos personalizados que não estão diretamente vinculados a um componente
2. Você tem um gancho complexo que é difícil de testar por meio de interações de componentes

Quando não usar esta biblioteca

1. Seu gancho é definido ao lado de um componente e só é usado lá
2. Seu gancho é fácil de testar apenas testando os componentes que o utilizam

Exemplo

useCounter.js

 import { useState , useCallback } from 'react'

function useCounter ( ) {
  const [ count , setCount ] = useState ( 0 )

  const increment = useCallback ( ( ) => setCount ( ( x ) => x + 1 ) , [ ] )

  return { count , increment }
}

export default useCounter

useCounter.test.js

 import { renderHook , act } from '@testing-library/react-hooks'
import useCounter from './useCounter'

test ( 'should increment counter' , ( ) => {
  const { result } = renderHook ( ( ) => useCounter ( ) )

  act ( ( ) => {
    result . current . increment ( )
  } )

  expect ( result . current . count ) . toBe ( 1 )
} )

Um uso mais avançado pode ser encontrado na documentação.

Instalação

npm install --save-dev @testing-library/react-hooks

Dependências de pares

react-hooks-testing-library não vem com uma versão do react para permitir que você instale a versão específica que deseja testar. Ele também não vem instalado com um renderizador específico, atualmente oferecemos suporte react-test-renderer e react-dom . Você só precisa instalar um deles, no entanto, se tiver ambos instalados, usaremos react-test-renderer como padrão. Para obter mais informações, consulte os documentos de instalação. Geralmente, as versões instaladas do react e do renderizador selecionado devem ter versões correspondentes:

npm install react@^16.9.0
npm install --save-dev react-test-renderer@^16.9.0

NOTA: A versão mínima suportada de react , react-test-renderer e react-dom é ^16.9.0 .

API

Consulte a referência da API.

Colaboradores

Os agradecimentos vão para essas pessoas maravilhosas (chave emoji):

Michael Peyper ? ? ? ️	quadrado otofu	Patrick P. Henley ? ?	Matheus Marques	Druv Patel ? ?	Nathaniel Tucker ? ?	Sergey Grishchenko ?
Josep M Sobrepere	Marcel Tinner	Daniel K. ?	Vicente Malone	Sebastião Weber	Christian Gil	JavascriptJoe ✅ ️
Sarah Dayan ?	Roman Gusev	Adam Seckel	Keiya Sasaki ️	Hu Chen	Josh ? ? ️	Na'aman Hirschfeld
Salão Braydon	Jacob MG Evans ️	Tigre Abrodi ️	Amr A. Mohammed ️	Juhana Jauhiainen	Jens Meindertsma ️	Marco Moretti ?
Martinho V.	Erozak	Nick McCurdy ?	Aria	entorpecido86	Alex Jovem ?	Ben Lambert
David Cho-Lerat	Evan Harmon	Jason Brown	Kah Wee Teng	Leonid Shagabutdinov	Levi Açougueiro	Michele Settepani
Sam	Tanay Pratap	Tom Rees-Herdman	iqbal125	penhasco ?	Jon Koops	Jonathan Peyper ?
Sean Baines	Michael Vasin	Aleksandar Grbic	Jonathan Holmes	Michael De Boey ?	Anton Zinovyev ?	mariana-exelate ?
Matan Borenkraout ?	andyrooger	Bryan Wain ? ?	Robert Neve ️	Chris Chen ️	Masioso	Laishuxin

Este projeto segue a especificação de todos os contribuidores. Contribuições de qualquer tipo são bem-vindas!

Problemas

Quer contribuir? Procure o rótulo Good First Issue.

? Erros

Registre um problema devido a bugs, documentação ausente ou comportamento inesperado.

Ver erros

Solicitações de recursos

Registre um problema para sugerir novos recursos. Vote nas solicitações de recursos adicionando um ?. Isso ajuda os mantenedores a priorizar o que trabalhar.

Consulte solicitações de recursos

❓ Perguntas

Para dúvidas relacionadas ao uso da biblioteca, você pode levantar o problema aqui ou visitar uma comunidade de suporte:

• Discórdia
• Estouro de pilha

LICENÇA

MIT