Como configurar teste unitário no Next.js14 com Jest.

devteles

Rafael Teles Vital

Posted on February 8, 2024

Como configurar teste unitário no Next.js14 com Jest.

Olá pessoal!

Testes unitários são uma prática essencial no desenvolvimento de software, visando garantir que partes específicas do código (unidades) funcionem conforme o esperado. Jest é uma ferramenta popular para realizar testes em JavaScript e TypeScript, e neste contexto, ele é frequentemente utilizado com aplicações construídas em React, Node.js e outros frameworks.

Instalando as dependências:

Para configurar o Jest vamos instalar pacotes jest, @testing-library/react e @testing-library/jest-dom:

yarn add -D jest @testing-library/react @testing-library/jest-dom
Enter fullscreen mode Exit fullscreen mode

Configurando o teste no projeto

É necessário criar um arquivo de configuração para que o Jest entenda como realizar os testes.

Crie um arquivo jest.config.js na raiz do seu projeto:

const nextJest = require('next/jest')

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
})

// Add any custom config to be passed to Jest
const customJestConfig = {
  // Add more setup options before each test is run
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jest-environment-jsdom',
}

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig)
Enter fullscreen mode Exit fullscreen mode

Agora, basta adicionar um script para executar os testes no package.json:

{
"scripts": {
"test": "jest --watch"
},
}

Pronto agora podemos criar nosso primeiro teste.

dentro do seu projeto criar um arquivo, por exemplo "exemplo.test.tsx" ou "exemplo.test.jsx"

it('Somando números', () => {
    expect(1 + 1).toBe(2)
  })
Enter fullscreen mode Exit fullscreen mode

Image description

💖 💪 🙅 🚩
devteles
Rafael Teles Vital

Posted on February 8, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

What was your win this week?
weeklyretro What was your win this week?

November 29, 2024

Where GitOps Meets ClickOps
devops Where GitOps Meets ClickOps

November 29, 2024

How to Use KitOps with MLflow
beginners How to Use KitOps with MLflow

November 29, 2024

Modern C++ for LeetCode 🧑‍💻🚀
leetcode Modern C++ for LeetCode 🧑‍💻🚀

November 29, 2024