Skip to content

Commit 6a6fd25

Browse files
Sync svelte docs (#1960)
sync svelte docs Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
1 parent e9cc864 commit 6a6fd25

1 file changed

Lines changed: 33 additions & 3 deletions

File tree

apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,21 @@ You can now write unit tests for code inside your `.js/.ts` files:
3939

4040
```js
4141
/// file: multiplier.svelte.test.js
42+
// @filename: multiplier.svelte.ts
43+
export function multiplier(initial: number, k: number) {
44+
let count = $state(initial);
45+
46+
return {
47+
get value() {
48+
return count * k;
49+
},
50+
set: (c: number) => {
51+
count = c;
52+
}
53+
};
54+
}
55+
// @filename: multiplier.svelte.test.js
56+
// ---cut---
4257
import { flushSync } from 'svelte';
4358
import { expect, test } from 'vitest';
4459
import { multiplier } from './multiplier.svelte.js';
@@ -81,6 +96,16 @@ Since Vitest processes your test files the same way as your source files, you ca
8196

8297
```js
8398
/// file: multiplier.svelte.test.js
99+
// @filename: multiplier.svelte.ts
100+
export function multiplier(getCount: () => number, k: number) {
101+
return {
102+
get value() {
103+
return getCount() * k;
104+
}
105+
};
106+
}
107+
// @filename: multiplier.svelte.test.js
108+
// ---cut---
84109
import { flushSync } from 'svelte';
85110
import { expect, test } from 'vitest';
86111
import { multiplier } from './multiplier.svelte.js';
@@ -116,6 +141,10 @@ If the code being tested uses effects, you need to wrap the test inside `$effect
116141

117142
```js
118143
/// file: logger.svelte.test.js
144+
// @filename: logger.svelte.ts
145+
export function logger(fn: () => void) {}
146+
// @filename: logger.svelte.test.js
147+
// ---cut---
119148
import { flushSync } from 'svelte';
120149
import { expect, test } from 'vitest';
121150
import { logger } from './logger.svelte.js';
@@ -214,7 +243,7 @@ test('Component', () => {
214243
expect(document.body.innerHTML).toBe('<button>0</button>');
215244

216245
// Click the button, then flush the changes so you can synchronously write expectations
217-
document.body.querySelector('button').click();
246+
document.body.querySelector('button')?.click();
218247
flushSync();
219248

220249
expect(document.body.innerHTML).toBe('<button>1</button>');
@@ -227,6 +256,7 @@ test('Component', () => {
227256
While the process is very straightforward, it is also low level and somewhat brittle, as the precise structure of your component may change frequently. Tools like [@testing-library/svelte](https://testing-library.com/docs/svelte-testing-library/intro/) can help streamline your tests. The above test could be rewritten like this:
228257
229258
```js
259+
// @errors: 2339
230260
/// file: component.test.js
231261
import { render, screen } from '@testing-library/svelte';
232262
import userEvent from '@testing-library/user-event';
@@ -271,9 +301,9 @@ You can create stories for component variations and test interactions with the [
271301
}
272302
});
273303
</script>
274-
304+
275305
<Story name="Empty Form" />
276-
306+
277307
<Story
278308
name="Filled Form"
279309
play={async ({ args, canvas, userEvent }) => {

0 commit comments

Comments
 (0)