diff --git a/apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md b/apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md index 45537686f9..756b6267a1 100644 --- a/apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md +++ b/apps/svelte.dev/content/docs/svelte/07-misc/02-testing.md @@ -39,6 +39,21 @@ You can now write unit tests for code inside your `.js/.ts` files: ```js /// file: multiplier.svelte.test.js +// @filename: multiplier.svelte.ts +export function multiplier(initial: number, k: number) { + let count = $state(initial); + + return { + get value() { + return count * k; + }, + set: (c: number) => { + count = c; + } + }; +} +// @filename: multiplier.svelte.test.js +// ---cut--- import { flushSync } from 'svelte'; import { expect, test } from 'vitest'; 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 ```js /// file: multiplier.svelte.test.js +// @filename: multiplier.svelte.ts +export function multiplier(getCount: () => number, k: number) { + return { + get value() { + return getCount() * k; + } + }; +} +// @filename: multiplier.svelte.test.js +// ---cut--- import { flushSync } from 'svelte'; import { expect, test } from 'vitest'; 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 ```js /// file: logger.svelte.test.js +// @filename: logger.svelte.ts +export function logger(fn: () => void) {} +// @filename: logger.svelte.test.js +// ---cut--- import { flushSync } from 'svelte'; import { expect, test } from 'vitest'; import { logger } from './logger.svelte.js'; @@ -214,7 +243,7 @@ test('Component', () => { expect(document.body.innerHTML).toBe(''); // Click the button, then flush the changes so you can synchronously write expectations - document.body.querySelector('button').click(); + document.body.querySelector('button')?.click(); flushSync(); expect(document.body.innerHTML).toBe(''); @@ -227,6 +256,7 @@ test('Component', () => { 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: ```js +// @errors: 2339 /// file: component.test.js import { render, screen } from '@testing-library/svelte'; import userEvent from '@testing-library/user-event'; @@ -271,9 +301,9 @@ You can create stories for component variations and test interactions with the [ } }); - + - + {