Saltar al contenido principal

Configuración

[Traducción Beta No Oficial]

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Recomendamos usar Vitest, pero puedes utilizar la biblioteca con cualquier ejecutor de pruebas compatible con ESM.

Vitest​

  1. Agregar dependencias de desarrollo

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

    Opcionalmente instala @vitest/ui, que abre una interfaz en el navegador para monitorear el progreso e interactuar con tus pruebas.

    npm install --save-dev @vitest/ui

  2. Agrega un archivo vitest-setup.js para configurar opcionalmente los matchers de expectativa de @testing-library/jest-dom.

    vitest-setup.js
    import '@testing-library/jest-dom/vitest'

  3. Agrega vitest.config.js o actualiza tu vite.config.js existente con los plugins de Vite svelte y svelteTesting. Configura el entorno de pruebas con tu biblioteca DOM preferida y opcionalmente configura tu archivo de setup del paso (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'],
      },
    })

    O, si usas 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

    El plugin svelteTesting:

    Si es necesario, puedes desactivar cada comportamiento. Deshabilitar ambas opciones equivale a omitir el plugin.

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

    Resolver la condición browser puede causar problemas con configuraciones complejas de Vite o dependencias que no pueden cargarse en Node.js. Consulta testing-library/svelte-testing-library#222 para más información y opciones alternativas que aseguren el uso del código browser de Svelte.

  4. Agrega scripts de prueba a tu package.json para ejecutar tests con Vitest

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

  5. Crea tu componente y un archivo de prueba (revisa el resto de la documentación para ver cómo) y ejecuta este comando para correr las pruebas.

    npm test

TypeScript​

Incluye @testing-library/jest-dom en los types de TypeScript para que el compilador reconozca los matchers de @testing-library/jest-dom.

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

Jest​

@testing-library/svelte solo funciona con ESM, lo que significa que debes usar Jest en modo ESM.

  1. Agrega dependencias de desarrollo

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

  2. Crea un archivo jest-setup.js para configurar @testing-library/jest-dom, si lo usas.

    jest-setup.js
    import '@testing-library/jest-dom'

  3. Configura Jest para usar jsdom, transformar archivos Svelte y utilizar tu archivo de configuración

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

    Si usas Svelte 5, debes usar svelte-jester@5 o superior, y necesitarás realizar cambios adicionales en tu configuración de Jest:

    • Actualiza transform para compilar módulos .svelte.(js|ts)
    • Permite que @testing-library/svelte se transforme, aunque esté en 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. Agrega lo siguiente a tu 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. Crea tu componente + archivo de prueba (revisa el resto de la documentación para ver cómo) y ejecútalo

    npm test

TypeScript y preprocesadores​

Para usar TypeScript con Jest, necesitarás instalar y configurar svelte-preprocess y ts-jest. Para instrucciones completas, consulta la documentación de svelte-jester.

Si deseas incluir otros preprocesadores de Svelte, revisa la documentación de svelte-jester.