@@ -37,42 +37,55 @@ runner that's ESM compatible.
3737 npm install --save-dev @vitest/ui
3838 ```
3939
40- 2 . Add a ` vitest-setup.js ` file to optionally set up automatic post-test cleanup
41- and [ ` @testing-library/jest-dom ` ] [ @testing-library/jest-dom ] expect matchers.
40+ 2 . Add a ` vitest-setup.js ` file to optionally set up
41+ [ ` @testing-library/jest-dom ` ] [ @testing-library/jest-dom ] expect matchers.
4242
43- ``` ts title="vitest-setup.js"
44- import ' @testing-library/svelte/vitest'
43+ ``` js title="vitest-setup.js"
4544 import ' @testing-library/jest-dom/vitest'
4645 ```
4746
48- 3 . Add ` vitest.config.js ` , or update your existing ` vite.config.js ` , to process
49- Svelte files, resolve browser exports during tests, use the [ jsdom] [ ] (or
50- [ happy-dom] [ ] ) environment, and run your setup file.
47+ 3 . Add ` vitest.config.js ` , or update your existing ` vite.config.js ` , with the
48+ ` svelte ` and ` svelteTesting ` Vite plugins. Set the testing environment to
49+ your DOM library of choice and optionally configure your setup file from step
50+ (2).
5151
5252 ``` js title="vitest.config.js"
5353 import {defineConfig } from ' vitest/config'
5454 import {svelte } from ' @sveltejs/vite-plugin-svelte'
55+ import {svelteTesting } from ' @testing-library/svelte/vite'
5556
56- export default defineConfig (({mode}) => ({
57- plugins: [svelte ()],
58- resolve: {
59- conditions: mode === ' test' ? [' browser' ] : [],
60- },
57+ export default defineConfig ({
58+ plugins: [svelte (), svelteTesting ()],
6159 test: {
6260 environment: ' jsdom' ,
6361 setupFiles: [' ./vitest-setup.js' ],
6462 },
65- }))
63+ })
6664 ```
6765
6866 :::note
6967
70- Prepending the ` browser ` resolve condition to Vite's default conditions may
71- cause issues if you have a complex Vite configuration or dependencies that
72- cannot be loaded into Node.js
68+ The ` svelteTesting ` plugin:
69+
70+ - Adds an automatic cleanup fixture to [ ` test.setupFiles ` ] [ test-setup-files ]
71+ - Adds ` browser ` to [ ` resolve.conditions ` ] [ resolve-conditions ]
72+
73+ If needed, you can disable either behavior. Disabling both options is
74+ equivalent to omitting the plugin.
75+
76+ ``` js
77+ svelteTesting ({
78+ // disable auto cleanup
79+ autoCleanup: false ,
80+ // disable browser resolution condition
81+ resolveBrowser: false ,
82+ })
83+ ```
7384
74- See [ testing-library/svelte-testing-library #222 ] [ ] for more information and
75- alternative configuration options to ensure Svelte's browser bundle is used.
85+ Resolving the ` browser ` condition may cause issues if you have a complex Vite
86+ configuration or dependencies that cannot be loaded into Node.js. See
87+ [ testing-library/svelte-testing-library #222 ] [ ] for more information and
88+ alternative configuration options to ensure Svelte's browser code is used.
7689 :::
7790
78914 . Add test scripts to your ` package.json ` to run the tests with Vitest
@@ -104,6 +117,9 @@ runner that's ESM compatible.
104117[ vitest dom ] : https://vitest.dev/guide/environment.html
105118[ testing-library/svelte-testing-library #222 ] :
106119 https://github.com/testing-library/svelte-testing-library/issues/222
120+ [ test-setup-files ] : https://vitest.dev/config/#setupfiles
121+ [ resolve-conditions] :
122+ https://vitejs.dev/config/shared-options.html#resolve-conditions
107123
108124## Jest
109125
0 commit comments