Logo

dev-resources.site

for different kinds of informations.

Configurando o Jest e Testing Library no Vite

Published at
8/5/2022
Categories
testing
jest
vite
testinglibrary
Author
theandersonn
Categories
4 categories in total
testing
open
jest
open
vite
open
testinglibrary
open
Author
12 person written this
theandersonn
open
Configurando o Jest e Testing Library no Vite

Segue os passos necessários para a instalação e configuração para o funcionamento do Jest e Testing Library no Vite.

Iniciando pelo Jest

Instalar o Jest

yarn add jest @types/jest -D
Enter fullscreen mode Exit fullscreen mode

Criar o script para rodar os testes em package.json

{
  "test": "jest",
}
Enter fullscreen mode Exit fullscreen mode

Criar arquivo de teste em "src/App.spec.jsx" para validarmos o funcionamento do Jest.

describe('Jest', () => {
  it('testing jest', () => {
    expect(1).toBe(1);
  });
});
Enter fullscreen mode Exit fullscreen mode

Para rodar o teste bastar acionar o script criado no package.

yarn test
Enter fullscreen mode Exit fullscreen mode

Esse é o retorno esperado.

Image description

A parte do Jest já está funcional. No caso do Testing Library por ele contar com captura e renderização dos elementos do DOM, tem alguns detalhes a mais.

Passos referentes ao Testing Library

Instalar o grupo de bibliotecas do testing-library

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

Para que o Testing Library funcione é necessário instalar o babel e mais os auxiliares "identity-obj-proxy" e "jest-environment-jsdom"

yarn add @babel/core @babel/preset-env @babel/preset-react babel-jest identity-obj-proxy jest-environment-jsdom -D
Enter fullscreen mode Exit fullscreen mode

Essas bibliotecas precisam de arquivos com configurações, crie na raiz o arquivo "jest.config.js"

module.exports = {
  testEnvironment: 'jest-environment-jsdom',
  setupFilesAfterEnv: ['<rootDir>/.jest/setup-tests.js'],
}
Enter fullscreen mode Exit fullscreen mode

babel.config.js

{
  "presets": [
    ["@babel/preset-env", { "targets": { "esmodules": true } }],
    ["@babel/preset-react", { "runtime": "automatic" }]
  ]
}
Enter fullscreen mode Exit fullscreen mode

E dentro da pasta ".jest" o arquivo "setup-tests.js"

import '@testing-library/jest-dom';
Enter fullscreen mode Exit fullscreen mode

Até este ponto o setup de testes já está pronto para funcionar, a não ser por 2 detalhes:

  1. No package altere o type de "module" para "commonjs" ou simplesmente remova essa linha.

Antes de citar o segundo ajuste, vamos rodar os testes para visualizar no terminal o erro.
Em "src/App.spec.jsx" atualize o arquivo inserindo um novo teste utilizando recursos do testing library

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

describe('<App />', () => {
  it('should display elements', () => {
    render(<App />);
    expect(screen.getByRole('heading', { name: /vite \+ react/i })).toBeInTheDocument();
  });
});
Enter fullscreen mode Exit fullscreen mode

Para rodar os testes

yarn test
Enter fullscreen mode Exit fullscreen mode

Será exibido um erro similar ao abaixo, ele está descrevendo problemas na renderização de svg no ambiente de testes.

Image description

Para resolver insira uma nova configuração no objeto do arquivo "jest.config.js"

  moduleNameMapper: {
    '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/.jest/__mocks__/fileMock.js',
  },
Enter fullscreen mode Exit fullscreen mode

E no diretório ".jest" o novo diretório "mocks" com o arquivo "fileMock.js"

module.exports = 'test-file-stub';
Enter fullscreen mode Exit fullscreen mode

Rode novamente os testes

yarn test
Enter fullscreen mode Exit fullscreen mode

Note que o problema do svg foi resolvido, no entanto aparece um novo referente a css, como exibido abaixo:

Image description

Para resolver insira em "jest.config.js" no objeto moduleNameMapper{} a configuração abaixo:

'\\.(css|less|sass|scss)$': 'identity-obj-proxy',
Enter fullscreen mode Exit fullscreen mode

Rode novamente os testes

yarn test
Enter fullscreen mode Exit fullscreen mode

E visualize que agora está rodando sem erros. 🚀🚀🚀

Image description

Para visualizar os arquivos, configurações e versões das libs acesse:
https://github.com/theandersonn/vite-configs/tree/master/jest-testing-library

Featured ones: