@@ -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---
4257import { flushSync } from ' svelte' ;
4358import { expect , test } from ' vitest' ;
4459import { 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---
84109import { flushSync } from ' svelte' ;
85110import { expect , test } from ' vitest' ;
86111import { 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---
119148import { flushSync } from ' svelte' ;
120149import { expect , test } from ' vitest' ;
121150import { 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', () => {
227256While 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
231261import { render , screen } from ' @testing-library/svelte' ;
232262import 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