Skip to content

Commit 20f9e5c

Browse files
fi3eworkampagent
andauthored
docs: add agent prompt component and agent install instructions (#1120)
Co-authored-by: Amp <amp@ampcode.com>
1 parent ee500a1 commit 20f9e5c

11 files changed

Lines changed: 464 additions & 5 deletions

File tree

scripts/dictionary.txt

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ koppers
6868
lightningcss
6969
liyincode
7070
llms
71+
lockfiles
7172
longpaths
7273
manypkg
7374
mattcompiles
@@ -77,8 +78,8 @@ metafile
7778
microfrontend
7879
microfrontends
7980
mjsx
80-
modularly
8181
modu
82+
modularly
8283
mtsx
8384
napi
8485
nodenext
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
pageType: 'blank'
3+
---
4+
5+
import Content from '../../shared/agent-install.md';
6+
7+
<Content />

website/docs/en/guide/start/ai.mdx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,27 @@ description: This chapter introduces how to help AI better understand Rstest's f
33
---
44

55
import { PackageManagerTabs } from '@theme';
6+
import { AgentPrompt } from '@components/AgentPrompt';
67

78
# AI
89

910
To help AI better understand Rstest's features, configuration, and best practices so it can provide more accurate assistance during day-to-day development and troubleshooting, Rstest provides the following capabilities:
1011

12+
- [Agent prompt](#agent-prompt)
1113
- [Agent Skills](#agent-skills)
1214
- [llms.txt](#llmstxt)
1315
- [Markdown docs](#markdown-docs)
1416
- [Markdown reporter](#markdown-reporter)
1517
- [AGENTS.md](#agentsmd)
1618

19+
## Agent prompt
20+
21+
If you are using a coding agent (such as Claude Code, Cursor, Copilot, etc.), you can copy the following prompt to set up Rstest in your project:
22+
23+
<AgentPrompt />
24+
25+
The agent will read the linked instructions and automatically install dependencies, create configuration, and write tests based on your project type.
26+
1727
## Agent Skills
1828

1929
Agent Skills are domain-specific knowledge packs that can be installed into Agents, enabling them to give more accurate and professional suggestions or perform actions in specific scenarios.

website/docs/en/guide/start/quick-start.mdx

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,14 @@ description: This chapter introduces how to quickly get started with Rstest.
44

55
# Quick start
66

7+
import { MdOnly } from '@components/MdOnly';
8+
9+
<MdOnly>
10+
NOTE FOR AI CODING AGENTS: Do not follow this page. Instead, fetch and follow
11+
the agent-specific setup instructions at:
12+
https://rstest.rs/guide/start/agent-install.md
13+
</MdOnly>
14+
715
## Online examples
816

917
You can try Rstest online without any setup by using the following examples:
@@ -33,9 +41,18 @@ nvm use --lts
3341

3442
## Using Rstest
3543

36-
You can install Rstest using the following command:
37-
3844
import { PackageManagerTabs } from '@theme';
45+
import { AgentPrompt } from '@components/AgentPrompt';
46+
47+
### Agent prompt
48+
49+
If you are using a coding agent, you can copy the following prompt to set up Rstest automatically:
50+
51+
<AgentPrompt />
52+
53+
### Manual installation
54+
55+
You can install Rstest using the following command:
3956

4057
<PackageManagerTabs command="add @rstest/core -D" />
4158

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
# Rstest setup — agent execution prompt
2+
3+
Follow these steps **in order** to add Rstest to the current project.
4+
Read the repository first. Make the smallest correct change.
5+
6+
Fetch a linked doc page **only after** choosing that branch. Do **not** fetch docs for branches you did not select.
7+
8+
## Guardrails
9+
10+
- Always install `@rstest/core`. Config file is always `rstest.config.ts` (even in JS projects).
11+
- Only add framework plugins, DOM environments, or browser support when the code under test actually needs the transform — not just because `react` or `vue` appears in `dependencies`.
12+
- Do **not** replace existing Jest/Vitest `test` scripts unless migration is clearly intended — add `"test:unit": "rstest"` or similar instead.
13+
- If the package already has Jest/Vitest tests and migration is **not** intended, use `include` (https://rstest.rs/config/test/include.md) to target only Rstest's own tests so it does not discover tests written for another runner.
14+
- If migration **is** intended, follow the migration guide instead of this prompt: Jest → https://rstest.rs/guide/migration/jest.md / Vitest → https://rstest.rs/guide/migration/vitest.md
15+
- Do **not** reuse Jest/Vitest setup files blindly — only add a setup file (https://rstest.rs/config/test/setup-files.md) if the selected Rstest docs require it and the contents are compatible.
16+
- If `@rstest/core` or `rstest.config.ts` already exists, extend the existing setup minimally instead of recreating it.
17+
- Do **not** generate placeholder tests (e.g., `test('placeholder', () => {})`). A real verification test is fine when no tests exist — see Step 8.
18+
- When signals conflict, the project's existing test/build setup takes precedence.
19+
20+
## Step 0 — Repo-wide inventory (no changes yet)
21+
22+
Before editing anything, determine:
23+
24+
- Package manager (from lockfile, or `packageManager` field in root `package.json`)
25+
- Whether this is a monorepo (`pnpm-workspace.yaml`, `workspaces` in `package.json`, `turbo.json`, `nx.json`)
26+
- Whether Rstest is already present anywhere (`@rstest/core`, `rstest.config.ts`, scripts)
27+
- Whether an existing test runner (Jest/Vitest) is in use — if migration is intended, stop here and follow the migration guide (see Guardrails)
28+
29+
## Step 1 — find the owning package
30+
31+
Choose in this order:
32+
33+
1. Package containing the source files being tested
34+
2. Package containing existing tests for that source
35+
3. Package containing the relevant build config
36+
4. If single-package repo, the root
37+
38+
Note: deps, config, and scripts may live in different places. Determine separately:
39+
40+
- **Config and test files** → always in the owning package.
41+
- **devDependencies and scripts** → in the owning package, unless the repo centralizes them at the workspace root — follow that convention.
42+
- **Validate from** → wherever the test script lives.
43+
44+
## Step 2 — Package-scoped inventory
45+
46+
Now inspect the owning package:
47+
48+
- Source/test file extensions (`.ts`/`.tsx`/`.mts` vs `.js`/`.jsx`/`.mjs`)
49+
- Build tool in scope (`rsbuild.config.*`, `rslib.config.*`, or neither)
50+
- Existing test file naming and location
51+
- Whether tests need Node only, simulated DOM, or real browser APIs
52+
53+
## Step 3 — detect language
54+
55+
Determine from the owning package's **actual source/test file extensions** first. Use `tsconfig.json` or `typescript` dep only as a tiebreaker.
56+
57+
- TypeScript → `.ts` / `.tsx` test files.
58+
- JavaScript → `.js` / `.jsx` test files.
59+
60+
## Step 4 — detect build tooling → pick adapter
61+
62+
An adapter auto-inherits plugins, aliases, and build config. If using an adapter, follow that guide first — only fetch a framework guide if the adapter guide does not already cover the required setup.
63+
64+
- **Rsbuild project** (has `rsbuild.config.*` or `@rsbuild/core` dep) → follow https://rstest.rs/guide/integration/rsbuild.md
65+
- **Rslib project** (has `rslib.config.*` or `@rslib/core` dep) → follow https://rstest.rs/guide/integration/rslib.md
66+
- **Neither** → no adapter; configure Rstest standalone (continue below).
67+
68+
When using an adapter you may still need to set `testEnvironment` or `browser` — the adapter does not decide those.
69+
70+
## Step 5 — choose test environment
71+
72+
Decide based on what the tests actually need, not solely from framework deps in `package.json`. See https://rstest.rs/config/test/test-environment.md for all options.
73+
74+
### A. No DOM APIs needed → node (default)
75+
76+
Omit `testEnvironment`. No extra deps. If not using an adapter and no other options are needed:
77+
78+
```ts
79+
import { defineConfig } from '@rstest/core';
80+
export default defineConfig({});
81+
```
82+
83+
### B. DOM APIs needed, simulated DOM is sufficient → `happy-dom` / `jsdom`
84+
85+
Use for tests that render components or rely on DOM APIs.
86+
87+
- If the project already depends on `jsdom` or `happy-dom`, follow that choice.
88+
- Otherwise default to `happy-dom` (lighter).
89+
- **React** → follow https://rstest.rs/guide/framework/react.md
90+
- **Vue** → follow https://rstest.rs/guide/framework/vue.md
91+
92+
### C. Real browser behavior needed → browser mode (experimental)
93+
94+
Choose **only** when tests explicitly require Canvas, WebGL, CSS computed styles, Web Workers, or cross-browser testing. This is opt-in, not a default escalation. Vue Browser Mode is **not yet supported**. See https://rstest.rs/config/test/browser.md for all options.
95+
96+
→ Follow https://rstest.rs/guide/browser-testing/getting-started.md
97+
→ For React component testing in browser, also follow https://rstest.rs/guide/browser-testing/framework-guides.md
98+
99+
## Step 6 — install dependencies
100+
101+
Use the repo's existing package manager (`pnpm add -D`, `npm i -D`, `yarn add -D`, `bun add -d`) based on the lockfile. Fall back to the `packageManager` field in root `package.json` if no lockfile exists. Install only packages justified in previous steps.
102+
103+
## Step 7 — create config
104+
105+
Keep it minimal — include **only** options justified by detection.
106+
→ See https://rstest.rs/guide/basic/configure-rstest.md only if the selected guide above does not fully specify the config.
107+
108+
Config examples are in the guide pages linked in Steps 4–5. Do not copy examples blindly.
109+
110+
## Step 8 — update scripts
111+
112+
If migration is intended, you should already be following the migration guide — skip this step.
113+
114+
- Do not overwrite any existing test-related script. Add a new non-conflicting name.
115+
- **No test script** → add `"test": "rstest"`.
116+
- **`test` exists (Jest/Vitest)** → add `"test:unit": "rstest"` or similar.
117+
- **Browser Mode** → consider a dedicated `"test:browser"` script.
118+
- Preserve the repo's naming conventions.
119+
120+
## Step 9 — verification test (only if needed)
121+
122+
Only if no tests exist and verification is needed:
123+
124+
- Add **one** small test for a real exported function or module. Prefer a function/module over a UI component to avoid introducing extra test utilities.
125+
- Match existing naming (`*.test.*` vs `*.spec.*`), placement, and language.
126+
- If no convention, colocate next to the source file.
127+
- If there is no small, deterministic real export to test, skip this step.
128+
129+
## Step 10 — validate
130+
131+
Run the test command from wherever the test script lives. If it fails, read the error and fix — do not leave a broken setup. If no tests exist and you skipped Step 9, confirm the setup is valid (config loads, `rstest --passWithNoTests` or equivalent succeeds).
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
pageType: 'blank'
3+
---
4+
5+
import Content from '../../../en/shared/agent-install.md';
6+
7+
<Content />

website/docs/zh/guide/start/ai.mdx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,27 @@ description: 本章节介绍如何帮助 AI 更全面地了解 Rstest 的功能
33
---
44

55
import { PackageManagerTabs } from '@theme';
6+
import { AgentPrompt } from '@components/AgentPrompt';
67

78
# AI
89

910
为了帮助 AI 更全面地了解 Rstest 的功能、配置与最佳实践,从而在日常开发和问题排查过程中提供更准确的帮助,Rstest 提供了以下能力:
1011

12+
- [Agent prompt](#agent-prompt)
1113
- [Agent Skills](#agent-skills)
1214
- [llms.txt](#llmstxt)
1315
- [Markdown 文档](#markdown-文档)
1416
- [Markdown 报告器](#markdown-报告器)
1517
- [AGENTS.md](#agentsmd)
1618

19+
## Agent prompt
20+
21+
如果你正在使用 Coding Agent(如 Claude Code、Cursor、Copilot 等),可以复制以下 prompt 来在项目中设置 Rstest:
22+
23+
<AgentPrompt />
24+
25+
Agent 会读取链接中的指令,根据你的项目类型自动安装依赖、创建配置并编写测试。
26+
1727
## Agent Skills
1828

1929
Agent Skills 是可安装到 Agent 中的领域知识包,能够让 Agent 在特定场景下更准确、更专业地给出建议或执行操作。

website/docs/zh/guide/start/quick-start.mdx

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,14 @@ description: 本章节介绍如何快速上手 Rstest。
44

55
# 快速上手
66

7+
import { MdOnly } from '@components/MdOnly';
8+
9+
<MdOnly>
10+
NOTE FOR AI CODING AGENTS: Do not follow this page. Instead, fetch and follow
11+
the agent-specific setup instructions at:
12+
https://rstest.rs/guide/start/agent-install.md
13+
</MdOnly>
14+
715
## 在线示例
816

917
你可以通过以下示例在线尝试 Rstest,无需任何设置:
@@ -33,9 +41,18 @@ nvm use --lts
3341

3442
## 使用 Rstest
3543

36-
你可以通过如下命令安装 Rstest:
37-
3844
import { PackageManagerTabs } from '@theme';
45+
import { AgentPrompt } from '@components/AgentPrompt';
46+
47+
### Agent prompt
48+
49+
如果你正在使用 Coding Agent,可以复制以下 prompt 来自动设置 Rstest:
50+
51+
<AgentPrompt />
52+
53+
### 手动安装
54+
55+
你可以通过如下命令安装 Rstest:
3956

4057
<PackageManagerTabs command="add @rstest/core -D" />
4158

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
.wrapper {
2+
margin: 1rem 0;
3+
border: 1px solid var(--rp-c-divider);
4+
border-radius: 8px;
5+
overflow: hidden;
6+
}
7+
8+
.header {
9+
display: flex;
10+
align-items: center;
11+
justify-content: space-between;
12+
padding: 8px 16px;
13+
border-bottom: 1px solid var(--rp-c-divider);
14+
}
15+
16+
.label {
17+
display: flex;
18+
align-items: center;
19+
gap: 8px;
20+
font-size: 13px;
21+
font-weight: 600;
22+
color: var(--rp-c-text-2);
23+
}
24+
25+
.icon {
26+
display: inline-flex;
27+
align-items: center;
28+
width: 18px;
29+
height: 18px;
30+
transition: opacity 0.2s ease;
31+
32+
svg {
33+
width: 100%;
34+
height: 100%;
35+
}
36+
}
37+
38+
.iconFadeIn {
39+
opacity: 1;
40+
}
41+
42+
.iconFadeOut {
43+
opacity: 0;
44+
}
45+
46+
.copyBtn {
47+
display: flex;
48+
align-items: center;
49+
gap: 4px;
50+
padding: 4px 10px;
51+
font-size: 12px;
52+
font-weight: 500;
53+
color: var(--rp-c-text-2);
54+
background: transparent;
55+
border: 1px solid var(--rp-c-divider);
56+
border-radius: 6px;
57+
cursor: pointer;
58+
transition:
59+
color 0.2s,
60+
border-color 0.2s,
61+
background-color 0.2s;
62+
63+
&:hover {
64+
color: var(--rp-c-text-1);
65+
border-color: var(--rp-c-text-3);
66+
background-color: var(--rp-c-bg-mute);
67+
}
68+
}
69+
70+
.body {
71+
padding: 14px 16px;
72+
font-size: 14px;
73+
line-height: 1.7;
74+
color: var(--rp-c-text-1);
75+
font-family: var(--rp-font-family-mono);
76+
white-space: pre-wrap;
77+
word-break: break-all;
78+
}

0 commit comments

Comments
 (0)