Crie uma Aplicação Completa com React, Vite e Testes Unitários e E2E

Introdução

O desenvolvimento de aplicações web modernas exige ferramentas que proporcionem eficiência e qualidade. O React é uma biblioteca popular para a construção de interfaces de usuário, enquanto o Vite serve como um bundler e ambiente de desenvolvimento extremamente rápido. Neste guia, mostraremos como configurar uma aplicação com essas tecnologias e adicionaremos uma camada de testes, utilizando Vitest para testes unitários e Playwright para testes end-to-end. Aprenderemos também sobre as melhores práticas para garantir a performance da aplicação.

Pré-requisitos

Antes de iniciar, é importante que você tenha:

• Conhecimento básico de JavaScript e React
• Node.js instalado em sua máquina
• Familiaridade com terminal/linha de comando
• Editor de código, como Visual Studio Code

Configurando o Ambiente

Vamos começar configurando nossa aplicação com Vite e React.

1. Criação do Projeto

   No terminal, execute o seguinte comando para criar um novo projeto usando Vite:

   npm create vite@latest my-react-app --template react

Entre no diretório do projeto:

cd my-react-app

1. Instalação das Dependências de Testes

   Instale as bibliotecas necessárias para testes unitários e end-to-end:

   npm install --save-dev vitest @testing-library/react playwright

Estrutura Básica da Aplicação

Vamos criar um componente simples para testar nossas configurações.

1. Criando um Componente: src/components/HelloWorld.jsx

import React from 'react'

const HelloWorld = ({ name }) => {
	return <h1>Hello, {name}!</h1>
}

export default HelloWorld

1. Usando o Componente: src/App.jsx

import React from 'react'
import HelloWorld from './components/HelloWorld'

const App = () => {
	return (
		<div>
			<HelloWorld name='React Developer' />
		</div>
	)
}

export default App

Implementando Testes Unitários com Vitest

Agora vamos criar um teste simples para nosso componente.

1. Criando o Teste: src/components/HelloWorld.test.jsx

import { render, screen } from '@testing-library/react'
import HelloWorld from './HelloWorld'

describe('HelloWorld Component', () => {
	test('renders correctly', () => {
		render(<HelloWorld name='React Developer' />)
		const heading = screen.getByRole('heading', { name: /hello, react developer!/i })
		expect(heading).toBeInTheDocument()
	})
})

1. Rodando os Testes:

   Para rodar os testes, execute o comando:

   npx vitest

Implementando Testes E2E com Playwright

Para adicionar testes end-to-end, vamos criar um arquivo de teste que carregará nossa aplicação no navegador.

1. Criando o Teste E2E: tests/app.spec.js

const { test, expect } = require('@playwright/test')

test('testa a página inicial', async ({ page }) => {
	await page.goto('http://localhost:3000')
	const heading = await page.locator('h1')
	await expect(heading).toHaveText('Hello, React Developer!')
})

1. Rodando os Testes E2E:

   Para rodar os testes E2E, primeiro, inicie seu servidor de desenvolvimento:

   npm run dev

Em outro terminal, rode o Playwright:

npx playwright test

Melhores Práticas para Performance

• Lazy Loading: Carregar componentes sob demanda pode melhorar o tempo de carregamento.
• Memoização: Utilize React.memo para componentes que não precisam ser renderizados novamente quando as props não mudam.
• Utilize Bundling e Minificação: Vite já trata da parte de bundling e entrega de recursos otimizados.
• Remova Código Inútil: Ferramentas como tree-shaking ajudam a eliminar código não utilizado durante o processo de build.

Dicas para Próximos Passos

• Aprofunde-se em Testes: Explore as funcionalidades do Vitest e do Playwright.
• Aprenda sobre State Management: Utilizar bibliotecas como Redux ou Zustand.
• Explore Tipos: Adicione TypeScript à sua aplicação para maior segurança de tipos.

Possíveis Erros e Soluções

1. Erro de porta ocupada: Caso a porta padrão 3000 esteja ocupada, altere a porta de execução do Vite.
2. Problemas de importação: Verifique se todos os nomes de arquivos e caminhos estão corretos, especialmente em sistemas baseados em Linux que são sensíveis a maiúsculas e minúsculas.

Links Úteis

• Documentação do Vite
• Documentação do React
• Vitest
• Playwright
• Testing Library

---

Com isso, você já está preparado para iniciar sua aventura com React, Vite, Vitest e Playwright. Boa sorte em suas construções e testes!