Como usar Jest e React Testing Library no Next.Js

Jest e React Testing Library são ferramentas essenciais para testar aplicações React. Jest, um framework de teste JavaScript, destaca-se pela configuração fácil e suporte abrangente a testes. Já o React Testing Library concentra-se na interação do usuário, promovendo testes mais robustos ao simular comportamentos do usuário nos componentes. Siga o passo a passo abaixo para usar essas duas ferramentas no Next.Js (v13+).

1 - Instalando o Jest e Testing Library

npm i -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event @types/jest

2 - Configure os scripts no package.json para rodar os testes

"test": "jest",
"test:watch": "jest --watchAll"

• O “jest —watchAll” vai ficar vigiando alterações e rodar novamente automaticamente

3 - Crie um arquivo de configuração jest.config.mjs na raiz com o seguinte código

import nextJest from 'next/jest.js'
 
const createJestConfig = nextJest({
  dir: './',
})
 
const config = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
 
  testEnvironment: 'jest-environment-jsdom',
}
 
export default createJestConfig(config)

4 - Agora precisamos criar o arquivo jest.setup.js

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

5 - Instale os plugins

npm i -D eslint-plugin-jest-dom eslint-plugin-testing-library

6 - Depois adicione no seu .eslint.json

"plugins": ["testing-library/react", "jest-dom/recommended"]

Agora você já deve ser capaz de testar seus componentes. Caso tenha alguma dúvida siga a documentação oficial. Esse vídeo (minuto 14:40 em diante) também pode ajudar.