feat: vitest browser renderer#2
Merged
Merged
Conversation
- Create plugin unit tests (test/plugin.test.ts) - Create test fixtures (SimpleCard, WithSlots, ComplexProps) - Create browser integration tests (test/browser.test.ts) - Add vitest configs for unit and browser tests - Update package.json with dependencies and test scripts Tests will fail until implementation is complete (TDD approach). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
…wser mode Implemented a complete solution for rendering Astro components in Vitest browser mode: ## Core Architecture - **Vite Plugin (src/plugin.ts)**: Intercepts .astro imports using transform hook with enforce: 'post' to run after Astro's transforms - Browser imports receive metadata objects with __astroComponent flag, __path, and __name - SSR imports pass through unchanged for normal Astro rendering - Registers browser command via config hook for proper Vitest integration - **Browser Command**: Node.js function that bridges browser ↔ server - Uses Astro Container API (experimental_AstroContainer) for SSR rendering - Loads components via Vitest's Vite server (ctx.project.vite) - Uses devalue for props serialization to preserve Dates, RegExps, etc. - **Browser-side Rendering (src/index.ts)**: Main API for test authors - render() function that serializes props, invokes browser command, and injects HTML into DOM - Returns RenderResult with container, locators (getByText, getByTestId, getByRole), and unmount function - Automatic cleanup between tests via beforeEach hook - **Pure Functions (src/pure.ts)**: DOM manipulation utilities - injectHTML() uses createContextualFragment for proper HTML parsing - cleanup() for test teardown ## Key Technical Decisions - **Vite 6 Compatibility**: Added pnpm override for vite@^6.3.6 to match Astro 5's Environment API requirements - **Transform Hook**: Used enforce: 'post' to run after Astro's transforms, avoiding plugin ordering issues - **devalue Serialization**: Matches Astro's prop handling for complex objects - **Astro Fixture Site**: Created complete test/fixtures/astro-site/ with proper Astro project structure ## Testing - 11 unit tests covering plugin behavior ✓ - 17 browser integration tests covering: - Basic rendering with props and slots - Complex props (numbers, arrays, objects, Dates) - Locators API (getByText, getByTestId, getByRole) - Cleanup and unmount - Metadata validation All tests passing! 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Added DOM and DOM.Iterable types to tsconfig.json for browser-side code - Updated package.json exports to include proper "types" conditions - Added "types" field pointing to main declaration file - Fixed repository URL format for publint validation All TypeScript types now resolve correctly. Node 10 resolution failures are expected (EOL, no ESM support). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Node 10 is EOL and doesn't support ESM properly. Using the node16 profile focuses validation on supported Node.js versions (16+). All checks now pass with green status for Node 16+, ESM, and bundlers. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Extended tsconfig.json to include astro/tsconfigs/base for proper .astro types - Updated render() signature to accept AstroComponentFactory | AstroComponentMetadata - Added test/env.d.ts with Astro client types reference - Fixed plugin.test.ts to properly handle Vite's ObjectHook transform type This resolves TypeScript errors when importing .astro files in test code. At compile time, TypeScript sees .astro imports as AstroComponentFactory, but at runtime our plugin transforms them to AstroComponentMetadata objects. All 28 tests passing, build working correctly. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Wrote complete documentation for vitest-browser-astro package - Features overview and installation instructions - Quick start guide with configuration examples - Complete API reference for render() and cleanup() - Multiple usage examples (props, slots, complex types, interactions) - How It Works section explaining the architecture - Configuration options for Playwright and WebdriverIO - TypeScript support documentation - Troubleshooting guide - Requirements and contributing info - Created symlink from root README.md to package README - Ensures npm package and GitHub repo show same documentation - Single source of truth for all documentation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Added package.json with Astro dependency and dev/build/preview scripts - Created .gitignore for build artifacts and dependencies - Updated index.astro to showcase all test components with proper styling - Added fixture site to pnpm workspace for proper dependency resolution - Verified Astro dev server starts successfully at localhost:4321 - All 28 tests (11 unit + 17 browser) still passing The fixture site now serves dual purpose: 1. Provides components for testing vitest-browser-astro 2. Can be run as a real Astro site to manually verify component rendering Run `cd test/fixtures/astro-site && pnpm dev` to start the dev server. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR implements the complete vitest-browser-astro library, enabling browser-based testing of Astro components using Vitest Browser Mode. The implementation uses a plugin-based architecture where Astro components are server-rendered via the Container API and injected into the browser DOM for testing.
Key changes:
- Implemented Vite plugin that transforms
.astroimports into metadata objects - Created browser command system for server-side rendering via Astro Container API
- Added comprehensive test suite with support for props, slots, inline scripts, and framework components (React, Vue, Svelte)
Reviewed Changes
Copilot reviewed 36 out of 40 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
packages/vitest-browser-astro/src/plugin.ts |
Vite plugin for transforming .astro imports and browser command for server-side rendering |
packages/vitest-browser-astro/src/index.ts |
Main browser-side API with render() function |
packages/vitest-browser-astro/src/pure.ts |
Browser-side utilities for DOM injection and hydration |
packages/vitest-browser-astro/src/types.ts |
TypeScript type definitions |
packages/vitest-browser-astro/test/plugin.test.ts |
Unit tests for plugin transformation logic |
packages/vitest-browser-astro/test/fixtures/astro-site/test/browser.test.ts |
Comprehensive browser integration tests |
packages/vitest-browser-astro/test/fixtures/astro-site/* |
Test fixture site with example Astro components |
packages/vitest-browser-astro/README.md |
Documentation with usage examples and API reference |
pnpm-workspace.yaml |
Updated workspace to include test fixture |
package.json |
Added Vite version override |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| Configure Vitest to use the Astro browser renderer: | ||
| #### Playwright | ||
|
|
There was a problem hiding this comment.
[nitpick] The section heading says 'Playwright' but doesn't introduce what this section is about. The heading appears under 'Browser providers' but lacks context. Consider adding a brief sentence explaining that this shows Playwright configuration, e.g., 'To use Playwright as your browser provider, configure Vitest as follows:'
Suggested change
| To use Playwright as your browser provider, configure Vitest as follows: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.