Skip to content

Commit 908e35b

Browse files
authored
make it its own section
1 parent dd45729 commit 908e35b

File tree

1 file changed

+2
-6
lines changed

1 file changed

+2
-6
lines changed

documentation/docs/07-misc/02-testing.md

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -164,8 +164,6 @@ It is possible to test your components in isolation, which allows you to render
164164

165165
> [!NOTE] Before writing component tests, think about whether you actually need to test the component, or if it's more about the logic _inside_ the component. If so, consider extracting out that logic to test it in isolation, without the overhead of a component.
166166
167-
_With Vitest and jsdom_
168-
169167
To get started, install jsdom (a library that shims DOM APIs):
170168

171169
```sh
@@ -248,11 +246,11 @@ test('Component', async () => {
248246

249247
When writing component tests that involve two-way bindings, context or snippet props, it's best to create a wrapper component for your specific test and interact with that. `@testing-library/svelte` contains some [examples](https://testing-library.com/docs/svelte-testing-library/example).
250248

251-
_With Storybook_
249+
### Component testing with Storybook
252250

253251
[Storybook](https://storybook.js.org) is a tool for developing and documenting UI components, and it can also be used to test your components. They're run with Vitest's browser mode, which renders your components in a real browser for the most realistic testing environment.
254252

255-
To get started, first install Storybook ([using Svelte's CLI](/docs/cli/storybook)) in your project via `npx sv add storybook` and choose the recommended configuration that includes testing features. If you're already using Storybook, follow the [Storybook testing docs](https://storybook.js.org/docs/writing-tests?renderer=svelte) to get started.
253+
To get started, first install Storybook ([using Svelte's CLI](/docs/cli/storybook)) in your project via `npx sv add storybook` and choose the recommended configuration that includes testing features. If you're already using Storybook, and for more information on Storybook's testing capabilities, follow the [Storybook testing docs](https://storybook.js.org/docs/writing-tests?renderer=svelte) to get started.
256254

257255
You can create stories for component variations and test interactions with the [play function](https://storybook.js.org/docs/writing-tests/interaction-testing?renderer=svelte#writing-interaction-tests), which allows you to simulate behavior and make assertions using the Testing Library and Vitest APIs. Here's an example of two stories that can be tested, one that renders an empty LoginForm component and one that simulates a user filling out the form:
258256

@@ -290,8 +288,6 @@ You can create stories for component variations and test interactions with the [
290288
/>
291289
```
292290

293-
To learn more about Storybook's mocking, accessibility testing, interactions debugging, and coverage tools, please see the [Storybook testing docs](https://storybook.js.org/docs/writing-tests?renderer=svelte).
294-
295291
## E2E tests using Playwright
296292

297293
E2E (short for 'end to end') tests allow you to test your full application through the eyes of the user. This section uses [Playwright](https://playwright.dev/) as an example, but you can also use other solutions like [Cypress](https://www.cypress.io/) or [NightwatchJS](https://nightwatchjs.org/).

0 commit comments

Comments
 (0)