Skip to content

Commit a60ad6d

Browse files
authored
docs(svelte-testing-library): add Vite plugin to setup instructions (#1385)
1 parent a6bf3f5 commit a60ad6d

File tree

1 file changed

+34
-18
lines changed

1 file changed

+34
-18
lines changed

docs/svelte-testing-library/setup.mdx

+34-18
Original file line numberDiff line numberDiff line change
@@ -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

7891
4. 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

Comments
 (0)