# @atomic-testing/react-18 中文文档

规范地址：https://npmcn.com/package/%40atomic-testing/react-18/

版本：0\.104\.0
npm 元数据更新时间：2026-08-20T13:21:13.733Z
中文译文更新时间：2026-11-07T03:26:32.954Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：7.6 kB，8 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：@testing-library/dom \>=10\.4\.1，@testing-library/react \>=16\.2\.0，@testing-library/user-event \>=14\.0\.0，react \>=18\.0\.0 \<19\.0\.0，react-dom \>=18\.0\.0 \<19\.0\.0
- 首次发布：2025-06-18T02:53:38.044Z
- 最新版本发布：2026-08-20T13:21:13.028Z
- 近 30 天下载量：3225（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：30（近 12 个月 22 个）

## 中文简介

用于整合的适应器 [原子试验](https://atomic-testing.dev/) 与 [反应 18](https://react.dev/)它将反演组件映射到核心场景部分 API.

## 安装

```sh
npm install @atomic-testing/react-18
```

也可以使用：`pnpm add @atomic-testing/react-18`、`yarn add @atomic-testing/react-18`、`bun add @atomic-testing/react-18`

## README

# @ 原子测试/反应 18

用于整合的适应器 [原子试验](https://atomic-testing.dev/) 与 [反应 18](https://react.dev/)。 。 。 . 它将 React 组件映射到核心场景部分 API.

## 问题

用第三方组件库构建的 UIs 写入可维护测试 比如材料UI或"靴子"可能很棘手. 关于如何测试的文件 通常缺乏与这些组件的通信,因此测试很容易结束 结合执行细节。 随着申请的增长 你需要你的 测试在不不断重新工作的情况下进行.

## 解决办法

[原子试验](https://atomic-testing.dev/) 提供与第三方和 跨越不同测试环境的第一党组件。 重点是 **可续用性**, (中文(简体) ), **可替换性** 财务报告和审定财务报表 **适应性**,让你建造 高级测试策略,既适用于DOM,也适用于终端测试.

## 安装

```bash
npm install @atomic-testing/core @atomic-testing/react-18 --save-dev
```

参见 [反应整合指南](https://atomic-testing.dev/) 用于实例.

## 示例

如果您使用MUI/Matrial UI组件,请查看 [@ 原子测试/组件- 司机- mui- v7](https://www.npmjs.com/package/@atomic-testing/component-driver-mui-v7) 用于指定示例的软件包.

1.  与此 React 适配器一起安装核心库和基本的 HTML 驱动程序 :
    
    ```bash
    npm install @atomic-testing/core @atomic-testing/react-18 @atomic-testing/component-driver-html --save-dev
    ```
    
2.  创建小组件并指定 `data-testid` 与您想要与元素交互的值 :
    
    ```tsx
    import { useState } from 'react';
    
    export function Counter() {
      const [count, setCount] = useState(0);
      return (
        <div>
          <span data-testid='count'>{count}</span>
          <button data-testid='increment' onClick={() => setCount(c => c + 1)}>
            Increment
          </button>
        </div>
      );
    }
    ```
    
3.  定义 a `ScenePart` 使用 HTML 驱动程序描述计数显示和按钮 :
    
    ```ts
    import { HTMLButtonDriver, HTMLElementDriver } from '@atomic-testing/component-driver-html';
    import { byDataTestId, ScenePart } from '@atomic-testing/core';
    
    export const counterScenePart = {
      count: { locator: byDataTestId('count'), driver: HTMLElementDriver },
      increment: { locator: byDataTestId('increment'), driver: HTMLButtonDriver },
    } satisfies ScenePart;
    ```
    
4.  使用 `createTestEngine` 使该组成部分成为组成部分并与它相互作用:
    
    ```ts
     import { createTestEngine } from '@atomic-testing/react-18';
    
     import { Counter } from './Counter';
     import { counterScenePart } from './counterScenePart';
    
     test('increments when the button is clicked', async () => {
       const engine = createTestEngine(<Counter />, counterScenePart);
    
       expect(await engine.parts.count.getText()).toBe('0');
       await engine.parts.increment.click();
       expect(await engine.parts.count.getText()).toBe('1');
    
       await engine.cleanUp();
     });
    ```
    

更深入的信息,访问 [https://原子测试.dev](https://atomic-testing.dev/)。 。 。 .

## 公共 API 稳定性

这个包的稳定表面是它的 `.` 桶出口,在 由被害者进行机器检查 [API 提取器](https://api-extractor.com/) 报告 [`etc/react-18.api.md`](https://github.com/atomic-testing/atomic-testing/blob/main/packages/react-18/etc/react-18.api.md)。标记的出口 `@internal` 为: 不是保证的一部分。 见 [1.0 API 冻结和演变政策](https://github.com/atomic-testing/atomic-testing/blob/main/agent-docs/adr/006-1.0-api-freeze-and-evolution.md)。 。 。 .

## 常见问题

### @atomic-testing/react-18 是什么？

用于整合的适应器 原子试验 与 反应 18它将反演组件映射到核心场景部分 API\.

### 如何安装 @atomic-testing/react-18？

在项目目录运行 npm install @atomic-testing/react-18，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@testing-library/dom（\>=10\.4\.1）、@testing-library/react（\>=16\.2\.0）、@testing-library/user-event（\>=14\.0\.0）、react（\>=18\.0\.0 \<19\.0\.0）、react-dom（\>=18\.0\.0 \<19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @atomic-testing/react-18 支持 TypeScript 吗？

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

### @atomic-testing/react-18 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @atomic-testing/react-18 可以商用吗？

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

### @atomic-testing/react-18 的下载量有多少？

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

### @atomic-testing/react-18 还在维护吗？

最新版本 0\.104\.0 发布于 2026/08/20（2 个月前）；至今共发布 30 个版本，其中过去 12 个月发布了 22 个；首次发布于 2025/06/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。