Teste de unidade React: guia detalhado

O teste unitário é uma parte crítica da construção de aplicativos de software bem-sucedidos. Ele garante que o código que está sendo escrito atenda a requisitos específicos, tenha o desempenho esperado e possa ser mantido ao longo do tempo. React, lançado em maio de 2013, é uma das bibliotecas JavaScript mais populares para a criação de interfaces de usuário em aplicações web. Jest é a estrutura de teste mais amplamente usada para testes unitários de componentes React.

Este artigo explorará Jest para escrever testes de unidade para componentes React. Veremos o que constitui um teste de unidade, como escrever testes usando APIs e métodos de asserções do Jest e algumas práticas recomendadas para escrever testes de unidade eficazes.

Brincadeira era criado em 2011 pelo Facebook e agora se tornou o padrão de fato para escrever testes unitários com React devido à sua poderosa biblioteca de asserções, recursos abrangentes de simulação e processo de configuração fácil, entre outros recursos. Todos esses recursos permitem que você escreva testes significativos rapidamente, sem se preocupar com detalhes de configuração ou lidar com processos complexos de configuração para cada ferramenta separadamente.

Para utilizar Jest de maneira eficaz para escrever testes de unidade em aplicativos React, você deve primeiro entender como funcionam os diferentes tipos de asserções, o que significa zombaria e as práticas recomendadas para configurar seu ambiente. Este artigo fornecerá uma visão geral de todos esses tópicos para que os leitores possam obter conhecimento suficiente para escrever testes de unidade significativos, mas fáceis de manter, rapidamente!

Por que o teste de unidade React é importante?

O teste unitário é essencial por vários motivos, alguns dos quais são mencionados a seguir:

Tempo de desenvolvimento reduzido

O teste de unidade pode reduzir o tempo gasto na depuração, evitando que erros apareçam posteriormente no ciclo de desenvolvimento. Ao escrever testes unitários antes da codificação, os desenvolvedores do React podem identificar rapidamente quaisquer problemas com seu código antes de se aprofundarem na implementação.

Isso permite que eles façam ajustes ou correções o mais rápido possível, sem começar do zero se algo der errado. Além disso, uma vez que um conjunto de testes de unidade tenha sido escrito para um aplicativo, ele poderá ser executado novamente após quaisquer alterações importantes terem sido feitas para garantir que tudo funcione conforme o esperado.

Qualidade de código aprimorada

Ao executar testes de unidade automatizados regularmente durante o desenvolvimento, os desenvolvedores podem detectar erros e inconsistências no início, antes que se tornem problemas muito maiores no futuro. Escrever casos de teste abrangentes também incentiva melhores práticas de codificação, pois exige que os programadores pensem antecipadamente sobre quais entradas podem levar a resultados inesperados ou bugs mais adiante no processo de desenvolvimento.

Como resultado, um teste de unidade geralmente leva a uma melhor qualidade geral do código e a menos bugs em comparação com projetos que não empregam esse método de teste ou o implementam apenas parcialmente durante seu fluxo de trabalho.

Melhor documentação

Os programadores que escrevem testes unitários ajudam a criar uma documentação clara para cada parte de uma aplicação porque cada passo que um programador dá deve ser completamente documentado para que outros programadores ou engenheiros que trabalham com o mesmo software entendam exatamente o que foi feito e por que foi feito. maneira e não de outra maneira.

Além disso, uma boa documentação ajuda o futuro pessoal de manutenção a manter as aplicações existentes com mais facilidade, pois saberão exatamente quais funções foram usadas, onde variáveis ​​específicas foram declaradas, etc. Com a documentação adequada, a compreensão de peças complexas de software se torna muito mais fácil.

Maior confiabilidade e capacidade de manutenção

Os testes de unidade ajudam a garantir a confiabilidade porque verificam bugs em cada nível durante todo o ciclo de vida de um aplicativo. Quando essas verificações falham devido à introdução de novos erros em um aplicativo, os desenvolvedores podem resolvê-los imediatamente, em vez de esperar até mais tarde para reparar danos causados ​​por bugs despercebidos.

Este maior nível de monitoramento também significa menos tempo perdido tentando rastrear fontes de vários problemas, uma vez que a maioria já foi detectada antecipadamente por meio de procedimentos rigorosos de testes de unidades de reação.

Além disso, a capacidade de manutenção aumenta significativamente quando vários conjuntos de casos de teste cobrem diferentes aspectos de funcionalidade dentro da área escolhida (por exemplo, lógica da interface do usuário), o que significa que futuras atualizações/alterações precisam apenas passar por critérios estabelecidos previamente; o pedido permanece válido após a ocorrência de modificações.

O que é brincadeira?

Jest é uma estrutura de teste de JavaScript criada pelo Facebook. Ele realiza testes unitários e de integração em aplicativos escritos em qualquer linguagem que transpile para JavaScript, incluindo React, Vue, Angular, Node.js e muito mais. Jest fornece uma biblioteca de asserções poderosa com relatórios de cobertura de código integrados e outros recursos que facilitam o início da escrita de testes para seu aplicativo.

Vamos pular para a implementação de testes unitários no React!

Como podemos implementar testes unitários no React?

Vejamos como podemos implementar testes de unidade em um aplicativo React.

Pré-requisitos

Para implementar o teste de unidade com sucesso, você deve ter o seguinte:

• Node.js: A versão mais recente do Node.js em sua máquina.
• Um editor de código: Qualquer IDE que suporte React.
• Brincadeira: uma estrutura de teste de JavaScript que funciona bem com React.
• Biblioteca de testes React: fornece utilitários para testar componentes do React.

Começando

Instalando e criando um novo aplicativo React

Execute o seguinte comando em seu terminal para instalar Criar aplicativo React. É uma ferramenta que inicializa um aplicativo react sem configuração de construção.

 $ npm install create-react-app

Depois que o Create React App estiver instalado, você deve executar o seguinte comando.

$ npx create-react-app my-app

Agora navegue até o diretório my-app.

$ cd my-app

Execute o seguinte comando para iniciar o aplicativo React que você criou.

$ npm start

You will see the output similar to the one below in your terminal:

Compiled successfully!

You can now view demo in the browser.

  Local:            
  On Your Network:  

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

Ao acessar a URL /, você verá uma página padrão para o aplicativo React.

Precisamos instalar Jest e React Testing Library como uma dependência de desenvolvimento.

Instalando Jest usando Terminal

Execute o seguinte comando em seu terminal para instalar o Jest.

$ npm install --save-dev jest

Instalando a biblioteca de testes React usando terminal

Execute o seguinte comando em seu terminal para instalar a React Testing Library.

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

Assim que todos os pacotes estiverem instalados, adicionaremos um script no arquivo package.json para executar os testes automaticamente sempre que for chamado.

Esta é a aparência do package.json agora.

Observe as versões dos pacotes mencionados acima, pois foram usadas quando este guia foi criado.

Depois que o Jest estiver instalado, podemos criar um arquivo de teste em nosso aplicativo React. Jest selecionará automaticamente os arquivos que terminam com .test.js ou .spec.js no diretório do projeto.

Escrevendo um caso de teste de unidade

Outra coisa importante a saber é como escrever um caso de teste unitário.

getBy...

queryBy...

findBy...

getAllBy...

queryAllBy...

findAllBy...

Fonte: Testando a documentação da biblioteca

Para resumir:

• Você deve usar getBy, findBy ou queryBy ao selecionar um único elemento DOM.
• Você deve usar getAllBy, findAllBy ou queryAllBy ao selecionar vários elementos DOM.
• Quando há mais de uma ou nenhuma correspondência, as consultas getBy e findBy retornam um Error.
• Quando não há correspondência, um valor nulo é retornado; caso contrário, se houver mais de uma correspondência, um erro é retornado por queryBy
• getBy e queryBy não funcionam bem com código assíncrono, enquanto findBy funciona.
• Se houver alguma correspondência, uma matriz de correspondências será retornada, caso contrário, um erro será fornecido pela consulta getAllBy.
• Se houver alguma correspondência, uma matriz de correspondências será retornada, caso contrário, um erro será fornecido pela consulta findAllBy.
• Se houver alguma correspondência, uma matriz de correspondências será retornada; caso contrário, uma matriz vazia será retornada pela consulta getAllBy.

Agora que você está familiarizado com os métodos de consulta, vamos começar a escrever um caso de teste de unidade para o componente React.

Vamos criar um componente primeiro. Crie um novo arquivo com o nome do componente. No nosso caso, faremos MyComponent.js em src com o seguinte:

export default function MyComponent  {
  return <div>Hello, World</div>;
}

Agora adicione o componente no arquivo App.js para que

import logo from './logo.svg';
import './App.css';
import MyComponent from './MyComponent';

function App  {
return (
  <div className="App">
    <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <p>
        React App Demo.
      </p>
      <MyComponent />
    </header>
  </div>
);
}

export default App;

Vamos criar um arquivo de teste simples para testar um componente React:

// MyComponent.test.js

import React from 'react';
import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

describe('MyComponent',   => {
  it('renders correctly',   => {
    const { getByText } = render(<MyComponent />);
    const linkElement = getByText(/Hello World/i);
    expect(linkElement).toBeInTheDocument ;
  });
});

No exemplo mostrado, importamos o recurso de renderização de @testing-library/react para uso em um ambiente de teste.

Em seguida, colocamos nosso MyComponent no escopo e aplicamos a função render a ele. Finalmente, com getByText, podemos recuperar o texto “Hello World” e verificar sua presença usando expect .

Para executar este teste, digite o seguinte comando na janela do terminal:

$ npm test

A saída deve ser a seguinte:

Se você alterar o conteúdo do div e executar o comando test. A saída no terminal será:

A função de descrição é usada para agrupar nossos testes e sua função define um teste específico. A função expect é usada para fazer afirmações sobre a saída do nosso código.

Testando adereços e estado

No React, os componentes podem ter adereços e estados. É essencial testar se esses valores estão sendo configurados e atualizados corretamente. Vamos atualizar nosso exemplo MyComponent para testar uma propriedade:

// MyComponent.test.js

import React from 'react';
import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

describe('MyComponent',   => {
  it('renders correctly',   => {
    const { getByText } = render(<MyComponent />);
    const linkElement = getByText(/Hello World/i);
    expect(linkElement).toBeInTheDocument ;
  });

  it('renders the correct name prop',   => {
    const { getByText } = render(<MyComponent name="Alice" />);
    const linkElement = getByText(/Hello Alice/i);
    expect(linkElement).toBeInTheDocument ;
  });
});

No exemplo acima, estamos testando se o componente renderiza o name prop correto. Passamos a propriedade para o componente quando o renderizamos usando o método render. Em seguida, usamos o método getByText para recuperar o texto “Hello Baires” e verificar se ele está no documento usando o método expect.

O estado de teste é semelhante ao teste de adereços. Podemos usar o método fireEvent de @testing-library/react para simular as interações do usuário com o componente:

// MyComponent.test.js

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';

describe('MyComponent',   => {
  it('renders correctly',   => {
    const { getByText } = render(<MyComponent />);
    const linkElement = getByText(/Hello World/i);
    expect(linkElement).toBeInTheDocument ;
  });

  it('renders the correct name prop',   => {
    const { getByText } = render(<MyComponent name="Alice" />);
    const linkElement = getByText(/Hello Baires/i);
    expect(linkElement).toBeInTheDocument ;
  });

  it('updates the count state on button click',   => {
    const { getByText, getByTestId } = render(<MyComponent />);
    const countElement = getByTestId('count');
    const buttonElement = getByText(/Click me/i);

    expect(countElement).toHaveTextContent('0');
    fireEvent.click(buttonElement);
    expect(countElement).toHaveTextContent('1');
  });
});

No exemplo acima, estamos testando se o estado da contagem é atualizado quando o usuário clica no botão “Clique em mim”. Usamos o método getByTestId para recuperar o elemento count e o método getByText para recuperar o elemento button.

Em seguida, usamos o método expect para verificar se o elemento count inicialmente tem o valor 0, simulamos um evento click usando o método fireEvent e verificamos se o elemento count tem o valor 1.

Por que Jest é uma ótima opção para testes de unidade no React?

Aqui está uma comparação de algumas estruturas de teste populares.

Resumindo, Jest é uma estrutura de teste altamente popular para React que fornece suporte pronto para uso para testes de snapshots, relatórios de cobertura de código e testes de DOM. Mocha e Jasmine também são estruturas de teste populares para JavaScript, mas faltam alguns dos recursos e suporte que Jest fornece para React. Todas as três estruturas possuem comunidades ativas e são adequadas para testar aplicativos React.

Vamos nos aprofundar nos recursos que tornam o Jest uma ótima escolha para testes unitários com React.

Simulação integrada

Jest facilita o isolamento e o teste de componentes, fornecendo recursos integrados de simulação. Você pode usar a função jest.mock do Jest para criar implementações simuladas de dependências das quais seus componentes dependem, tornando possível testar seus componentes sem se preocupar com o comportamento de suas dependências.

Por exemplo, digamos que você tenha um componente chamado MyComponent que depende de uma função de API externa chamada getData . Para simular esta chamada de API no Jest, você pode criar um arquivo chamado __mocks__/myApi.js com o seguinte código:

export const getData = jest.fn(  => Promise.resolve('mocked data'));

Então, no seu arquivo de teste, você pode usar jest.mock para substituir o módulo myApi real pela sua implementação simulada:

import { render, screen } from '@testing-library/react';
import { getData } from 'myApi';
import MyComponent from './MyComponent';

jest.mock('myApi');

test('renders data from API', async   => {
  getData.mockResolvedValue('mocked data');

  render(<MyComponent />);

  const data = await screen.findByText('mocked data');
  expect(data).toBeInTheDocument ;
});

Teste de instantâneo

O teste de instantâneo com Jest permite capturar a saída de um componente e compará-la com uma versão salva da mesma saída. Isso ajuda a detectar quaisquer alterações não intencionais feitas na saída do componente. Para criar um teste de instantâneo para um componente no Jest, você pode adicionar código em seu arquivo de teste que renderiza o componente usando dados dinâmicos de props e salva sua saída como um instantâneo.

Para criar um teste de instantâneo para o componente MyComponent no Jest, você pode adicionar o seguinte código ao seu arquivo de teste que irá capturar como ele é renderizado com dados dinâmicos de seu suporte chamado data.

import renderer from 'react-test-renderer';
import MyComponent from './MyComponent';

test('renders correctly',   => {
  const tree = renderer.create(<MyComponent data="test data" />).toJSON ;
  expect(tree).toMatchSnapshot ;
});

Isso criará um instantâneo da saída do componente quando ele for renderizado com a propriedade data=”test data”. Se você fizer alguma alteração na saída do componente, Jest irá notificá-lo de que o instantâneo não corresponde mais, permitindo que você investigue as alterações e decida se deseja atualizar o instantâneo ou corrigir o código.

Testes rápidos e paralelizados

O Jest foi projetado para otimizar a velocidade, permitindo que os testes sejam executados em paralelo, para que grandes projetos com numerosos testes não sofram com tempos de teste lentos e impeçam o progresso do desenvolvimento.

Usando Jest, você pode executar todos os testes do seu aplicativo React em paralelo, executando o seguinte comando em seu terminal.

npm test -- --maxWorkers=4

Isso executará seus testes com até 4 trabalhadores, permitindo que Jest execute vários testes ao mesmo tempo e acelerando o processo geral de teste.

Relatório de cobertura de código integrado

Jest oferece a capacidade de avaliar de forma rápida e fácil quanto de sua base de código é coberto por testes com seu relatório integrado de cobertura de código. Esses relatórios mostram precisamente quais partes do seu código estão sendo testadas, para que você possa ter certeza de que todas as áreas vitais foram abordadas. Ao revisar esses relatórios, você pode determinar onde testes adicionais podem ser necessários para garantir um conjunto de testes robusto e completo.

npm test -- --coverage

Isso executará seus testes e gerará um relatório de cobertura de código no diretório de cobertura. Você pode abrir o arquivo index.html em seu navegador da web para visualizar o relatório de cobertura de código.

Conclusão

O desenvolvimento orientado a testes (tdd) com Jest in React é uma ferramenta poderosa para ajudar empresas de desenvolvimento de React e desenvolvedores individuais a criar aplicativos confiáveis ​​e livres de bugs. Com sua configuração fácil, interfaces intuitivas e cobertura abrangente da biblioteca React, não é de admirar que tantos desenvolvedores estejam optando por usar Jest para seus testes unitários.

Ele não apenas fornece uma maneira eficiente de garantir que o código funcione conforme o esperado, mas também ajuda a encontrar quaisquer problemas com rapidez e precisão. A combinação de Jest e React permite que os desenvolvedores produzam aplicativos robustos que podem ser implantados com segurança em ambientes de produção. Com todos esses benefícios, não há razão para não considerar o teste de unidade com Jest in React em seu próximo projeto!

Se você gostou deste artigo sobre React, confira estes tópicos;

• Melhores práticas de reação
• Bibliotecas de componentes React UI
• Os 6 melhores IDEs e editores React
• Reagir vs Backbone JS
• Por que o React é tão popular?
• O que você precisa saber sobre reagir
• Reagir WebSockets: Tutorial

Perguntas frequentes (FAQ)

Como executo os testes de unidade no Reactjs?

Você pode escrever seus testes em um arquivo separado e executá-los usando o comando npm test, que encontrará e executará automaticamente seus testes.

Qual biblioteca é usada para testes de unidade no React?

Jest é uma biblioteca popular usada para testes unitários no React.

Por que a brincadeira é tão popular?

Jest é popular porque é fácil de configurar e usar, possui uma sintaxe simples e intuitiva e fornece uma variedade de recursos e ferramentas para testar aplicativos React.

Jest é bom para testes de unidade React?

Sim, Jest é uma boa escolha para testes unitários no React. Ele foi projetado especificamente para testar aplicativos JavaScript e fornece uma variedade de recursos e ferramentas para testar componentes React, incluindo suporte para testes de snapshots, simulação e análise de cobertura de código. Também é amplamente utilizado e bem apoiado pela comunidade React.