Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit ef39495

Browse files
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‎

Lines changed: 1 addition & 1 deletion
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‎

Lines changed: 75 additions & 69 deletions
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)

AltStyle によって変換されたページ (->オリジナル) /