Как мне проверить этот компонент без состояния с энзимом и шуткой?

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. Это звучит как хороший кандидат для тестирования снимков . Идея заключается в том, что вы настраиваете свои реквизиты, запускаете тест, который создаст файл снимка, который вы фиксируете, и исследуете сериализованный 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();
  });
}