Aller au contenu principal

Configuration

[Traduction Bêta Non Officielle]

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Nous recommandons d'utiliser Vitest, mais vous pouvez utiliser cette bibliothèque avec n'importe quel runner de tests compatible ESM.

Vitest​

  1. Ajoutez les dépendances de développement

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

    Vous pouvez optionnellement installer @vitest/ui, qui ouvre une interface dans un navigateur pour suivre l'exécution et interagir avec vos tests.

    npm install --save-dev @vitest/ui

  2. Créez un fichier vitest-setup.js pour configurer les matchers @testing-library/jest-dom si besoin.

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

  3. Ajoutez vitest.config.js, ou modifiez votre vite.config.js existant avec les plugins Vite svelte et svelteTesting. Configurez l'environnement de test avec votre bibliothèque DOM et ajoutez éventuellement le fichier de setup de l'étape (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, si vous utilisez 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'],
      },
    })
    note

    Le plugin svelteTesting :

    Si nécessaire, vous pouvez désactiver ces comportements. Désactiver les deux revient à omettre le plugin.

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

    La résolution de la condition browser peut causer des problèmes avec des configurations Vite complexes ou des dépendances incompatibles avec Node.js. Voir testing-library/svelte-testing-library#222 pour plus d'informations et des alternatives de configuration.

  4. Ajoutez des scripts de test dans votre package.json pour exécuter les tests avec Vitest

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

  5. Créez votre composant et un fichier de test (consultez le reste de la documentation) puis exécutez la commande suivante :

    npm test

TypeScript​

Ajoutez @testing-library/jest-dom aux types TypeScript pour que le compilateur TypeScript reconnaisse les matchers de @testing-library/jest-dom.

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

Jest​

@testing-library/svelte est uniquement ESM, ce qui nécessite d'utiliser Jest en mode ESM.

  1. Ajoutez les dépendances de développement

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

  2. Créez un fichier jest-setup.js pour configurer @testing-library/jest-dom si utilisé.

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

  3. Configurez Jest pour utiliser jsdom, transformer les fichiers Svelte et utiliser votre fichier de setup

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

    Si vous utilisez Svelte 5, vous devez utiliser svelte-jester@5 ou une version ultérieure, et vous devrez apporter des modifications supplémentaires à votre configuration Jest.

    • Mettez à jour transform pour compiler les modules .svelte.(js|ts)
    • Autorisez la transformation de @testing-library/svelte, même s'il se trouve dans 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. Ajoutez ce qui suit à votre fichier 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. Créez votre composant et un fichier de test (consultez le reste de la documentation pour voir comment faire) et exécutez les tests

    npm test

TypeScript et préprocesseurs​

Pour utiliser TypeScript avec Jest, vous devrez installer et configurer svelte-preprocess et ts-jest. Pour des instructions complètes, consultez la documentation de svelte-jester.

Si vous souhaitez inclure d'autres préprocesseurs Svelte, consultez la documentation de svelte-jester.