# @cucumber/react 中文文档

规范地址：https://npmcn.com/package/%40cucumber/react/

版本：19\.2\.0
npm 元数据更新时间：2025-09-17T21:16:57.860Z
中文译文更新时间：2026-11-11T04:27:07.960Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40cucumber/react
原文对照：https://npmcn.com/package/%40cucumber/react/?lang=original
项目主页：https://github.com/cucumber/cucumber#readme
源码仓库：https://github.com/cucumber/cucumber

弃用说明：This package is now published under @cucumber/react-components

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：360 kB，337 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：20 个
- peer 依赖：react ~17，react-dom ~17
- 首次发布：2020-01-10T13:21:07.587Z
- 最新版本发布：2022-03-25T09:18:59.257Z
- 近 30 天下载量：13072（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：38（近 12 个月 0 个）

## 中文简介

木瓜的反应组件

## 安装

```sh
npm install @cucumber/react
```

也可以使用：`pnpm add @cucumber/react`、`yarn add @cucumber/react`、`bun add @cucumber/react`

## README

# 木瓜反应

Cucumber-React是一组用于渲染Gherkin文档和Cucumber结果的React组件.

## 截图

![Examples Tables](https://npmcn.com/package/%40cucumber/react/screenshots/examples-tables.png)

## 使用量

以上截图的源代码为:

```jsx
<EnvelopesWrapper envelopes={envelopes}>
  <GherkinDocumentList />
</EnvelopesWrapper>
```

这个 [`<GherkinDocumentList>`](https://npmcn.com/package/%40cucumber/react/src/components/app/GherkinDocumentList.tsx) 反应组件, 手风琴 [`<GherkinDocument>`](https://npmcn.com/package/%40cucumber/react/src/components/gherkin/GherkinDocument.tsx)。 。 。 .

这个 `<GherkinDocument>` 反应组件和任何嵌入其中的组件(例如: [`<Scenario>`](https://npmcn.com/package/%40cucumber/react/src/components/gherkin/Scenario.tsx))可以独立化.

## `<GherkinDocument>` 特性

这个 `<GherkinDocument>` 反应组件以单个即时 `gherkinDocument` 道具 (英语). 数值必须是 [Gherkin 文档](https://npmcn.com/package/cucumber-messages/messages.md#io.cucumber.messages.GherkinDocument) 对象. 你可以用这个 [盖克金](https://npmcn.com/package/gherkin) 解析器生成一个 `GherkinDocument` 对象.

默认情况下 `<GherkinDocument>` 组件不会显示任何有色结果,因为 `GherkinDocument` 消息对象不包含结果,只包含 [辅助](https://en.wikipedia.org/wiki/Abstract_syntax_tree) 页:1. 对于结果不重要的简单使用案件来说,这是很好的.

制作 `<GherkinDocument>` 成果和重点 [木瓜表达式参数](https://cucumber.io/docs/cucumber/cucumber-expressions/) 参数必须嵌入到一个 [`<Wrapper>`](https://npmcn.com/package/%40cucumber/react/src/components/app/Wrapper.tsx) 组件.

## 样式

标准造型来自用 `CucumberReact` 组件(sans-props)。 有几种方法可以对组件应用不同的样式.

### 内建主题

这些是内在的主题:

-   `light` (默认)
-   `dark`
-   `auto` (荣耀您的操作系统偏好 光或黑暗)

你可以通过传出这些 `theme` 给 `CucumberReact` 组件 :

```jsx
<CucumberReact theme="dark">
  <GherkinDocument />
</CucumberReact>
```

### 自定义主题

也可以提供少量CSS的自有主题. 通过 `CucumberReact` 组件类名称而不是主题名称:

```jsx
<CucumberReact className="acme-widgets">
  <GherkinDocument />
</CucumberReact>
```

在您的 CSS 为 `acme-widgets` 类,您可以覆盖支持 [自定义属性](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) 价值观。 以下是驱动内置"黑暗"主题的CSS:

```css
.darkTheme {
  --cucumber-background-color: #1d1d26;
  --cucumber-text-color: #c9c9d1;
  --cucumber-anchor-color: #4caaee;
  --cucumber-keyword-color: #d89077;
  --cucumber-parameter-color: #4caaee;
  --cucumber-tag-color: #85a658;
  --cucumber-docstring-color: #66a565;
  --cucumber-error-background-color: #cf6679;
  --cucumber-error-text-color: #222;
  --cucumber-code-background-color: #282a36;
  --cucumber-code-text-color: #f8f8f2;
  --cucumber-panel-background-color: #282a36;
  --cucumber-panel-accent-color: #313442;
  --cucumber-panel-text-color: #f8f8f2;
}
```

### 自定义样式

要对造型进行更多的控制,您可以覆盖单个组件使用的CSS.

假设你想做一些完全不同的 与医生字符串的打字。 在你自己的CSS中,你可能会写出诸如:

```css
.acme-docstring {
  font-weight: bold;
  font-style: italic;
  background-color: black;
  color: hotpink;
  text-shadow: 1px 1px 2px white;
  padding: 10px;
}
```

那么,你可以提供 `customRendering` 给 `CucumberReact` 组件,其形式为: 宣布您要覆盖哪个类名称以及使用什么对象:

```jsx
<CucumberReact customRendering={{
  DocString: {
    docString: 'acme-docstring'
  }
}}>
  <GherkinDocument />
</CucumberReact>
```

有些部件有多种型式钩子——例如: `<Tags>` 组件有: `tags` 列表的分类名称,以及 `tag` 每个项目的分类名称。 在这种情况下,你可以只提供您想要更改的自定义类名称,任何省略的都会像正常一样取出内置的样式.

### 自定义渲染

要完全改变某些组件的渲染,你可以有选择地提供自己的组件执行,而不是内置执行.

保留 Doc 字符串示例, 您可以使用相同的 `customRendering` 道具,但这次你不是提供类名的对象,而是提供反应功能组件,赋予你对渲染的全部控制:

```jsx
<CucumberReact customRendering={{
  DocString: (props) => (
    <>
      <p>I am going to render this doc string in a textarea:</p>
      <textarea>{props.docString.content}</textarea>
    </>
  )
}}>
  <GherkinDocument />
</CucumberReact>
```

在提供自有组件的每一种情况下,它都会得到与默认组件相同的道具,加上两个:

-   `styles` - 默认样式的类名称, 如果有道理, 您仍可将这些名称应用到您的自定义组件中
-   `DefaultRenderer` - 默认反射组件, 有用, 如果您只想为某些情况提供自己的渲染, 否则会回到默认渲染( 不要忘记通过道具)

## 构建/ 黑客

安装依赖关系

```
npm install
```

运行测试

```
npm test
```

二. 互动发展

```
npm run storybook
```

## 想法

### `ScenarioList` 组件

一个组件,可以生成一个情景列表(可能来自多个文件,被标记等过滤).

这一组成部分可用于在第三方工具中提出相关设想,例如: JIRA, Conference 和各种支持插件的问题跟踪器.

### 连接 JIRA

配置一个 regexp 和 url 函数, 标记将作为 JIRA 发行链接提供

### 搜索

通过标签搜索,但也通过文本搜索. 可以使用 [http://elsticlunr.com/ (中文(中国大陆) )](http://elasticlunr.com/) 或者说 [https://lunrjs.com/ (中文(简体) )](https://lunrjs.com/) - 或者它可以简单地在一系列 `GherkinDocument` 留言.

### 搜索结果

下方显示的每个情景, 按特征文件分组 。 特征描述是"相撞", (除非它包含搜索术语)但可以打开.

### 过滤/排序

-   通过标签
-   按持续时间(找到慢时间)
-   按地位分列
-   (更新时间戳) - 不包括旧的
-   由闪闪发光

### 标记搜索

-   为所有标签绘制标签云
    -   大小: 计数
    -   颜色:通过/失败/未定义

### 点播数据

对于大型报告(尤其是有截图),可能太重而无法将全部存储在浏览器中. 图形用户界面应要求请求当前文件的数据。 图形用户界面还应当能够过滤 什么样的事件 它想要。 例如,要渲染初始屏幕.

### 服务器/ App

应方便用. 只要运行应用程序(Electron). 它将创建一个命名的管子 在那里 它会听。 这里写的东西被直接写到React应用(没有网络口袋, 过程相同). 这个应用可以相当小.

### 重运行测试

添加一个消息来代表一个运行的配置+cwd+env,这样GUI就可以重新运行. 配置基本上是命令行选项. 它们可以在"gui"中被修改. 在文件更改上重运行也可以设置. 这让整个DX变得简单.

### 警报

应用程序可以使用OS发送屏幕消息( 自动测试类似)

## 常见问题

### @cucumber/react 是什么？

木瓜的反应组件注意：该包已被作者标记为弃用——This package is now published under @cucumber/react-components

### 如何安装 @cucumber/react？

在项目目录运行 npm install @cucumber/react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（~17）、react-dom（~17）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @cucumber/react 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @cucumber/react 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @cucumber/react 可以商用吗？

@cucumber/react 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @cucumber/react 的下载量有多少？

根据 npm 官方下载统计，@cucumber/react 在 2026/10/11 – 2026/11/09 这 30 天内被下载 13,072 次，日均约 436 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @cucumber/react 还在维护吗？

最新版本 19\.2\.0 发布于 2022/03/25（4 年前）；至今共发布 38 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/01/10。作者已将其标记为弃用，新项目建议寻找替代方案。