Question

DisplayTypes.tsx

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;

在这里，我正在为“ appTypes”中的每个值显示一个复选框，并将“ isChecked”值传递给每个复选框。

测试覆盖率显示未覆盖这些行。我想用酵素和玩笑来测试这部分：

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

我该怎么做？

Answer 1

当您描述检查isChecked条件时，我假设您正在根据它与每个Checkbox的绑定方式进行验证。这听起来像是snapshot testing的理想人选。这里的想法是您设置道具，运行测试以创建提交的快照文件，并检查快照文件中的序列化JSON。如果组件输出更改，则expect(tree).toMatchSnapshot()断言将失败，此时，您可以修复破坏测试的更改，或者如果其输出正确，则更新快照。

DisplayTypes.spec.tsx

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();
  });
}

如何用酶和笑话测试这种无状态组件？

1 个答案: