Configurando o Jest e Testing Library no Vite

Segue os passos necessários para a instalação and configuração para o funcionamento do Jest eTesting Library 아니 Vite .

이니시앤도 펠로 Jest

Instalar o Jest

yarn add jest @types/jest -D

Criar o script para rodar os testes em package.json

{
  "test": "jest",
}

"src/App.spec.jsx"에서 Jest의 유효성 검사 도구를 테스트하기 위한 문서를 작성하십시오.

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

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

yarn test

Esse é o retorno esperado.

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 참조 테스트 라이브러리

Instalar o grupo de bibliotecas do testing-library

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"

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, cry na raiz o arquivo "jest.config.js"

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

babel.config.js

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

파스타 ".jest"또는 "setup-tests.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:

어떤 패키지 변경도 "module"para "commonjs"유형이나 단순 제거 또는 단순히 제거할 수 없습니다.

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 라이브러리

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

파라 rodar os testes

yarn test

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



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

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

".jest"또는 "mocks"디렉토리 또는 "fileMock.js"디렉토리가 없습니다.

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

Rode novamente os 고환

yarn test

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



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

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

Rode novamente os 고환

yarn test

E는 que agora está rodando sem erros를 시각화합니다. 🚀🚀🚀



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