Como testar aplicativos Next.js usando Jest

O objetivo principal de qualquer processo de desenvolvimento é criar aplicativos prontos para produção. Para conseguir isso, é essencial escrever um código que não apenas atenda aos requisitos funcionais, mas também permaneça estável e confiável ao longo do tempo. O teste serve como uma proteção, garantindo que os aplicativos funcionem conforme o esperado, mesmo quando novas atualizações são feitas durante o desenvolvimento.

Embora escrever testes abrangentes que abranjam vários casos extremos possa levar um tempo considerável, isso ajuda a sinalizar e resolver problemas antes que cheguem aos ambientes de produção.

Testando aplicativos Next.js

Escrever testes é um aspecto essencial e muitas vezes subestimado do desenvolvimento de aplicativos robustos. É fácil cair na tentação de enviar o código diretamente para a produção, confiando na crença de que "você criou o código, então deve funcionar!"

No entanto, essa abordagem pode levar a problemas imprevistos e bugs em ambientes de produção. Como resultado, adotar uma abordagem de desenvolvimento orientado a testes (TDD) pode ajudar a maximizar sua confiança em seu código e minimizar o tempo gasto depuração e resolução de pequenos bugs que poderia ter escorregado para a produção.

O que é Jest?

brincadeira é uma estrutura de teste popular que é amplamente utilizada por diferentes estruturas JavaScript. Ele fornece um conjunto de recursos de teste, como um executor de teste poderoso, simulação automática e teste de instantâneo.

Idealmente, esses recursos são úteis para alcançar uma cobertura de teste abrangente e garantir a confiabilidade de seu aplicativo em diferentes tipos de testes.

Criar um aplicativo de tarefas pendentes Next.js

Agora, vamos nos aprofundar no processo de execução de testes de unidade em um aplicativo Next.js usando Jest. No entanto, antes de começar, crie um projeto Next.js e instale as dependências necessárias.

Para começar, siga estas etapas:

1. Crie um novo projeto Next.js executando o seguinte comando em seu terminal:

   npx create-next-app@latest-test-tutorial

2. Depois de criar o projeto, navegue até o diretório do projeto executando:

   cd nextjs-test-tutorial

3. Instale as dependências necessárias como DevDependências executando o seguinte comando:

   npm install npm install --save-dev jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom

Com o projeto configurado e as dependências instaladas, agora você está pronto para construir o aplicativo Next.js e escrever testes de unidade usando Jest.

Criar o componente de tarefas pendentes

No /src diretório do projeto, abra o páginas/index.js arquivo, exclua o código Next.js clichê existente e adicione o código a seguir.

Primeiro, faça as seguintes importações e defina duas funções que irão gerenciar as tarefas do usuário: addTodo função e deleteTodo função.

importar { useState } de"reagir";
importar estilos de"../styles/Home.module.css";
exportarpadrãofunçãoLar() {
const [todos, setTodos] = useState([]);
const [novoTodo, setNovoTodo] = useState("");
const addTodo = () => {
se (newTodo.trim() !== "") {
const atualizadoTodos = [...todos, novoTodo];
 setTodos (atualizadoTodos);
 setNovoTodo("");
 }
 };
const deleteTodo = (índice) => {
const atualizadoTodos = [...todos];
 atualizadoTodos.splice (índice, 1);
 setTodos (atualizadoTodos);
 };

O código utiliza o useState gancho para inicializar e atualizar as variáveis ​​de estado: todos e novoTodo. O addTodo A função adiciona uma nova tarefa à lista de tarefas quando o valor de entrada não está vazio, enquanto a função deleteTodo A função remove uma tarefa específica da lista com base em seu índice.

Agora, escreva o código para os elementos JSX renderizados no DOM do navegador.

retornar (


 tipo="texto"
 className={styles.input}
 valor={novoTodo}
 data-testid="todo-entrada"
 onChange={(e) => setNewTodo (e.target.value)}
 />
"adicionar-todo">
 Adicionar tarefa
 </button>
"lista de afazeres">
 {todos.map((fazer, indexar) => (


 {pendência}
 </li>
 ))}
 </ul>
 {todos.map((fazer, indexar) => (


 onClick={() => deleteTodo (index)}
 className={styles.button}
 data-testid={`delete-todo-${índice}`}
 >
 Excluir
 </button>
 </div>
 ))}
 </div>
 );}

Escrevendo Casos de Teste

Antes de começar a escrever casos de teste, é crucial configurar o Jest de acordo com seus requisitos de teste específicos. Isso envolve a criação e personalização do jest.config.js arquivo, que serve como base para sua configuração de teste.

No diretório raiz, crie um novo jest.config.js arquivo. Em seguida, adicione o seguinte código para configurar o Jest adequadamente:

const nextJest = exigir("próximo/brincadeira");
const createJestConfig = nextJest({
 endereço: "./",
});
const customJestConfig = {
 Diretórios do módulo: ["node_modules", "/"],
 ambiente de teste: "jest-environment-jsdom",
};
módulo.exports = createJestConfig (customJestConfig);

Por fim, abra o pacote.json arquivo e adicione um novo script chamado teste que irá executar o comando brincadeira --watchAll para executar todos os casos de teste e observar quaisquer alterações.

Depois de fazer a atualização, seus scripts devem ficar assim:

"scripts": {
"desenvolvimento": "próximo desenvolvedor",
"construir": "próxima construção",
"começar": "próximo começo",
"fiapos": "próximo fiapo",
"teste": "brincadeira --watchAll"
 },

Com as configurações definidas, prossiga com a gravação e execução dos testes.

Testando o aplicativo Next.js To-Do com Jest

No diretório raiz do projeto, crie uma nova pasta chamada __testes__. O Jest procurará arquivos de teste nesta pasta. Dentro desta pasta, crie um novo arquivo chamado index.test.js.

Primeiro, faça as seguintes importações.

importar Lar de"../src/pages/index";
importar"@testing-library/jest-dom";
importar { fireEvent, render, screen, waitFor, act } de"@testing-library/react";

Escreva um teste para ver se todos os elementos estão sendo renderizados corretamente:

descrever("Todo App", () => {
 isto("renderiza o aplicativo de tarefas", () => {
 renderizar(<Lar />);

 esperar (screen.getByTestId("todo-entrada")).toBeInTheDocument();
 esperar (screen.getByTestId("adicionar-todo")).toBeInTheDocument();
 });
});

O caso de teste verifica se o aplicativo To-Do e seus elementos são renderizados corretamente. Dentro do caso de teste, o Lar componente é renderizado usando o renderizar função da biblioteca de testes.

Em seguida, as afirmações são feitas usando o esperar função para garantir que elementos específicos com IDs de teste, como entrada de tarefas estão presentes na saída renderizada. Se esses elementos forem encontrados no DOM, o teste será aprovado; caso contrário, ele falha.

Agora, execute o seguinte comando para executar o teste.

teste de execução npm

Você deve ver uma resposta semelhante se o teste passar.

Testando diferentes ações e simulando erros

Descreva esses casos de teste para verificar a funcionalidade dos recursos Add To-Do e Delete To-Do.

Comece escrevendo o caso de teste para a funcionalidade Add To-Do.

 isto("adiciona uma tarefa", assíncrono () => {
 renderizar(<Lar />);

const todoInput = tela.getByTestId("todo-entrada");
const addTodoButton = screen.getByTestId("adicionar-todo");
const todoList = screen.getByTestId("lista de afazeres");
aguardam agir(assíncrono () => {
 fireEvent.change (todoInput, { alvo: { valor: "Novo Todo" } });
 addTodoButton.click();
 });
aguardam Esperar por(() => {
 expect (todoList).toHaveTextContent("Novo Todo");
 });
 });

O trecho de código acima simula a interação do usuário digitando em um campo de entrada e clicando no botão Adicionar. Em seguida, usando um valor de entrada simulado de tarefas, ele verifica se o valor de entrada foi adicionado com sucesso à lista de tarefas.

Salve o arquivo e verifique o terminal. O teste deve ser executado automaticamente e desconectar resultados de testes semelhantes.

Para simular um erro de teste, modifique o ID de teste do botão Adicionar e execute o teste novamente. Com esta atualização, o teste deve falhar e desconectar uma mensagem de erro indicando o erro específico encontrado.

Idealmente, em uma base de código maior com vários contribuidores fazendo alterações frequentes, o teste desempenha um papel crucial na identificação de possíveis bugs que podem levar a falhas do sistema. Ao testar, você pode facilmente sinalizar inconsistências, como a demonstrada acima, e resolvê-las durante o desenvolvimento.

Finalmente, escreva o caso de teste para a funcionalidade Delete To-Do.

 isto("exclui uma tarefa", assíncrono () => {
 renderizar(<Lar />);

const todoInput = tela.getByTestId("todo-entrada");
const addTodoButton = screen.getByTestId("adicionar-todo");

 fireEvent.change (todoInput, { alvo: { valor: "Todo 1" } });
 fireEvent.click (addTodoButton);

const deleteTodoButton = screen.getByTestId("excluir-todo-0");
 fireEvent.click (deleteTodoButton);

const todoList = screen.getByTestId("lista de afazeres");
aguardam Esperar por(() => {
 expect (todoList).toBeEmptyDOMElement();
 });
 });

Novamente, ele verifica se o To-Do foi excluído com sucesso. Salve o arquivo para executar o teste.

Teste de unidade usando Jest

Este guia forneceu a você o conhecimento para escrever e executar testes de unidade simples, usando um componente To-Do como exemplo. Para garantir a estabilidade e a confiabilidade dos principais recursos do seu aplicativo e reduzir as chances de problemas inesperados em ambientes de produção, é importante priorizar a escrita de testes para sua chave componentes.

Além disso, você pode aprimorar sua abordagem de teste incorporando testes instantâneos e testes de ponta a ponta.