Testes de redação podem ser tediosos e repetitivos. Você pode sentir que está desperdiçando um tempo precioso que preferiria usar para trabalhar em recursos. No entanto, se você deseja enviar aplicativos nos quais confia, deve escrever testes.
O teste permite que você detecte erros e bugs que, de outra forma, você poderia acabar enviando aos usuários. Portanto, melhora a experiência do usuário de seu aplicativo e evita que você precise depurar o código de produção.
Você pode facilmente escrever testes em React usando Jest e a React Testing Library.
O que você deve testar no React?
Decidir o que testar pode ser difícil. Embora os testes sejam ótimos, você não deve testar todas as linhas do seu aplicativo React. Fazer isso deixará você com testes frágeis que quebram com a menor alteração em seu aplicativo.
Em vez disso, você deve apenas testar a implementação do usuário final. Isso significa testar como o usuário final usará seu aplicativo em vez de testar o funcionamento interno do seu aplicativo.
Além disso, certifique-se de testar os componentes mais usados em seu aplicativo, como a página inicial ou o componente de login. Além disso, teste os recursos mais importantes em seu aplicativo. Por exemplo, esses podem ser recursos que geram dinheiro, como o recurso de carrinho de compras.
Ao decidir o que testar, uma coisa a ter em mente é nunca testar a funcionalidade que o React manipula sozinho. Por exemplo, em vez de testar a validade de props, você pode usar React PropTypes.
Testando um componente de botão
Lembre-se, você deve testar apenas a implementação do usuário final de um componente e não seu funcionamento interno. Para um componente de botão, isso significa verificar se ele é renderizado sem travar e exibido corretamente.
Crie um novo arquivo no src pasta chamada Button.js e adicione o seguinte código.
funçãoBotão({valor}) {
Retorna (
<botão>{valor}</button>
)
}
exportarpredefinição Botão
Button.js aceita um prop chamado value e o usa como o valor do botão.
Escrevendo seu primeiro teste
UMA aplicativo create-react-app vem pré-instalado com Jest e a React Testing Library. Jest é uma biblioteca de teste leve com funções de simulação e asserção integradas. Funciona com muitos Estruturas JavaScript. A React Testing Library, por outro lado, fornece funções para ajudá-lo a testar como os usuários interagem com os componentes.
Crie um novo arquivo chamado Button.test.js na pasta src. Por padrão, Jest identifica arquivos com sufixo .test.js como arquivos de teste e os executa automaticamente. Outra opção é adicionar seus arquivos de teste a uma pasta chamada __testes__.
Adicione o código a seguir em Button.test.js para criar o primeiro teste.
importar { renderizar } a partir de '@testing-library/react';
importar Botão a partir de '../Botão';
descrever('Componente de botão', () => {
teste('Renderiza o componente do botão sem travar', () => {
renderizar(<Botão />);
});
})
Este teste primeiro define o que é o teste usando o bloco describe fornecido pelo Jest. Este bloco é útil para agrupar testes relacionados. Aqui, você está agrupando os testes para o componente Button.
Dentro do bloco describe, você tem o primeiro teste no bloco de teste. Este bloco aceita uma string descrevendo o que o teste deve fazer e uma função de retorno de chamada que executa a expectativa.
Neste exemplo, o teste deve renderizar o componente Button sem travar. O método de renderização da React Testing Library executa o teste real. Ele verifica se o componente Button é renderizado corretamente. Se isso acontecer, o teste passa, caso contrário, ele falha.
Usando funções para encontrar o botão
Às vezes você quer verificar se o elemento foi montado. O método screen tem uma função getByRole() que você pode usar para pegar um elemento do DOM.
screen.getByRole('botão')
Você pode então usar o elemento que você pegou para realizar testes como verificar se ele existe no documento ou se foi renderizado corretamente.
getByRole() é uma entre muitas das consultas que você pode usar para selecionar elementos em um componente. Confira outros tipos de consultas no The React Testing Library's Guia “Qual consulta devo usar”. Além do papel de “botão”, a maioria elementos HTML semânticos têm funções implícitas que você pode usar para realizar suas consultas. Encontre a lista de funções de Documentos MDN.
Adicione o seguinte ao bloco de teste para verificar a renderização do componente.
teste('Renderiza o botão sem travar', () => {
renderizar(<Valor do botão ="Inscrever-se" />);
esperar (screen.getByRole('botão')).toBeInTheDocument()
});
O matcher toBeInTheDocument() verifica se o elemento botão existe no documento.
Espere que o botão seja renderizado corretamente
O componente Button aceita um valor prop e o exibe. Para renderizar corretamente, o valor exibido deve ser o mesmo que você passou.
Crie um novo bloco de teste e adicione o código a seguir.
teste('Renderiza o botão corretamente', () => {
renderizar(<Valor do botão ="Conecte-se" />);
esperar (screen.getByRole('botão')).toHaveTextContent("Conecte-se")
})
Observe que você não precisa fazer limpezas após os testes ao usar a React Testing Library. Nas versões anteriores, você precisaria fazer a limpeza manualmente assim:
afterEach (limpeza)
Agora, a biblioteca de testes desmonta os componentes automaticamente após cada renderização.
Criando testes de instantâneo
Até agora, você testou o comportamento do componente Button. Escreva testes de instantâneo para testar se a saída do componente permanece a mesma.
Os testes de instantâneo comparam a saída atual com uma saída armazenada do componente. Por exemplo, se você alterar o estilo de um componente Button, o teste de instantâneo o notificará. Você pode atualizar o instantâneo para corresponder ao componente alterado ou desfazer as alterações de estilo.
Os testes de instantâneo são muito úteis sempre que você deseja garantir que sua interface do usuário não seja alterada inesperadamente.
O teste de instantâneo é diferente dos testes de unidade, pois você precisa já ter um código em funcionamento para criar o instantâneo.
Você usará o método renderizador do pacote npm react-test-renderer. Portanto, execute o seguinte código para instalá-lo.
npm instalar reagir-teste-renderizador
Em Button.test.js, escreva o teste de snapshot da seguinte forma:
teste('Instantâneo de correspondências', () => {
const tree = renderer.create(<Valor do botão ="Conecte-se" />).toJSON();
Espero(árvore).toMatchSnapshot();
})
Não há instantâneos existentes para o componente Button, portanto, executar este teste criará um arquivo de instantâneo junto com o arquivo de teste:
Botão
└─── __testes__
│ │ Botão.tests.js
│ └─── __instantâneo__
│ │ Botão.teste.js.foto
│
└─── Botão.js
Agora, quando você executar o próximo teste, o React irá comparar o novo snapshot gerado com o armazenado.
Escreva testes para os componentes mais usados
Este tutorial ensinou como escrever DOM e testes de snapshot no React testando um componente Button. Escrever testes para todos os componentes que você cria pode ser tedioso. No entanto, esses testes economizam o tempo que você gastaria depurando o código já implantado.
Você não precisa atingir 100% de cobertura de teste, mas certifique-se de estar escrevendo testes para seus componentes mais usados e importantes.
