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

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

问题

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

解决办法

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

安装

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

参见 MUI 驱动指南 用于实例.

示例

1. 使用 MUI 创建小组件并指定 data-testid 与您想要与元素交互的值 :

   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 驱动程序描述计数显示和按钮 :

   import { HTMLSpanDriver } from '@atomic-testing/component-driver-html';
   import { ButtonDriver } from '@atomic-testing/component-driver-mui-v5';
   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 使该组成部分成为组成部分并与它相互作用:

   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。 。 。 .