Configuração

[Tradução Beta Não Oficial]

Esta página foi traduzida por PageTurner AI (beta). Não é oficialmente endossada pelo projeto. Encontrou um erro? Reportar problema →

Recomendamos usar o Vitest, mas você pode utilizar a biblioteca com qualquer executor de testes compatível com ESM.

Vitest

1. Adicione dependências de desenvolvimento

   • @testing-library/svelte
   • @testing-library/jest-dom (Opcional, mas altamente recomendado)
   • @sveltejs/vite-plugin-svelte
   • vitest
   • jsdom, happy-dom ou outro ambiente DOM do Vitest
   npm

   npm install --save-dev \
     @testing-library/svelte \
     @testing-library/jest-dom \
     @sveltejs/vite-plugin-svelte \
     vitest \
     jsdom

   Yarn

   yarn add --dev \
     @testing-library/svelte \
     @testing-library/jest-dom \
     @sveltejs/vite-plugin-svelte \
     vitest \
     jsdom

   Opcionalmente, instale @vitest/ui, que abre uma interface no navegador para acompanhar o progresso e interagir com seus testes.

   npm

   npm install --save-dev @vitest/ui

   Yarn

   yarn add --dev @vitest/ui

2. Crie um arquivo vitest-setup.js para configurar opcionalmente os matchers de expectativa do @testing-library/jest-dom.

   vitest-setup.js

   import '@testing-library/jest-dom/vitest'

3. Adicione vitest.config.js ou atualize seu vite.config.js existente com os plugins Vite svelte e svelteTesting. Defina o ambiente de testes para sua biblioteca DOM preferida e opcionalmente configure seu arquivo de setup do passo (2).

   vite.config.js

   import {defineConfig} from 'vitest/config'
   import {svelte} from '@sveltejs/vite-plugin-svelte'
   import {svelteTesting} from '@testing-library/svelte/vite'
   
   export default defineConfig({
     plugins: [svelte(), svelteTesting()],
     test: {
       environment: 'jsdom',
       setupFiles: ['./vitest-setup.js'],
     },
   })

   Ou, se estiver usando SvelteKit:

   vite.config.js

   import {defineConfig} from 'vitest/config'
   import {sveltekit} from '@sveltejs/kit/vite'
   import {svelteTesting} from '@testing-library/svelte/vite'
   
   export default defineConfig({
     plugins: [sveltekit(), svelteTesting()],
     test: {
       environment: 'jsdom',
       setupFiles: ['./vitest-setup.js'],
     },
   })
   nota

   O plugin svelteTesting:

   • Adiciona uma rotina de limpeza automática em test.setupFiles
   • Adiciona browser a resolve.conditions

   Se necessário, você pode desabilitar cada comportamento. Desabilitar ambas as opções equivale a omitir o plugin.

   svelteTesting({
     // disable auto cleanup
     autoCleanup: false,
     // disable browser resolution condition
     resolveBrowser: false,
   })

   Resolver a condição browser pode causar problemas em configurações complexas do Vite ou dependências que não podem ser carregadas no Node.js. Consulte testing-library/svelte-testing-library#222 para mais informações e opções alternativas de configuração para garantir o uso do código browser do Svelte.

4. Adicione scripts de teste ao seu package.json para executar os testes com Vitest

   package.json

   {
     "scripts": {
       "test": "vitest run",
       "test:ui": "vitest --ui",
       "test:watch": "vitest"
     }
   }

5. Crie seu componente e um arquivo de teste (consulte o restante da documentação para ver como) e execute o seguinte comando para rodar os testes.

   npm

   npm test

   Yarn

   yarn test

TypeScript

Inclua @testing-library/jest-dom nos types do TypeScript para que o compilador TypeScript reconheça os matchers do @testing-library/jest-dom.

tsconfig.json

{
  "compilerOptions": {
    "types": ["@testing-library/jest-dom"],
  }
}

Jest

@testing-library/svelte funciona apenas com ESM, o que significa que você deve usar o Jest no modo ESM.

1. Adicione as dependências de desenvolvimento

   • @testing-library/svelte
   • @testing-library/jest-dom (Opcional, mas altamente recomendado)
   • svelte-jester
   • jest
   • jest-environment-jsdom
   npm

   npm install --save-dev \
     @testing-library/svelte \
     @testing-library/jest-dom \
     svelte-jester \
     jest \
     jest-environment-jsdom

   Yarn

   yarn add --dev \
     @testing-library/svelte \
     @testing-library/jest-dom \
     svelte-jester \
     jest \
     jest-environment-jsdom

2. Crie um arquivo jest-setup.js para configurar os matchers do @testing-library/jest-dom, se for usá-lo.

   jest-setup.js

   import '@testing-library/jest-dom'

3. Configure o Jest para usar jsdom, transformar arquivos Svelte e utilizar seu arquivo de configuração

   jest.config.js

   export default {
     transform: {
       '^.+\\.svelte$': 'svelte-jester',
     },
     moduleFileExtensions: ['js', 'svelte'],
     extensionsToTreatAsEsm: ['.svelte'],
     testEnvironment: 'jsdom',
     setupFilesAfterEnv: ['<rootDir>/jest-setup.js'],
   }
   nota

   Se você estiver usando Svelte 5, será necessário utilizar svelte-jester@5 ou superior e fazer ajustes adicionais na configuração do Jest:

   • Atualize transform para compilar módulos .svelte.(js|ts)
   • Permita que @testing-library/svelte seja transformado, mesmo estando em node_modules

   jest.config.js

     export default {
       transform: {
   -     '^.+\\.svelte$': 'svelte-jester',
   +     '^.+\\.svelte(\\.(js|ts))?$': 'svelte-jester',
       },
   +   transformIgnorePatterns: [
   +     '/node_modules/(?!@testing-library/svelte/)',
   +   ],
       moduleFileExtensions: ['js', 'svelte'],
       extensionsToTreatAsEsm: ['.svelte'],
       testEnvironment: 'jsdom',
       setupFilesAfterEnv: ['<rootDir>/jest-setup.js'],
     }

4. Adicione os seguintes scripts ao seu package.json

   package.json

   {
     "scripts": {
       "test": "npx --node-options=\"--experimental-vm-modules\" jest src",
       "test:watch": "npx --node-options=\"--experimental-vm-modules\" jest src --watch"
     }
   }

5. Crie seu componente e arquivo de teste (consulte o restante da documentação para ver como) e execute os testes

   npm

   npm test

   Yarn

   yarn test

TypeScript e pré-processadores

Para usar TypeScript com Jest, você precisará instalar e configurar svelte-preprocess e ts-jest. Para instruções completas, consulte a documentação do svelte-jester.

Se você quiser incluir outros pré-processadores Svelte, consulte a documentação do svelte-jester.