Skip to content

Instantly share code, notes, and snippets.

@thiagobraddock
Last active May 2, 2024 19:51
Show Gist options
  • Save thiagobraddock/030d548c09869ef5087b7dcc28538f50 to your computer and use it in GitHub Desktop.
Save thiagobraddock/030d548c09869ef5087b7dcc28538f50 to your computer and use it in GitHub Desktop.
setup vitest + testing library
  1. Instalação:
npm i vitest -D
npm i jsdom -D
npm i @testing-library/react @testing-library/jest-dom @testing-library/user-event -D
npm i @types/jest -D
  1. Acrescentar os scripts teste e coverage ao package.json:
"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
  + "test": "vitest",
  + "coverage": "vitest run --coverage",
  },
  1. Acrescentar config ao vite.config (abaixo).

  2. Criar o setupTests.js na raiz do projeto (abaixo).

  3. Criar o arquivo de teste e executa-lo com o comando npm run test

  4. Ao executar o comando npm run coverage pela primeira vez, será perguntado se deseja instalar o pacote '@vitest/coverage-c8', aperte Y para confirmar.

import { render, screen } from '@testing-library/react';
import App from './App';
describe('App', () => {
it('renders headline', () => {
render(<App title="React" />);
// check if App components renders text learn
const texto = screen.getByText(/learn/i);
expect(texto).not.toBeVisible();
});
});
import '@testing-library/jest-dom';
/// <reference types="vitest" />
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
test: {
globals: true,
environment: 'jsdom',
setupFiles: './setupTests.js',
css: true,
reporters: ['verbose'],
coverage: {
reporter: ['text', 'json', 'html'],
include: ['src/**/*'],
exclude: [],
}
},
})
// confirmar se o arquivo vite.d.ts tem as seguintes importações de tipos
/// <reference types="vite/client" />
/// <reference types="@testing-library/jest-dom" />
@sunderhus
Copy link

ty, I was missing the /// in the vite-env.d.ts

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment