@ 原子测试/反应19

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

最快的开始 : 运行 npm create atomic-testing@latest 要脚手架一个工作 反应测试设置为您, 而不是用手接接下面的步数 .

问题

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

解决办法

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

安装

npm install @atomic-testing/core @atomic-testing/react-19 --save-dev

参见 反应整合指南 用于实例.

示例

如果您使用MUI/Matrial UI组件,请查看 @ 原子测试/组件- 司机- mui- v7 用于指定示例的软件包.

1. 与此 React 适配器一起安装核心库和基本的 HTML 驱动程序 :

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

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

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

   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 使该组成部分成为组成部分并与它相互作用:

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

公共 API 稳定性

这个包的稳定表面是它的 . 桶出口,在 由被害者进行机器检查 API 提取器 报告 etc/react-19.api.md。标记的出口 @internal 为: 不是保证的一部分。 见 1.0 API 冻结和演变政策。 。 。 .