Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-16 21:46:22 -05:00
Code Issues Activity

Sync from a44cfb874a

Browse source
This commit is contained in:
github-actions[bot] 2024-12-16 19:52:06 +00:00
commit 93d4e8611c
17 changed files with 212 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.codesandbox/Dockerfile Normal file
View file

@ -0,0 +1 @@
FROM node:18-bullseye

24
.gitignore vendored Normal file
View file

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

11
README.md Normal file
View file

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

7
astro.config.ts Normal file
View file

@ -0,0 +1,7 @@
import { defineConfig } from 'astro/config';
import react from "@astrojs/react"
// https://astro.build/config
export default defineConfig({
integrations: [react()]
});

24
package.json Normal file
View file

@ -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"
}
}

9
public/favicon.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 749 B

8
src/components/Card.astro Normal file
View file

@ -0,0 +1,8 @@
---
---
<div>
This is a card
<slot />
</div>

14
src/components/Counter.jsx Normal file
View file

@ -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>
)
}

5
src/components/ReactWrapper.astro Normal file
View file

@ -0,0 +1,5 @@
---
import Counter from './Counter.jsx';
---
<Counter initialCount={5} />

20
src/pages/[locale].astro Normal file
View file

@ -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>

11
src/pages/api.ts Normal file
View file

@ -0,0 +1,11 @@
export function GET() {
const json = {
foo: 'bar',
number: 1,
};
return new Response(JSON.stringify(json), {
headers: {
'content-type': 'application/json',
},
});
}

16
src/pages/index.astro Normal file
View file

@ -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>

15
test/Card.test.ts Normal file
View file

@ -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');
});

17
test/ReactWrapper.test.ts Normal file
View file

@ -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');
});

16
test/[locale].test.ts Normal file
View file

@ -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');
});

5
tsconfig.json Normal file
View file

@ -0,0 +1,5 @@
{
"extends": "astro/tsconfigs/strict",
"include": [".astro/types.d.ts", "**/*"],
"exclude": ["dist"]
}

9
vitest.config.ts Normal file
View file

@ -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,
},
});