@forgebook /测试

从包的 Forgebook 故事，所以写故事就是写它 测试:

• 在浏览器中 （剧作家），每个故事和变体（主题，对比，样式表，窄宽度）一个测试：它 由于页面中出现错误而失败 斧 违反WCAG 2.2 A和AA 元素从父元素中溢出，或者覆盖层在故事框架之外保持开放；
• 视觉与参考截图相比，相同的帧，在剧作家容器中，所以字体和渲染 匹配无处不在;
• 在服务器上 （Vitest），每个故事呈现为字符串，因此没有组件读取 window 或者 document 虽然它 渲染，并根据其参数检查其控件。

要求: forgebook ····· @playwright/test 1.64+·Vitest 5·Docker用于视觉测试· 麻省理工学院的许可证

npm install --save-dev @forgebook/testing @playwright/test vitest

设置测试

测试在包本身上运行 故事的来源 ( StorySource 它的目录列表)，在他们的一个文件夹 自己的。下面的例子是一个包，它的故事是 src/*.stories.tsx 谁的来源是 stories/index.ts：

// stories/index.ts
/// <reference types="@forgebook/story-format/client" />
import type { StorySource } from "@forgebook/story-format/source";

import files from "../src/*.stories.tsx?forgebook-files";

export const source: StorySource = {
  id: "acme-ui",
  name: "Acme UI",
  files: [files],
  sheets: { required: [], theme: [], restyled: [] }
};

在浏览器中

六个文件 test/stories/． 故事在哪里，与来源的模式相同：

// test/stories/storyFiles.ts
import { join } from "node:path";

import type { StoryFilesOptions } from "@forgebook/testing/story-files";

export const STORY_FILES: StoryFilesOptions = {
  sourceId: "acme-ui",
  name: "Acme UI",
  root: join(import.meta.dirname, "..", "..", "stories"),
  patterns: ["../src/*.stories.tsx"]
};

文件夹和端口，然后是剧作家配置和规格：

// test/stories/testServer.ts
import type { StoryTestServer } from "@forgebook/testing/playwright";

export const STORY_SERVER: StoryTestServer = { dir: import.meta.dirname, port: 41831, browserPort: 41832 };

// test/stories/playwright.config.ts
import { storyTestConfig } from "@forgebook/testing/playwright";

import { STORY_SERVER } from "./testServer";

export default storyTestConfig(STORY_SERVER);

// test/stories/stories.spec.ts
import { storyBrowserTests } from "@forgebook/testing/browser";

import { STORY_FILES } from "./storyFiles";

storyBrowserTests(STORY_FILES);

测试打开的帧页面，以及为其提供服务的Vite配置：

<!-- test/stories/frame.html -->
<!doctype html>
<html lang="en">
  <head><meta charset="utf-8" /><title>Stories</title></head>
  <body><div id="root"></div><script type="module" src="./frame.tsx"></script></body>
</html>

// test/stories/frame.tsx
import "@forgebook/testing/fonts.css";
import { mountFrame } from "@forgebook/react/frame";

import { source } from "../../stories/index";

const root = document.getElementById("root");
if (root !== null) void mountFrame(root, { sources: [source] });

// test/stories/vite.config.ts
import { react } from "@forgebook/react/vite";
import { storyTestViteConfig } from "@forgebook/testing/vite";

export default storyTestViteConfig(import.meta.dirname, react());

然后 npx playwright install chromium 一次, playwright test -c test/stories/playwright.config.ts 启动 框架页面，并为每个故事和变体(浅色、深色，都有更多的对比，窄宽度，和 结构视图)，通过运行它们的包管理器启动Vite (vite 在 testServer.ts 的名字 另一个命令)。一个打破规则的故事，其所有变体都失败了； storyBrowserTests 也需要 check的规则 包本身在每一帧上运行。

在服务器上

一个测试文件和一个带有目录插件的Vitest配置，该插件读取源文件 ?forgebook-files 进口:

// test/stories/stories.server.test.tsx
import { reactRenderer } from "@forgebook/react/renderer";
import { storyServerTests } from "@forgebook/testing/server";

import { source } from "../../stories/index";

storyServerTests(source, { renderer: reactRenderer });

// vitest.config.ts
import { react } from "@forgebook/react/vite";
import { forgebookPlugin } from "forgebook/vite";
import { defineConfig } from "vitest/config";

export default defineConfig({
  plugins: [forgebookPlugin({ framework: react() })],
  test: { include: ["test/**/*.test.tsx"] }
});

storyServerTests 也需要 wrap第二次遍历，每个故事都在一个装饰器（一个带有分部的提供商）中 翻译目录)，它的HTML检查。

限制了今天

• 视觉测试(visual.spec.ts， visualTestConfig， startVisualBrowser)比较参考系 在剧作家容器中的图像，所以他们需要Docker；本指南还没有涵盖它们，它们模块的TSDoc 所做的。

导入和命令

更多: Forgebook的自述.