Configurando o Jest e Testing Library no Vite
Tags: testing, jest, vite, testinglibrary
Published: 2022-08-05 22:42:00

Segue os passos necessários para a instalação e configuração para o funcionamento do [Jest](https://jestjs.io/) e [Testing Library](https://testing-library.com/) no [Vite](https://vitejs.dev/).

## Iniciando pelo Jest

Instalar o Jest
```bash
yarn add jest @types/jest -D
```

Criar o script para rodar os testes em package.json
```json
{
  "test": "jest",
}
```

Criar arquivo de teste em _"src/App.spec.jsx"_ para validarmos o funcionamento do Jest.
```js
describe('Jest', () => {
  it('testing jest', () => {
    expect(1).toBe(1);
  });
});
```
Para rodar o teste bastar acionar o script criado no package.

```bash
yarn test
```

Esse é o retorno esperado.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d1j0ldgq3oablmjevaj1.png)


> 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
```bash
yarn add @testing-library/jest-dom @testing-library/react @testing-library/user-event -D
```

Para que o Testing Library funcione é necessário instalar o babel e mais os auxiliares "_identity-obj-proxy_" e "_jest-environment-jsdom_"

```bash
yarn add @babel/core @babel/preset-env @babel/preset-react babel-jest identity-obj-proxy jest-environment-jsdom -D
```

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

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

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

E dentro da pasta "._jest_" o arquivo "_setup-tests.js_" 
```js
import '@testing-library/jest-dom';
```

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_

```js
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();
  });
});
```

Para rodar os testes
```bash
yarn test
```

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p7kc9xvk2dyhlkbihrk4.png)

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

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

E no diretório ".jest" o novo diretório "__mocks__" com o arquivo "_fileMock.js_"

```js
module.exports = 'test-file-stub';
```

Rode novamente os testes
```bash
yarn test
```

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iyiy9rod8w3geafur3he.png)

Para resolver insira em "_jest.config.js_" no objeto _moduleNameMapper{}_ a configuração abaixo:
```js
'\\.(css|less|sass|scss)$': 'identity-obj-proxy',
```

Rode novamente os testes
```bash
yarn test
```

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/na6dowv3b6mdg9tu1hgb.png)

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