https://github.com/igorskyflyer/npm-astro-render-component
๐ค Plug-and-play Astro component renderer for fast, zero-config testing in any DOM-like JS/TS environment. ๐ฌ
https://github.com/igorskyflyer/npm-astro-render-component
astro back-end component dom framework front-end happy-dom happydom igorskyflyer jsdom render test ui vdom
Last synced: 22 days ago
JSON representation
๐ค Plug-and-play Astro component renderer for fast, zero-config testing in any DOM-like JS/TS environment. ๐ฌ
- Host: GitHub
- URL: https://github.com/igorskyflyer/npm-astro-render-component
- Owner: igorskyflyer
- License: mit
- Created: 2025-08-08T19:53:01.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2025-08-14T13:06:09.000Z (about 2 months ago)
- Last Synced: 2025-09-12T13:27:00.907Z (24 days ago)
- Topics: astro, back-end, component, dom, framework, front-end, happy-dom, happydom, igorskyflyer, jsdom, render, test, ui, vdom
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@igor.dvlpr/astro-render-component
- Size: 134 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
Astro Render Component
๐ค Plug-and-play Astro component renderer for fast, zero-config testing in any DOM-like JS/TS environment. ๐ฌ
## ๐ Table of Contents
- [Features](#-features)
- [Usage](#-usage)
- [Example](#๏ธ-example)
- [Changelog](#-changelog)
- [Support](#-support)
- [License](#-license)
- [Related](#-related)
- [Author](#-author)
---
## ๐ค Features
- ๐ง Server-side rendering of Astro components in non-Astro environments like Vitest or Node.js
- ๐งช Test-friendly API for rendering `.astro` components with props, slots, and hydration strategies
- ๐ช Zero-config usageโjust import and render, no need for full Astro setup
- ๐งฉ Supports static, lazy, and client-only hydration modes
- ๐ง Typed API with JSDoc annotations for IntelliSense and DX-first workflows
- ๐ธ๏ธ Compatible with Astro v5+, leveraging the experimental [AstroContainer API](https://docs.astro.build/en/reference/container-reference/)
- ๐ Ideal for unit and integration testing of UI components
---
## ๐ต๐ผ Usage
Install the package using your favorite package manager:
```bash
npm install "@igor.dvlpr/astro-render-component"
# or
pnpm add "@igor.dvlpr/astro-render-component"
# or
yarn add "@igor.dvlpr/astro-render-component"
```
Bring your own testing framework, e.g. [Vitest](https://vitest.dev/) and your own DOM-like environment, e.g. [Happy-Dom](https://www.npmjs.com/package/happy-dom) and start rendering your Astro components in order to test them.
---
## ๐๏ธ Example
```ts
// @โvitest-environment happy-dom
import { renderAstroComponent } from '@igor.dvlpr/astro-render-component'
import MyComponent from '../components/MyComponent.astro'
import { expect } from 'vitest'
const fragment = await renderAstroComponent(MyComponent, { props: { title: 'Hello' } })
expect(fragment.querySelector('h1')?.textContent).toBe('Hello')
```
---
## ๐ Changelog
๐ The changelog is available here: [CHANGELOG.md](https://github.com/igorskyflyer/npm-astro-render-component/blob/main/CHANGELOG.md).
---
## ๐ชช License
Licensed under the MIT license which is available here, [MIT license](https://github.com/igorskyflyer/npm-astro-render-component/blob/main/LICENSE.txt).
---
## ๐ Support
I work hard for every project, including this one and your support means a lot to me!
Consider buying me a coffee. โ
Thank you for supporting my efforts! ๐๐
---
## ๐งฌ Related
[@igor.dvlpr/astro-easynav-button](https://www.npmjs.com/package/@igor.dvlpr/astro-easynav-button)
> _๐งญ Add an easy-to-use navigational button (jump to top/bottom) to your Astro site. ๐ผ_
[@igor.dvlpr/astro-post-excerpt](https://www.npmjs.com/package/@igor.dvlpr/astro-post-excerpt)
> _โญ An Astro component that renders post excerpts for your Astro blog - directly from your Markdown and MDX files. Astro v2+ collections are supported as well! ๐_
[@igor.dvlpr/chars-in-string](https://www.npmjs.com/package/@igor.dvlpr/chars-in-string)
> _๐ช Provides ways of testing whether an array of chars is present inside a given String. โ_
[@igor.dvlpr/magic-queryselector](https://www.npmjs.com/package/@igor.dvlpr/magic-queryselector)
> _๐ช A TypeScript-types patch for querySelector/querySelectorAll, make them return types you expect them to! ๐ฎ_
[@igor.dvlpr/vscode-folderpicker](https://www.npmjs.com/package/@igor.dvlpr/vscode-folderpicker)
> _โจ Provides a custom Folder Picker API + UI for Visual Studio Code. ๐จ_
---
## ๐จ๐ปโ๐ป Author
Created by **Igor Dimitrijeviฤ** ([*@igorskyflyer*](https://github.com/igorskyflyer/)).