Jest: torne seu código mais seguro e confiável

Se você desenvolve em React, provavelmente já ouviu falar do Jest - uma das ferramentas mais populares para testes de JavaScript. O Jest é fácil de usar e oferece uma ampla gama de recursos para testar componentes, funções e bibliotecas. No conteúdo desse posts, será mostrado como instalar e configurar o Jest e react-testing-library, e como escrever testes para seus projetos.

Introdução ao Jest - O que é o Jest e por que usá-lo?

O Jest foi projetado para ser fácil de usar e oferece recursos poderosos para testar projetos em JavaScript, incluindo suporte para testes assíncronos e testes de integração. É muito popular entre os desenvolvedores do React, pois possuí fácil integração e oferece uma variedade de recursos para testar componentes React.

O Jest também é rápido, o que significa que você pode executar seus testes mais rapidamente do que com outras estruturas de teste. O Jest executa testes em paralelo, o que pode economizar tempo em projetos maiores. Além disso, o Jest tem uma sintaxe intuitiva que torna a criação de testes mais simples e fácil de entender.

Instalando o Jest e a biblioteca de testes do React

Antes de começar a usar o Jest, você precisará instalá-lo em seu projeto. Felizmente, a instalação do Jest é simples e rápida. Primeiro, você precisará instalar o Node.js em seu computador, se ainda não o fez.

Depois de instalar o Node.js, você pode instalar o Jest usando o npm. Basta abrir o terminal e digitar o seguinte comando:

Configurando o Jest em seu projeto

Agora que o Jest está instalado em seu projeto, você precisa configurá-lo. Você pode configurar o Jest adicionando um arquivo de configuração na raiz do seu projeto chamado jest.config.js. Este arquivo permite que você configure várias opções para o Jest, como o diretório de arquivos de teste, o padrão de nomenclatura para arquivos de teste e outras opções.

Aqui está um exemplo básico de um arquivo de configuração:

module.exports = {
  testMatch: ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)"],
  testPathIgnorePatterns: ["/node_modules/"],
};

• Este arquivo de configuração diz ao Jest para procurar arquivos de teste no diretório tests e em qualquer arquivo que termine com .spec.js ou .test.js. Ele também diz ao Jest para ignorar o diretório node_modules.

Noções básicas de testes com Jest

Crie um arquivo chamado sum.test.js no diretório tests. Adicione o seguinte código ao arquivo:

function sum(a: number, b: number) {
	return a + b;
}


test("adds 1 + 2 to equal 3", () => {
	expect(sum(1, 2)).toBe(3);
});

• Este teste verifica se a função sum adiciona corretamente dois números. O teste é executado usando a função test do Jest. A função test recebe dois argumentos - uma descrição do teste e uma função que contém a lógica do teste. A função de teste usa a função expect do Jest para verificar se a saída da função sum é igual a 3.

Para executar o teste, abra o terminal e execute o seguinte comando:

• Este comando inicia o Jest e executa todos os testes em seu projeto. Você verá a saída do Jest no terminal, que mostrará se o teste passou ou falhou.

Testando componentes React com Jest e @testing-library/react

Jest é amplamente utilizado para testar aplicativos React. Para testar componentes React com o Jest, você pode usar a biblioteca de teste @testing-library/react. Esta biblioteca fornece funções para simular eventos do usuário, acessar elementos DOM e verificar o estado do componente.

Aqui está um exemplo de teste de componente React usando o @testing-library/react:

import { Button } from "@components/button";

import { render } from "@testing-library/react";
import userEvent from "@testing-library/user-event";


describe("Button", () => {
	it("renders a button", () => {
		const { getByText } = render(<Button label="Click Me" />);

		const button = getByText("Click Me");

		expect(button).toBeInTheDocument();
	});

	it("calls onClick when button is clicked", () => {
		const onClick = jest.fn();
		const { getByText } = render(<Button label="Click Me" onClick={onClick} />);

		const button = getByText("Click Me");

		userEvent.click(button);

		expect(onClick).toHaveBeenCalled();
	});
});

• Este teste verifica se um componente Button é renderizado corretamente e se a função onClick é chamada quando o botão é clicado. O teste usa a função render do @testing-library/react para renderizar o componente Button. Ele usa a função getByText para obter o elemento DOM do botão e a função userEvent para simular um clique no botão. Ele usa a função jest.fn para criar uma função mock para onClick e a função toHaveBeenCalled para verificar se a função mock foi chamada.

Simulação de componentes Jest

Às vezes, você pode precisar isolar um componente durante um teste e simular um ou mais de seus filhos. O Jest fornece uma maneira fácil de fazer isso usando a função jest.mock

Aqui está um exemplo de teste que simula um componente filho em um componente pai:

import Parent from "@components/button";

import { render } from "@testing-library/react";

jest.mock("./Child", () => <div>Mock Child Component</div>);

test("renders the parent component with a mocked child", () => {
	const { getByText } = render(<Parent />);

	const child = getByText("Mock Child Component");
	expect(child).toBeInTheDocument();
});

• Este teste simula um componente Child em um componente Parent. Ele usa a função jest.mock para substituir o componente Child por um componente mock. O teste usa a função render para renderizar o componente Parent e a função getByText para obter o elemento DOM do componente filho simulado.

Testando componentes de botão React passo a passo

Os componentes de botão são comuns em aplicativos React e podem ser facilmente testados com o Jest. Aqui está um guia passo a passo para testar componentes de botão com o Jest:

1. Crie um arquivo chamado Button.test.js no diretório tests.
2. Importe o componente Button e a biblioteca de teste @testing-library/react.
3. Escreva um teste que verifica se o componente Button é renderizado corretamente.
4. Escreva um teste que verifica se a função onClick é chamada quando o botão é clicado.
5. Escreva um teste que verifica se o botão está desabilitado quando a propriedade disabled é definida como verdadeira.

Aqui está um exemplo de código para testar um componente de botão:

import Button from "./Button";

import { render } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

describe("Button", () => {
	it("should be renders a button", () => {
		const { getByText } = render(<Button label="Click me" />);

		const button = getByText("Click me");
		expect(button).toBeInTheDocument();
	});

	it("should be calls onClick when button is clicked", () => {
		const onClick = jest.fn();
		const { getByText } = render(<Button label="Click me" onClick={onClick} />);

		const button = getByText("Click me");
		userEvent.click(button);
		expect(onClick).toHaveBeenCalled();
	});

	it("should be disables the button when disabled is true", () => {
		const { getByText } = render(<Button label="Click me" disabled />);

		const button = getByText("Click me");
		expect(button).toBeDisabled();
	});
});

• Este código testa se o componente Button é renderizado corretamente, se a função onClick é chamada quando o botão é clicado e se o botão está desabilitado quando a propriedade disabled é definida como verdadeira.

Cobertura de Teste Jest

O Jest fornece uma ferramenta de cobertura de código que ajuda a verificar se seus testes estão cobrindo todo o seu código. A cobertura de código é uma medida da porcentagem de código que é executada durante a execução dos testes. Quanto maior a cobertura de código, maior a probabilidade de encontrar erros em seu código.

Para usar a ferramenta de cobertura de código do Jest, execute o seguinte comando no terminal:

• Este comando inicia o Jest e executa todos os testes em seu projeto, além de gerar um relatório de cobertura de código. Você pode abrir o arquivo coverage/lcov-report/index.html em seu navegador para ver o relatório de cobertura de código

Técnicas avançadas Jest

O Jest fornece muitos recursos avançados para testes, como testes paralelos, testes em tempo real e testes de integração. Aqui estão algumas dicas para usar esses recursos avançados:

• Use a opção --watch do Jest para executar testes em tempo real enquanto você faz alterações no código.
• Use a opção --coverageThreshold do Jest para definir limites mínimos de cobertura de código.
• Use a opção --maxWorkers do Jest para executar testes em paralelo em vários processos.
• Use a biblioteca de teste supertest para testar APIs Node.js.

Conclusão

Em resumo, o Next.js é uma ferramenta essencial para desenvolver aplicativos React mais sofisticados, pois oferece recursos avançados como SSR e SSG. Com sua estrutura otimizada para o desenvolvimento de aplicativos escaláveis, o Next.js torna a construção de aplicativos web ainda mais fácil e produtiva.

Se você está procurando uma maneira eficiente de criar aplicativos React poderosos, o Next.js é uma ótima escolha. Visite a documentação oficial do Nextjs para se aprofundar ainda mais no framework.