@@ -37,42 +37,55 @@ runner that's ESM compatible.
37
37
npm install --save-dev @vitest/ui
38
38
```
39
39
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.
42
42
43
- ``` ts title="vitest-setup.js"
44
- import ' @testing-library/svelte/vitest'
43
+ ``` js title="vitest-setup.js"
45
44
import ' @testing-library/jest-dom/vitest'
46
45
```
47
46
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).
51
51
52
52
``` js title="vitest.config.js"
53
53
import {defineConfig } from ' vitest/config'
54
54
import {svelte } from ' @sveltejs/vite-plugin-svelte'
55
+ import {svelteTesting } from ' @testing-library/svelte/vite'
55
56
56
- export default defineConfig (({mode}) => ({
57
- plugins: [svelte ()],
58
- resolve: {
59
- conditions: mode === ' test' ? [' browser' ] : [],
60
- },
57
+ export default defineConfig ({
58
+ plugins: [svelte (), svelteTesting ()],
61
59
test: {
62
60
environment: ' jsdom' ,
63
61
setupFiles: [' ./vitest-setup.js' ],
64
62
},
65
- }))
63
+ })
66
64
```
67
65
68
66
:::note
69
67
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
+ ```
73
84
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.
76
89
:::
77
90
78
91
4 . Add test scripts to your ` package.json ` to run the tests with Vitest
@@ -104,6 +117,9 @@ runner that's ESM compatible.
104
117
[ vitest dom ] : https://vitest.dev/guide/environment.html
105
118
[ testing-library/svelte-testing-library #222 ] :
106
119
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
107
123
108
124
## Jest
109
125
0 commit comments