DEV Community

Anderson Nascimento
Anderson Nascimento

Posted on

Configurando o Jest e Testing Library no Vite

#testing #jest #vite #testinglibrary

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

Top comments (4)

Collapse
 
wellingtonostemberg profile image
Wellington Luiz Benedito Ostemberg • • Edited

Olá amigo, ótimo tutorial.
Peguei 2 pequenos erros, peço que verifique, tive que alterar aqui:
1º - babel.config.js está como js mas o conteúdo como json, tive quel alterar para babel.config.json ai funcionou
2º - '\.(gif|ttf|eot|svg|png)$': '/.jest/ __ mocks __ /fileMock.js' esta importação procura a pasta "__ mocks __" porém você pede que crie a pasta "mocks" no mais, funcionou perfeitamente

Collapse
 
vagnerolliver2 profile image
Vagner Silveira de Oliveira •

Olá,

qual é o problema que as configurações do babel resolve?


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

Collapse
 
devlucascs profile image
Lucas Santos 🍷 •

Altera para de babel.config.js para babel.config.json

Collapse
 
jessicacastro profile image
Jessica Castro •

Bom tutorial, mas acho que podia ter mais o porque das coisas. Tipo, o que o babel tá resolvendo, por que?

Read next

mayashavin profile image

Effective Visual Regression Testing for Developers: Vitest vs Playwright

Maya Shavin 🌷☕️🏡 -

testifytech profile image

Differences Between Bug Severity and Priority in Testing [with Examples]

Steve Wortham -

apilover profile image

Dynamic Values: Transforming API Testing for Real-World Scenarios

Wanda -

testifytech profile image

How To Inspect Element on iPhone [4 Quick Methods]

Steve Wortham -