# @atomic-testing/component-driver-mui-v9 中文文档

规范地址：https://npmcn.com/package/%40atomic-testing/component-driver-mui-v9/

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

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

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

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

- 包体积（解压后）：743 kB，53 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：6 个
- peer 依赖：react \>=18\.0\.0，react-dom \>=18\.0\.0
- 首次发布：2026-06-28T02:03:52.846Z
- 最新版本发布：2026-08-20T13:19:30.174Z
- 近 30 天下载量：12981（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：20（近 12 个月 20 个）

## 中文简介

材料- UI v9 组件驱动程序

## 安装

```sh
npm install @atomic-testing/component-driver-mui-v9
```

也可以使用：`pnpm add @atomic-testing/component-driver-mui-v9`、`yarn add @atomic-testing/component-driver-mui-v9`、`bun add @atomic-testing/component-driver-mui-v9`

## README

# @ 原子测试/ 组件- 司机- mui- v9

构成部分驱动器 [材料界面](https://mui.com/) v9 组件. 组件驱动程序将简单的API用于单位测试或端-to-end测试,以便与MUI组件相互作用——如读取状态和设定值——因此测试工程师可以专注于测试流而无需跟踪内部MUI组件是如何工作的.

## 问题

材料UI在其组件后隐藏了复杂的标记. 没有专用的驱动程序 您的测试往往需要依赖 执行细节, 使它们随着您的应用增长而变得脆弱.

## 解决办法

本套件中的驱动程序会显示MUI部件的高级交互。 结合反应适配器,它们让你在DOM和端点测试中重新使用场景定义,重点是: **可续用性**, (中文(简体) ), **可替换性** 财务报告和审定财务报表 **适应性**。 。 。 .

## 安装

```bash
npm install @atomic-testing/core @atomic-testing/react-19 \
  @atomic-testing/component-driver-html @atomic-testing/component-driver-mui-v9 --save-dev
```

参见 [文档](https://atomic-testing.dev/) 用于使用模式和实例.

## 示例

1.  使用 MUI 创建小组件并指定 `data-testid` 与您想要与元素交互的值 :
    
    ```tsx
    import { useState } from 'react';
    
    import Button from '@mui/material/Button';
    
    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>
      );
    }
    ```
    
2.  定义 a `ScenePart` 使用 MUI 驱动程序描述计数显示和按钮 :
    
    ```ts
    import { HTMLSpanDriver } from '@atomic-testing/component-driver-html';
    import { ButtonDriver } from '@atomic-testing/component-driver-mui-v9';
    import { byDataTestId, ScenePart } from '@atomic-testing/core';
    
    export const counterScenePart = {
      count: { locator: byDataTestId('count'), driver: HTMLSpanDriver },
      increment: { locator: byDataTestId('increment'), driver: ButtonDriver },
    } satisfies ScenePart;
    ```
    
3.  使用 `createTestEngine` 使该组成部分成为组成部分并与它相互作用:
    
    ```ts
    import { createTestEngine } from '@atomic-testing/react-19';
    
    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/)。 。 。 .

## 常见问题

### @atomic-testing/component-driver-mui-v9 是什么？

材料- UI v9 组件驱动程序

### 如何安装 @atomic-testing/component-driver-mui-v9？

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

### @atomic-testing/component-driver-mui-v9 支持 TypeScript 吗？

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

### @atomic-testing/component-driver-mui-v9 支持 ESM 还是 CommonJS？

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

### @atomic-testing/component-driver-mui-v9 可以商用吗？

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

### @atomic-testing/component-driver-mui-v9 的下载量有多少？

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

### @atomic-testing/component-driver-mui-v9 还在维护吗？

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