Astro 7 component rendering tests with the Container API (Vitest): working versions (tested 2026-10-15)

{
  "name": "astro-container-render",
  "private": true,
  "type": "module",
  "scripts": {
    "test": "vitest run --reporter=default --reporter=json --outputFile=test-report.json"
  },
  "dependencies": {
    "astro": "7.3.8"
  },
  "devDependencies": {
    "@types/node": "24.19.2",
    "vitest": "5.0.4"
  }
}

/// <reference types="vitest/config" />
import { getViteConfig } from "astro/config";
export default getViteConfig({ test: {} });

import { defineConfig } from "astro/config";
export default defineConfig({});

---
interface Props { name: string; price: number; featured?: boolean }
const { name, price, featured = false } = Astro.props;
const label = price === 0 ? "Free" : `$${price}/mo`;
---
<article class:list={["card", { featured }]}>
  <h2>{name}</h2>
  <p class="price">{label}</p>
  {featured && <span class="badge">Most popular</span>}
  <slot />
</article>

import { describe, it, expect } from "vitest";
import { experimental_AstroContainer as AstroContainer } from "astro/container";
import PriceCard from "../src/components/PriceCard.astro";

describe("PriceCard", () => {
  it("renders props and slot", async () => {
    const c = await AstroContainer.create();
    const html = await c.renderToString(PriceCard, { props: { name: "Pro", price: 9 }, slots: { default: "<li>Unlimited recipes</li>" } });
    expect(html).toContain("Pro</h2>");
    expect(html).toContain("$9/mo");
    expect(html).toContain("Unlimited recipes");
    expect(html).not.toContain("Most popular");
  });

  it("featured + free variants", async () => {
    const c = await AstroContainer.create();
    const html = await c.renderToString(PriceCard, { props: { name: "Free", price: 0, featured: true } });
    expect(html).toMatch(/Free<\/p>/);
    expect(html).toMatch(/class="card featured/);
    expect(html).toContain("Most popular");
  });
});