Configurando um Projeto React com ViteJs e React Testing Library

Se você está começando a trabalhar com front-end, já deve ter ouvido falar de React, uma das bibliotecas JavaScript mais populares para a criação de interfaces de usuário. Além disso, o ViteJs tem se destacado como uma alternativa mais rápida para a criação de projetos front-end. E não podemos esquecer da importância de testar nosso código, por isso vamos incluir o React Testing Library em nosso projeto.

Passo 1: Criando um novo projeto React com ViteJs

Para começar, abra o terminal e execute o seguinte comando:

npx create-vite my-react-app --template react

Passo 2: Instalando o React Testing Library

No terminal, dentro do diretório do seu projeto, execute o seguinte comando para instalar o React Testing Library:

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

Passo 3: Configurando o ambiente de teste

Crie um arquivo chamado setupTests.js dentro do diretório src e adicione o seguinte código:

import '@testing-library/jest-dom/extend-expect';

Passo 4: Escrevendo testes

Crie um arquivo chamado App.test.js dentro do diretório src e adicione o seguinte código para testar se o componente App é renderizado corretamente:

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

test('renders app component', () => {
  render();
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

Passo 5: Executando os testes

No terminal, execute o seguinte comando para rodar os testes:

npm test

Com esses passos, você configurou um projeto React com ViteJs e React Testing Library. Agora você está pronto para começar a desenvolver e testar sua aplicação front-end com mais agilidade e confiança!