Sync from a44cfb874a

2024-12-16 21:46:22 -05:00 · 2024-12-16 19:52:06 +00:00 · 2024-12-16 19:52:06 +00:00 · 93d4e8611c
commit 93d4e8611c
17 changed files with 212 additions and 0 deletions
--- a/.codesandbox/Dockerfile
+++ b/.codesandbox/Dockerfile
@ -0,0 +1 @@
+FROM node:18-bullseye
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/
--- a/README.md
+++ b/README.md
@ -0,0 +1,11 @@
+# Astro + [Vitest](https://vitest.dev/) + Container API Example
+
+```sh
+npm create astro@latest -- --template container-with-vitest
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/with-vitest)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/with-vitest)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/with-vitest/devcontainer.json)
+
+This example showcases Astro working with [Vitest](https://vitest.dev/) and how to test components using the Container API.
--- a/astro.config.ts
+++ b/astro.config.ts
@ -0,0 +1,7 @@
+import { defineConfig } from 'astro/config';
+import react from "@astrojs/react"
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [react()]
+});
--- a/package.json
+++ b/package.json
@ -0,0 +1,24 @@
+{
+  "name": "@example/container-with-vitest",
+  "type": "module",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@astrojs/react": "^4.1.1",
+    "astro": "^5.0.8",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "vitest": "^2.1.6"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1"
+  }
+}
--- a/public/favicon.svg
+++ b/public/favicon.svg
@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@ -0,0 +1,8 @@
+---
+
+---
+
+<div>
+	This is a card
+	<slot />
+</div>
--- a/src/components/Counter.jsx
+++ b/src/components/Counter.jsx
@ -0,0 +1,14 @@
+import { useState } from 'react';
+
+export default function({ initialCount }) {
+	const [count, setCount] = useState(initialCount || 0);
+	return (
+		<div className="rounded-t-lg overflow-hidden border-t border-l border-r border-gray-400 text-center p-4">
+			<h2 className="font-semibold text-lg">Counter</h2>
+			<h3 className="font-medium text-lg">Count: {count}</h3>
+			<button
+				className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+				onClick={() => setCount(count + 1)}>Increment</button>
+		</div>
+	)
+}
--- a/src/components/ReactWrapper.astro
+++ b/src/components/ReactWrapper.astro
@ -0,0 +1,5 @@
+---
+import Counter from './Counter.jsx';
+---
+
+<Counter initialCount={5} />
--- a/src/pages/[locale].astro
+++ b/src/pages/[locale].astro
@ -0,0 +1,20 @@
+---
+export function getStaticPaths() {
+	return [{ params: { locale: 'en' } }];
+}
+const { locale } = Astro.params;
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+		<title>Astro</title>
+	</head>
+	<body>
+		<h1>Astro</h1>
+		<p>Locale: {locale}</p>
+	</body>
+</html>
--- a/src/pages/api.ts
+++ b/src/pages/api.ts
@ -0,0 +1,11 @@
+export function GET() {
+	const json = {
+		foo: 'bar',
+		number: 1,
+	};
+	return new Response(JSON.stringify(json), {
+		headers: {
+			'content-type': 'application/json',
+		},
+	});
+}
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@ -0,0 +1,16 @@
+---
+
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+		<title>Astro</title>
+	</head>
+	<body>
+		<h1>Astro</h1>
+	</body>
+</html>
--- a/test/Card.test.ts
+++ b/test/Card.test.ts
@ -0,0 +1,15 @@
+import { experimental_AstroContainer as AstroContainer } from 'astro/container';
+import { expect, test } from 'vitest';
+import Card from '../src/components/Card.astro';
+
+test('Card with slots', async () => {
+	const container = await AstroContainer.create();
+	const result = await container.renderToString(Card, {
+		slots: {
+			default: 'Card content',
+		},
+	});
+
+	expect(result).toContain('This is a card');
+	expect(result).toContain('Card content');
+});
--- a/test/ReactWrapper.test.ts
+++ b/test/ReactWrapper.test.ts
@ -0,0 +1,17 @@
+import { loadRenderers } from 'astro:container';
+import { getContainerRenderer } from '@astrojs/react';
+import { experimental_AstroContainer as AstroContainer } from 'astro/container';
+import { expect, test } from 'vitest';
+import ReactWrapper from '../src/components/ReactWrapper.astro';
+
+const renderers = await loadRenderers([getContainerRenderer()]);
+const container = await AstroContainer.create({
+	renderers,
+});
+
+test('ReactWrapper with react renderer', async () => {
+	const result = await container.renderToString(ReactWrapper);
+
+	expect(result).toContain('Counter');
+	expect(result).toContain('Count: <!-- -->5');
+});
--- a/test/[locale].test.ts
+++ b/test/[locale].test.ts
@ -0,0 +1,16 @@
+import { experimental_AstroContainer as AstroContainer } from 'astro/container';
+import { expect, test } from 'vitest';
+import Locale from '../src/pages/[locale].astro';
+
+test('Dynamic route', async () => {
+	const container = await AstroContainer.create();
+	// @ts-ignore
+	const result = await container.renderToString(Locale, {
+		params: {
+			locale: 'en',
+		},
+		request: new Request('http://example.com/en'),
+	});
+
+	expect(result).toContain('Locale: en');
+});
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,5 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}
--- a/vitest.config.ts
+++ b/vitest.config.ts
@ -0,0 +1,9 @@
+/// <reference types="vitest" />
+import { getViteConfig } from 'astro/config';
+
+export default getViteConfig({
+	test: {
+		/* for example, use global to avoid globals imports (describe, test, expect): */
+		// globals: true,
+	},
+});