👩‍🔬 React TDD

Projeto com foco em desenvolver o frontend orientado à testes, utilizando o React Testing Library e o Jest 🃏

🛠️ Pré-requisitos

• Git para baixar o projeto
• Node.js para executar o código localmente

📥 Instalação

1. Clone o repositório:

git clone git@github.com:<username>/react-tdd.git

2. Navegue até a pasta do repositório:

cd react-tdd

3. Instale as dependências:

npm i

4. Rodando a aplicação:

npm run test # para rodar todos os testes da aplicação
npm run dev # para rodar a aplicação

📦 Dependências

• ts-node: pacote necessário para executar código TypeScript no Node.js;

• ts-jest: um transformer do Jest para conseguirmos testar aplicações escritas em TypeScript;

• jest e @types/jest: framework utilizado para realizar testes unitários e o pacote necessário para utilização do jest com typescript, respectivamente;

• jsdom e jest-environment-jsdom: de acordo com a documentação do jsdom, ele é uma implementação em JavaScript puro de muitos padrões da web, como os padrões WHATWG DOM e HTML, para uso com Node.js. Em geral, o objetivo do projeto é emular o suficiente de um subconjunto de um navegador da Web para ser útil para testar e extrair aplicativos da Web do mundo real.

  Logo, o jest-environment-jsdom serve para habilitarmos esse ambiente para desenvolver os testes com o Jest;

Conjunto de ferramentas voltadas para testar os componentes React:

• @testing-library/react: fornece funções utilitárias leves em cima do react-dom e react-dom/test-utils, de uma forma que incentiva melhores práticas de teste;

• @testing-library/jest-dom: oferece jest matchers customizados estendendo o jest para testar o estado da DOM, tornando os testes mais declarativos e fáceis de ler e manter;

  Os matchers em Jest são métodos como .toBe(), .toBeTruthy(), entre outros. Mas quando instalamos esse pacote, temos acesso à matchers relacionados à DOM, como .toBeInTheDocument(), .toBeDisable(), entre outros. Por isso se tornam fáceis de ler.

• @testing-library/user-event: busca simular os eventos reais que aconteceriam no navegador enquanto o usuário interage com ele. Por exemplo, userEvent.click(checkbox) alteraria o estado do checkbox;

• identity-obj-proxy: útil para testar importações triviais de webpack. Por exemplo, você pode dizer ao Jest para simular este objeto como módulos CSS importados, então todas as pesquisas de className no objeto de estilos importado serão retornadas como estão.

  Resumindo, serve para, quando importarmos arquivos como imagens ou estilos em nosso código, não dê problema nos testes. E isso é feito através de mocks, ou seja, uma simulação desses arquivos.

🔗 Referências

Ideia do projeto: [Alura] React: testando os seus componentes

Para fazer o setup:

➜ [Medium] React Hero: TypeScript + Jest + React Testing Library setup

➜ [Youtube] Configurando Jest + React Testing Library no Vite #Dia23

Para mockar alguns hooks: [Medium] Mocking hooks for testing with jest and react-testing-library

---

Feito com ❤️ por Ana Beatriz Nunes