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 →

Ce module est distribué via npm qui est fourni avec node et doit être installé en tant que devDependencies dans votre projet :

npm

npm install --save-dev @noma.to/qwik-testing-library @testing-library/dom

Yarn

yarn add --dev @noma.to/qwik-testing-library @testing-library/dom

Cette bibliothèque prend en charge qwik à partir de la version 1.7.2 et @testing-library/dom à partir de la version 10.1.0.

Vous pourriez également installer @testing-library/jest-dom et @testing-library/user-event pour bénéficier des matchers personnalisés Jest et de la bibliothèque d'événements utilisateur afin de tester les interactions avec le DOM.

npm

npm install --save-dev @testing-library/jest-dom @testing-library/user-event

Yarn

yarn add --dev @testing-library/jest-dom @testing-library/user-event

Enfin, nous avons besoin d'un environnement DOM pour exécuter les tests. Cette bibliothèque est testée avec jsdom et happy-dom :

npm

npm install --save-dev jsdom

Yarn

yarn add --dev jsdom

ou

npm

npm install --save-dev happy-dom

Yarn

yarn add --dev happy-dom

Configuration de Vitest

Nous recommandons d'utiliser @noma.to/qwik-testing-library avec Vitest comme exécuteur de tests.

Si vous ne l'avez pas déjà fait, ajoutez vitest à votre projet avec l'interface en ligne de commande de Qwik :

npm

npm run qwik add vitest

Yarn

yarn run qwik add vitest

Ensuite, nous devons configurer Vitest pour qu'il puisse exécuter vos tests. Pour cela, créez un fichier vitest.config.ts séparé afin de ne pas modifier le vite.config.ts de votre projet :

vitest.config.ts

import {defineConfig, mergeConfig} from 'vitest/config'
import viteConfig from './vite.config'

export default defineConfig(configEnv =>
  mergeConfig(
    viteConfig(configEnv),
    defineConfig({
      // qwik-testing-library needs to consider your project as a Qwik lib
      // if it's already a Qwik lib, you can remove this section
      build: {
        target: 'es2020',
        lib: {
          entry: './src/index.ts',
          formats: ['es', 'cjs'],
          fileName: (format, entryName) =>
            `${entryName}.qwik.${format === 'es' ? 'mjs' : 'cjs'}`,
        },
      },
      // configure your test environment
      test: {
        environment: 'jsdom', // or 'happy-dom'
        setupFiles: ['./vitest.setup.ts'],
        globals: true,
      },
    }),
  ),
)

Pour l'instant, qwik-testing-library doit considérer votre projet comme une bibliothèque. D'où la section build.lib dans la configuration ci-dessus.

Comme la compilation tentera d'utiliser ./src/index.ts comme point d'entrée, nous devons le créer :

src/index.ts

/**
 * DO NOT DELETE THIS FILE
 *
 * This entrypoint is needed by @noma.to/qwik-testing-library to run your tests
 */

Créez ensuite le fichier vitest.setup.ts :

vitest.setup.ts

// Configure DOM matchers to work in Vitest
import '@testing-library/jest-dom/vitest'

// This has to run before qdev.ts loads. `beforeAll` is too late
globalThis.qTest = false // Forces Qwik to run as if it was in a Browser
globalThis.qRuntimeQrl = true
globalThis.qDev = true
globalThis.qInspector = false

Cette configuration garantit que Qwik est correctement initialisé. Elle charge également @testing-library/jest-dom/vitest dans votre exécuteur de tests pour utiliser des matchers comme expect(...).toBeInTheDocument().

Par défaut, Qwik Testing Library nettoie automatiquement tout après chaque test. Vous pouvez désactiver ce comportement en définissant la variable d'environnement QTL_SKIP_AUTO_CLEANUP à true. Dans vos tests, vous pourrez alors appeler manuellement la fonction cleanup si nécessaire. Par exemple :

import {cleanup} from '@noma.to/qwik-testing-library'
import {afterEach} from 'vitest'

afterEach(cleanup)

Maintenant, modifiez votre tsconfig.json pour déclarer les types globaux suivants :

tsconfig.json

{
  "compilerOptions": {
    "types": [
+     "vitest/globals",
+     "@testing-library/jest-dom/vitest"
    ]
  },
  "include": ["src"]
}

Enfin, vous pouvez ajouter 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"
  }
}