From 1ce012cb45314d59a6623bdd600f14231e0529b7 Mon Sep 17 00:00:00 2001 From: John Yeates Date: Wed, 8 Mar 2023 09:38:47 +0000 Subject: [PATCH 1/2] Update Vitest instructions for jest-dom Add instructions on how to configure Vitest to import @testing-library/jest-dom automatically, to match the Vite instructions at 6.2. --- docs/svelte-testing-library/setup.mdx | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/docs/svelte-testing-library/setup.mdx b/docs/svelte-testing-library/setup.mdx index c16e15a60..02bf79628 100644 --- a/docs/svelte-testing-library/setup.mdx +++ b/docs/svelte-testing-library/setup.mdx @@ -66,6 +66,26 @@ with any testing framework and runner you're comfortable with. ```js import '@testing-library/jest-dom'; ``` + + To have Vitest import this automatically in _every_ test file, add the import statement to a new file, then add the file to the `setupFiles` array in the `vitest.config.ts` (in this case, the file is `vitest.include.jsdom.ts` in the project root) + + ```js + import { defineConfig } from 'vitest/config'; + import { svelte } from '@sveltejs/vite-plugin-svelte'; + + export default defineConfig({ + plugins: [svelte({ hot: !process.env.VITEST })], + test: { + include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], + globals: true, + environment: 'jsdom', + setupFiles: [ + './vitest.include.jsdom.ts' + ] + } + }); + + ``` 6. Create your component and a test file (checkout the rest of the docs to see how) and run the following command to run the tests. From 0c7931c10362e7b238b7e27ef3782200994e521d Mon Sep 17 00:00:00 2001 From: John Yeates Date: Thu, 9 Mar 2023 13:22:53 +0000 Subject: [PATCH 2/2] docs: Move Vitest auto-import to its own section --- docs/svelte-testing-library/setup.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/svelte-testing-library/setup.mdx b/docs/svelte-testing-library/setup.mdx index 02bf79628..fbd01eed6 100644 --- a/docs/svelte-testing-library/setup.mdx +++ b/docs/svelte-testing-library/setup.mdx @@ -67,7 +67,9 @@ with any testing framework and runner you're comfortable with. import '@testing-library/jest-dom'; ``` - To have Vitest import this automatically in _every_ test file, add the import statement to a new file, then add the file to the `setupFiles` array in the `vitest.config.ts` (in this case, the file is `vitest.include.jsdom.ts` in the project root) + 5.3 Set up automatic imports (optional) + + To import this automatically in _every_ test file, create a new file containing the import statement from the previous step, then add the file to the `setupFiles` array in the `vitest.config.ts` (in this case, the file is `vitest.include.jsdom.ts` in the project root) ```js import { defineConfig } from 'vitest/config';