From af0c959ffa989a4690b2efe23a83b7533863d5a3 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 20 Dec 2024 12:22:13 +0000 Subject: [PATCH] Sync from 5f4c543609dea291c5f5c1e3ee0252ee5a66a1e1 --- .codesandbox/Dockerfile | 1 + .gitignore | 24 ++++++++++++++++++++++++ README.md | 11 +++++++++++ astro.config.ts | 7 +++++++ package.json | 24 ++++++++++++++++++++++++ public/favicon.svg | 9 +++++++++ src/components/Card.astro | 8 ++++++++ src/components/Counter.jsx | 14 ++++++++++++++ src/components/ReactWrapper.astro | 5 +++++ src/pages/[locale].astro | 20 ++++++++++++++++++++ src/pages/api.ts | 11 +++++++++++ src/pages/index.astro | 16 ++++++++++++++++ test/Card.test.ts | 15 +++++++++++++++ test/ReactWrapper.test.ts | 17 +++++++++++++++++ test/[locale].test.ts | 16 ++++++++++++++++ tsconfig.json | 5 +++++ vitest.config.ts | 9 +++++++++ 17 files changed, 212 insertions(+) create mode 100644 .codesandbox/Dockerfile create mode 100644 .gitignore create mode 100644 README.md create mode 100644 astro.config.ts create mode 100644 package.json create mode 100644 public/favicon.svg create mode 100644 src/components/Card.astro create mode 100644 src/components/Counter.jsx create mode 100644 src/components/ReactWrapper.astro create mode 100644 src/pages/[locale].astro create mode 100644 src/pages/api.ts create mode 100644 src/pages/index.astro create mode 100644 test/Card.test.ts create mode 100644 test/ReactWrapper.test.ts create mode 100644 test/[locale].test.ts create mode 100644 tsconfig.json create mode 100644 vitest.config.ts diff --git a/.codesandbox/Dockerfile b/.codesandbox/Dockerfile new file mode 100644 index 0000000000..c3b5c81a12 --- /dev/null +++ b/.codesandbox/Dockerfile @@ -0,0 +1 @@ +FROM node:18-bullseye diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000000..16d54bb13c --- /dev/null +++ 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/ diff --git a/README.md b/README.md new file mode 100644 index 0000000000..116268944c --- /dev/null +++ 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. diff --git a/astro.config.ts b/astro.config.ts new file mode 100644 index 0000000000..17257d4f19 --- /dev/null +++ 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()] +}); diff --git a/package.json b/package.json new file mode 100644 index 0000000000..5b4f585c10 --- /dev/null +++ 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.2", + "astro": "^5.1.1", + "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" + } +} diff --git a/public/favicon.svg b/public/favicon.svg new file mode 100644 index 0000000000..f157bd1c5e --- /dev/null +++ b/public/favicon.svg @@ -0,0 +1,9 @@ + + + + diff --git a/src/components/Card.astro b/src/components/Card.astro new file mode 100644 index 0000000000..a7e49f41c5 --- /dev/null +++ b/src/components/Card.astro @@ -0,0 +1,8 @@ +--- + +--- + +
+ This is a card + +
diff --git a/src/components/Counter.jsx b/src/components/Counter.jsx new file mode 100644 index 0000000000..2148bf3d8f --- /dev/null +++ b/src/components/Counter.jsx @@ -0,0 +1,14 @@ +import { useState } from 'react'; + +export default function({ initialCount }) { + const [count, setCount] = useState(initialCount || 0); + return ( +
+

Counter

+

Count: {count}

+ +
+ ) +} diff --git a/src/components/ReactWrapper.astro b/src/components/ReactWrapper.astro new file mode 100644 index 0000000000..73ac6baebd --- /dev/null +++ b/src/components/ReactWrapper.astro @@ -0,0 +1,5 @@ +--- +import Counter from './Counter.jsx'; +--- + + diff --git a/src/pages/[locale].astro b/src/pages/[locale].astro new file mode 100644 index 0000000000..b76d36d39a --- /dev/null +++ b/src/pages/[locale].astro @@ -0,0 +1,20 @@ +--- +export function getStaticPaths() { + return [{ params: { locale: 'en' } }]; +} +const { locale } = Astro.params; +--- + + + + + + + + Astro + + +

Astro

+

Locale: {locale}

+ + diff --git a/src/pages/api.ts b/src/pages/api.ts new file mode 100644 index 0000000000..c30def5bba --- /dev/null +++ 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', + }, + }); +} diff --git a/src/pages/index.astro b/src/pages/index.astro new file mode 100644 index 0000000000..2d14107362 --- /dev/null +++ b/src/pages/index.astro @@ -0,0 +1,16 @@ +--- + +--- + + + + + + + + Astro + + +

Astro

+ + diff --git a/test/Card.test.ts b/test/Card.test.ts new file mode 100644 index 0000000000..26d766d1a8 --- /dev/null +++ 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'); +}); diff --git a/test/ReactWrapper.test.ts b/test/ReactWrapper.test.ts new file mode 100644 index 0000000000..6adbff6cfe --- /dev/null +++ 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'); +}); diff --git a/test/[locale].test.ts b/test/[locale].test.ts new file mode 100644 index 0000000000..db450df538 --- /dev/null +++ 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'); +}); diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000000..8bf91d3bb9 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,5 @@ +{ + "extends": "astro/tsconfigs/strict", + "include": [".astro/types.d.ts", "**/*"], + "exclude": ["dist"] +} diff --git a/vitest.config.ts b/vitest.config.ts new file mode 100644 index 0000000000..a34f19bb10 --- /dev/null +++ b/vitest.config.ts @@ -0,0 +1,9 @@ +/// +import { getViteConfig } from 'astro/config'; + +export default getViteConfig({ + test: { + /* for example, use global to avoid globals imports (describe, test, expect): */ + // globals: true, + }, +});