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
• Usage
• Example
• Changelog
• Support
• License
• Related
• 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
• 🚀 Ideal for unit and integration testing of UI components

---

🕵🏼 Usage

Install the package using your favorite package manager:

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 and your own DOM-like environment, e.g. Happy-Dom and start rendering your Astro components in order to test them.

---

🗒️ Example

// @​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.

---

🪪 License

Licensed under the MIT license which is available here, MIT license.

---

💖 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

🧭 Add an easy-to-use navigational button (jump to top/bottom) to your Astro site. 🔼

@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

🪐 Provides ways of testing whether an array of chars is present inside a given String. ☄

@igor.dvlpr/magic-queryselector

🪄 A TypeScript-types patch for querySelector/querySelectorAll, make them return types you expect them to! 🔮

@igor.dvlpr/vscode-folderpicker

✨ Provides a custom Folder Picker API + UI for Visual Studio Code. 🎨

---

👨🏻‍💻 Author

Created by Igor Dimitrijević (@igorskyflyer).