Reactjs 如何用Ezyme和jest测试这个无状态组件？

DisplayTypes.tsx

---

如何执行此操作？

当您描述检查

isChecked

条件时，我假设您正在根据它如何绑定到每个

复选框进行验证。这听起来是一个很好的候选人。这里的想法是设置道具，运行将创建提交的快照文件的测试，并检查快照文件中的序列化JSON。如果组件输出发生更改，
expect（tree）.toMatchSnapshot（）
断言将失败，此时您可以修复中断测试的更改，或者更新快照（如果其输出正确）

DisplayTypes.spec.tsx

从“React”导入React；
从“反应测试渲染器”导入渲染器；
从“./displayTypes”导入显示类型；
描述（'displayTypes'，（）=>{
它（'在用户涂抹器类型中找到涂抹器类型时应进行检查'，（）=>{
//安排
常量道具={
应用程序类型：[……]，
更改：（）=>{}，
检查：错误，
用户分配的应用程序类型：[……]
};
//表演
常量树=渲染器
.create（）
.toJSON（）；
//断言
expect（tree.toMatchSnapshot（）；
});
}
isChecked
作为道具传入，然后从
.find（）
结果重新分配。可能想解决这个问题（尽管我怀疑它与问题有关）。
import * as React from 'react';
import Checkbox from '../../Shared/Checkbox/Checkbox';

const displayTypes = ({
  appTypes,
  changed,
  userAssignedApplicatorTypes
}: any) => {
  return appTypes.map((applicatorType: any) => {
    let isChecked = userAssignedApplicatorTypes.find(
        (application: any) => 
           application.applicatorTypeName === applicatorType.name
    );
    return (
        <Checkbox
            id={applicatorType.id}
            key={applicatorType.id}
            changed={changed.bind(null, applicatorType.name)}
            element={applicatorType.name}
            isChecked={isChecked}
        />
    );
  });
};

export default displayTypes;

    let isChecked = userAssignedApplicatorTypes.find(
        (application: any) =>
            application.applicatorTypeName === applicatorType.name
    );

import React from 'react';
import renderer from 'react-test-renderer';
import displayTypes from './displayTypes';

describe('displayTypes', () => {
  it('should check when applicator type is found in user applicator types', () => {
    // arrange
    const props = {
      appTypes: [ ... ],
      changed: () => {},
      isChecked: false,
      userAssignedApplicatorTypes: [ ... ]
    };

    // act
    const tree = renderer
      .create(<displayType {...props}></displayType>)
      .toJSON();

    // assert
    expect(tree).toMatchSnapshot();
  });
}