Skip to content

Commit ef39495

Browse files
authored
update Svelte Setup to reflect current preferred testing framework (#1123)
1 parent 155511a commit ef39495

File tree

2 files changed

+76
-70
lines changed

2 files changed

+76
-70
lines changed

docs/svelte-testing-library/intro.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,4 +41,4 @@ Introduction][dom-solution-explainer] for a more in-depth explanation.
4141
1. A test runner or framework.
4242
2. Specific to a testing framework.
4343

44-
We recommend Jest as our preference.
44+
We recommend Vitest as our preference.

docs/svelte-testing-library/setup.mdx

+75-69
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,80 @@ title: Setup
44
sidebar_label: Setup
55
---
66

7-
We recommend using [Jest](https://jestjs.io) but you're free to use the library
7+
We recommend using [Vitest](https://vitest.dev/) but you're free to use the library
88
with any testing framework and runner you're comfortable with.
99

10+
## Vitest
11+
1. Install Vitest and jsdom
12+
13+
```
14+
npm install --save-dev vitest jsdom
15+
```
16+
17+
2. Add the following to your `package.json`
18+
19+
```json
20+
{
21+
"scripts": {
22+
"test": "vitest run src",
23+
"test:watch": "vitest src"
24+
}
25+
}
26+
```
27+
28+
3. You'll need to compile the Svelte components before using them in Vitest, so
29+
you need to install
30+
[@sveltejs/vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte) and Vite
31+
32+
33+
```
34+
npm install --save-dev @sveltejs/vite-plugin-svelte vite
35+
```
36+
37+
4. Add a `vitest.config.ts` configuration file to the root of your project
38+
39+
```js
40+
import { defineConfig } from 'vite';
41+
import { svelte } from '@sveltejs/vite-plugin-svelte';
42+
43+
export default defineConfig({
44+
plugins: [svelte({ hot: !process.env.VITEST })],
45+
test: {
46+
include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
47+
globals: true,
48+
environment: 'jsdom'
49+
}
50+
});
51+
52+
```
53+
54+
5. This is optional but it is recommended, you can install
55+
[jest-dom](https://github.com/testing-library/jest-dom) to add handy
56+
assertions to Jest
57+
58+
5.1 Install `jest-dom`
59+
60+
```
61+
npm install --save-dev @testing-library/jest-dom
62+
```
63+
64+
5.2 import `@testing-library/jest-dom` at the start of your test files
65+
66+
```js
67+
import '@testing-library/jest-dom';
68+
```
69+
70+
6. Create your component and a test file (checkout the rest of the docs to see how)
71+
and run the following command to run the tests.
72+
73+
```
74+
npm run test
75+
```
76+
### SvelteKit
77+
78+
To use Vitest with SvelteKit install `vitest-svelte-kit`, which includes a preconfigured Vitest configuration for SvelteKit projects.
79+
You can take a look at the [`vitest-svelte-kit` configuration docs](https://github.com/nickbreaton/vitest-svelte-kit/tree/master/packages/vitest-svelte-kit#configuring) for further instructions.
80+
1081
## Jest
1182

1283
1. Install Jest & jest-environment-jsdom
@@ -99,79 +170,14 @@ with any testing framework and runner you're comfortable with.
99170
```
100171
npm run test
101172
```
102-
## Vitest
103-
1. Install Vitest and jsdom
104-
105-
```
106-
npm install --save-dev vitest jsdom
107-
```
108-
109-
2. Add the following to your `package.json`
110-
111-
```json
112-
{
113-
"scripts": {
114-
"test": "vitest run src",
115-
"test:watch": "vitest src"
116-
}
117-
}
118-
```
119-
120-
3. You'll need to compile the Svelte components before using them in Vitest, so
121-
you need to install
122-
[@sveltejs/vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte) and Vite
123-
124-
125-
```
126-
npm install --save-dev @sveltejs/vite-plugin-svelte vite
127-
```
128-
129-
4. Add a `vitest.config.ts` configuration file to the root of your project
130-
131-
```js
132-
import { defineConfig } from 'vite';
133-
import { svelte } from '@sveltejs/vite-plugin-svelte';
134-
135-
export default defineConfig({
136-
plugins: [svelte({ hot: !process.env.VITEST })],
137-
test: {
138-
include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
139-
globals: true,
140-
environment: 'jsdom'
141-
}
142-
});
143-
144-
```
145-
146-
5. This is optional but it is recommended, you can install
147-
[jest-dom](https://github.com/testing-library/jest-dom) to add handy
148-
assertions to Jest
149-
150-
5.1 Install `jest-dom`
151173

152-
```
153-
npm install --save-dev @testing-library/jest-dom
154-
```
155-
156-
5.2 import `@testing-library/jest-dom` at the start of your test files
157-
158-
```js
159-
import '@testing-library/jest-dom';
160-
```
161-
162-
6. Create your component and a test file (checkout the rest of the docs to see how)
163-
and run the following command to run the tests.
164-
165-
```
166-
npm run test
167-
```
168-
## Typescript
174+
### Typescript
169175

170-
To use Typescript, you'll need to install and configure `svelte-preprocess` and
176+
To use Typescript with Jest, you'll need to install and configure `svelte-preprocess` and
171177
`ts-jest`. For full instructions, see the
172178
[`svelte-jester`](https://github.com/mihar-22/svelte-jester#typescript) docs.
173179

174-
## Preprocessors
180+
### Preprocessors
175181

176182
If you'd like to also include any
177183
[Svelte preprocessors](https://github.com/sveltejs/svelte-preprocess) then

0 commit comments

Comments
 (0)