Skip to content

Latest commit

 

History

History
93 lines (65 loc) · 2.82 KB

checklist_testes.md

File metadata and controls

93 lines (65 loc) · 2.82 KB

📝 Configurando RTL com o Vitest

  • Passo 1 - Instale as bibliotecas necessárias;

    npm i -D vitest jsdom @testing-library/jest-dom @testing-library/react @testing-library/user-event @types/jest
  • Passo 2 - Na raiz do projeto, crie um arquivo chamado setupTests.ts e adicione o seguinte.

    // ./setupTests.ts
    import '@testing-library/jest-dom';
  • Passo 3 - Altere também o arquivo src/vite-env.d.ts, adicionando a importação dos tipos:

    //src/vite-env.d.ts
    
    /// <reference types="vite/client" />
    /// <reference types="@testing-library/jest-dom" />
  • Passo 4 - No arquivo vite.config.ts, adicione uma nova chave ao objeto que está sendo exportado:

    import { defineConfig } from 'vite'
    import react from '@vitejs/plugin-react-swc'
    
    export default defineConfig({
      plugins: [react()],
      test: {
        globals: true,
        environment: 'jsdom',
        setupFiles: './setupTests.ts',
        css: true,
        reporters: ['verbose'],
        coverage: {
          provider: 'v8',
          reporter: ['text', 'json', 'html', 'lcov'],
          reportsDirectory: './coverage'
        }
      },
    })
  • Passo 5 - No arquivo package.json, adicione o script de teste e de coverage:

    // package.json
    
    //...
    
    "scripts": {
    //   "dev": "vite --open",
    //   "build": "vite build",
    //   "preview": "vite preview",
    "test": "vitest",
    "coverage:html": "vitest run --coverage --reporter=html"
    },
    
    // ...

Da primeira vez que você executar o comando npm run coverage, será perguntado se deseja instalar o pacote '@vitest/coverage-v8'. Aperte Y para confirmar.

Excelente! Sua aplicação agora está configurada para usar o RTL com Vitest! Para assegurar que tudo funciona conforme o esperado, verifique se o componente App renderiza corretamente o texto “Vite + React”, que é exibido por padrão ao criar uma aplicação React com Vite.

  • Passo 6 - Crie um arquivo /src/App.test.tsx e adicione o código:

    // src/App.test.tsx
    
    import { render, screen } from '@testing-library/react';
    
    import App from './App';
    
    it('should show "Vite + React" text', () => {
    render(<App />);
    expect(screen.getByText(/vite \+ react/i)).toBeInTheDocument();
    })
    
    // ...

💡 Ferramentas

  • Todos os seletores queries estão disponíveis nessa lista da react-testing-library.

  • Aqui está a lista completa das funções de asserção disponíveis no @testing-library/jest-dom, com uma breve descrição de cada uma delas. Essas funções são extensões úteis ao expect para realizar asserções em testes de DOM.