Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 54 additions & 0 deletions src/content/docs/en/guides/upgrade-to/v6.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
### Changed: Testing Astro Components Requires SSR Environment
### Changed: Astro components cannot be rendered in Vitest client environments


<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`.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
In Astro 5.x, a temporary workaround allowed rendering `.astro` components in Vitest tests using client environments such as `jsdom` or `happy-dom`.
In Astro 5.x, rendering an Astro component on the client was forbidden. However we temporarily keeped allowing it in Vitest client environments such as `jsdom` or `happy-dom`, which could have happened using the [experimental Container API](/en/reference/container-reference/).


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.
Copy link
Member

Choose a reason for hiding this comment

The 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.
Astro 6.0 removes the ability to render Astro components in Vitest client environments: tests that render Astro components must now run in a server environment like `node`.


#### 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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is merged with the section below

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?

Update your `vitest.config.ts` to use the `node` environment for tests that render Astro components:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Update your `vitest.config.ts` to use the `node` environment for tests that render Astro components:
If you use Vitest to run tests that render Astro components in client environments like `jsdom` or `happy-dom`, update your Vitest config to use the `node` environment for these:

```ts title="vitest.config.ts"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
```ts title="vitest.config.ts"
```ts title="vitest.config.ts" del={5} ins={6}

import { defineConfig } from 'vitest/config';

export default defineConfig({
test: {
environment: 'node',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
environment: 'node',
environment: 'jsdom',
environment: 'node',

},
});
```

If you need to test both Astro components and browser-specific code, use Vitest's workspace configuration to separate them:
Copy link
Member

Choose a reason for hiding this comment

The 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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<ReadMore>Learn more about [testing Astro components with the Container API](/en/guides/testing/).</ReadMore>
<ReadMore>Learn more about [testing Astro components](/en/guides/testing/).</ReadMore>


### Changed: Integration hooks and HMR access patterns (Integration API)

<SourcePR number="14306" title="feat: integrate vite environments"/>
Expand Down