Configurando o Jest/Enzyme no Next.JS

Fazer testes é uma etapa importante no desenvolvimento de qualquer software, seja ele front-end ou back-end. Através dele, é possível se obter métricas para assegurar a qualidade do que foi desenvolvido, além de, claro, ter certeza de que tudo está funcionando como deveria.

A maioria dos frameworks hoje felizmente já vem com algum setup de testes já prontas para serem utilizados, bastando apenas escrever os testes em si. Bem, quase todos. No caso do Next.JS não é bem assim.

O Next.JS não vem com um setup de testes pré-instalados, deixando para o desenvolvedor quebrar a cabeça com essa tarefa. E não basta apenas instalar o Jest e o Enzyme e sair escrevendo testes como um louco. Nesse artigo, vou escrever um tutorial básico de como configurar e fazer funcionar essas duas ferramentas sem dor de cabeça.

Começando pelo projeto, criei um app Next usando o comando

npx create-next-app tests-with-next-js

Uma vez dentro da pasta e com o projeto aberto no VS Code, instalei todo o arsenal de dependências necessárias para fazer o Jest e o Enzyme funcionarem corretamente.

yarn add @babel/core babel-jest enzyme enzyme-adapter-react-16 jest -D

ou

npm i -D @babel/core babel-jest enzyme enzyme-adapter-react-16 jest

Com as dependências instaladas, é hora de começar a configuração. Será necessário criar três arquivos: .babelrc, jest.config.js e jest.setup.js

No arquivo .babelrc, vamos dizer ao babel quais presets e plugins serão utilizados para que o Next entenda o Jest.

{
    "presets": ["next/babel"],
    "plugins": []
}

Em jest.config.js vamos indicar qual arquivo de configuração o Jest deverá usar e quais deverão ser ignorados.

module.exports = {
    setupFiles: ['<rootDir>/jest.setup.js'],
    testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/']
}

No exemplo, foi definido que o arquivo que irá iniciar o Enzyme será o jest.setup.js e que todos os arquivos dentro das pastas .next e node_modules serão ignorados.

Por fim, no arquivo jest.setup.js será iniciado o método configure do Enzyme, além de também ser chamado o Adapter do enzyme-adapter-react-16.

import Adapter from 'enzyme-adapter-react-16';
import { configure } from 'enzyme';

configure({ adapter: new Adapter() });

E é isso! O setup inicial do Jest para o Next.JS está feito. Caso você queira pode configurar um atalho para execução dos testes no package.json adicionando as chamadas para os testes dentro de scripts

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage"
  },

Acima eu defini que, além de test, também as chamadas com as flags watch e coverage, para que o teste rode em tempo real escutando cada vez que o arquivo é salvado (watch) e que gere um relatório de cobertura de testes do código (coverage). Caso queira, também pode fazer uma combinação dessas flags.

Agora é hora de escrever os testes em si. Para começo, vou fazer um componente simples e um teste simples, apenas para demonstração.

Como a pasta pages já vem com um arquivo index.js por padrão, aproveitei seu código e escrevi um teste simples que checa se a tag h1 contém o texto "Welcome to Next.js!". Para isso, criei uma pasta chamada tests e, dentro dela, criei um arquivo index.test.js.

import React from 'react';
import { mount } from 'enzyme';
import Home from '../pages/index';
describe('Fazendo testes no Next.JS com Enzyme', () => {
    it('Deve conter o texto "Welcome to Next.js!" dentro de um H1 no componente Index', () => {
        const wrap = mount(<Home />);
        expect(wrap.find('h1').text()).toEqual('Welcome to Next.js!');
    });
});

Agora é só rodar o teste e... YAY! Está funcionando!

Vale citar que o teste feito foi bastante simples já que o intuito aqui é focado na configuração do Jest e Enzyme no Next.JS, no qual tive uma certa dificuldade de fazer da primeira vez e gastei um tempinho na busca de uma solução. O material de referência que usei foi esse artigo do Will Ward. Você também pode checar o código desse artigo no meu Github

Esse é o meu primeiro artigo e o escrevi com intuito de, além de servir como um auto-tutorial e material de estudos, servir de ajuda para quem eventualmente precisar.