-
-
Notifications
You must be signed in to change notification settings - Fork 1.8k
docs: document Vitest SSR environment requirement for Astro 6 #12808
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: v6
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -1242,6 +1242,60 @@ export function getStaticPaths() { | |||||||||||||||||||||
|
|
||||||||||||||||||||||
| <ReadMore>Learn more about [dynamic SSG routes with `getStaticPaths()`](/en/guides/routing/#static-ssg-mode).</ReadMore> | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| ### Changed: Testing Astro Components Requires SSR Environment | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| <SourcePR number="14895" title="feat: remove Vitest workaround for client environment"/> | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| In Astro 5.x, a temporary workaround allowed rendering `.astro` components in Vitest tests using client environments such as `jsdom` or `happy-dom`. | ||||||||||||||||||||||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||||||||||||||||||
|
|
||||||||||||||||||||||
| Astro 6.0 removes this workaround: tests that render Astro components must now use an SSR environment like `node`. This ensures tests run in an environment that matches Astro's SSR build process. | ||||||||||||||||||||||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||||||||||||||||||
|
|
||||||||||||||||||||||
| #### Who is affected? | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| You are affected **only if all three** of these conditions apply: | ||||||||||||||||||||||
| - You use Vitest to run tests, **and** | ||||||||||||||||||||||
| - You render `.astro` components (typically via the Container API), **and** | ||||||||||||||||||||||
| - Your test environment is set to `jsdom` or `happy-dom` | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| If you don't render Astro components in your tests, or if you already use the `node` environment, no changes are needed. | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| #### What should I do? | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
|
Comment on lines
+1253
to
+1263
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is merged with the section below
Suggested change
|
||||||||||||||||||||||
| Update your `vitest.config.ts` to use the `node` environment for tests that render Astro components: | ||||||||||||||||||||||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||||||||||||||||||
| ```ts title="vitest.config.ts" | ||||||||||||||||||||||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||||||||||||||||||
| import { defineConfig } from 'vitest/config'; | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| export default defineConfig({ | ||||||||||||||||||||||
| test: { | ||||||||||||||||||||||
| environment: 'node', | ||||||||||||||||||||||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||||||||||||||||||
| }, | ||||||||||||||||||||||
| }); | ||||||||||||||||||||||
| ``` | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| If you need to test both Astro components and browser-specific code, use Vitest's workspace configuration to separate them: | ||||||||||||||||||||||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Workspaces are deprecated, can you update this sentence and the codeblock below to show usage with projects? https://vitest.dev/guide/projects |
||||||||||||||||||||||
| ```ts title="vitest.workspace.ts" | ||||||||||||||||||||||
| import { defineWorkspace } from 'vitest/config'; | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| export default defineWorkspace([ | ||||||||||||||||||||||
| { | ||||||||||||||||||||||
| test: { | ||||||||||||||||||||||
| name: 'astro-components', | ||||||||||||||||||||||
| environment: 'node', | ||||||||||||||||||||||
| include: ['**/*.astro.test.ts'], | ||||||||||||||||||||||
| }, | ||||||||||||||||||||||
| }, | ||||||||||||||||||||||
| { | ||||||||||||||||||||||
| test: { | ||||||||||||||||||||||
| name: 'browser', | ||||||||||||||||||||||
| environment: 'happy-dom', | ||||||||||||||||||||||
| include: ['**/*.browser.test.ts'], | ||||||||||||||||||||||
| }, | ||||||||||||||||||||||
| }, | ||||||||||||||||||||||
| ]); | ||||||||||||||||||||||
| ``` | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| <ReadMore>Learn more about [testing Astro components with the Container API](/en/guides/testing/).</ReadMore> | ||||||||||||||||||||||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||||||||||||||||||
|
|
||||||||||||||||||||||
| ### Changed: Integration hooks and HMR access patterns (Integration API) | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| <SourcePR number="14306" title="feat: integrate vite environments"/> | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.