From 02048bf6df8b2cd3946d79ca469c804455130c84 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 17 Sep 2025 22:21:51 -0700 Subject: [PATCH 1/2] Promote Storybook testing Storybook testing docs are currently buried in the page contents. This change makes it visible in the right-hand table of contents. --- documentation/docs/07-misc/02-testing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/docs/07-misc/02-testing.md b/documentation/docs/07-misc/02-testing.md index 23e2e023d34c..d90b2a5897c7 100644 --- a/documentation/docs/07-misc/02-testing.md +++ b/documentation/docs/07-misc/02-testing.md @@ -246,7 +246,7 @@ test('Component', async () => { 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). -### Component testing with Storybook +## Component testing with Storybook [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. From 28e058a656800c6f5430b44b3886546cb71a1c4e Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 25 Sep 2025 18:48:50 +0800 Subject: [PATCH 2/2] Incorporate review feedback --- documentation/docs/07-misc/02-testing.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/documentation/docs/07-misc/02-testing.md b/documentation/docs/07-misc/02-testing.md index d90b2a5897c7..4807fc8f0c2f 100644 --- a/documentation/docs/07-misc/02-testing.md +++ b/documentation/docs/07-misc/02-testing.md @@ -4,7 +4,7 @@ title: Testing Testing helps you write and maintain your code and guard against regressions. Testing frameworks help you with that, allowing you to describe assertions or expectations about how your code should behave. Svelte is unopinionated about which testing framework you use — you can write unit tests, integration tests, and end-to-end tests using solutions like [Vitest](https://vitest.dev/), [Jasmine](https://jasmine.github.io/), [Cypress](https://www.cypress.io/) and [Playwright](https://playwright.dev/). -## Unit and integration testing using Vitest +## Unit and component tests with Vitest Unit tests allow you to test small isolated parts of your code. Integration tests allow you to test parts of your application to see if they work together. If you're using Vite (including via SvelteKit), we recommend using [Vitest](https://vitest.dev/). You can use the Svelte CLI to [setup Vitest](/docs/cli/vitest) either during project creation or later on. @@ -246,7 +246,7 @@ test('Component', async () => { 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). -## Component testing with Storybook +## Component tests with Storybook [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. @@ -288,7 +288,7 @@ You can create stories for component variations and test interactions with the [ /> ``` -## E2E tests using Playwright +## End-to-end tests with Playwright 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/).