Фермент |Условно проверить на реквизит

Question

Я хочу проверить, что правильный компонент отображается, когда у опоры есть определенные значения true или false.

Вот код:

/* eslint-disable react/default-props-match-prop-types */
import React, { Fragment } from 'react';
import moment from 'moment';
import ILicense from 'dto/ILicense';

import Icon from 'components/Icon';

export interface Props {
  license?: ILicense;
}

// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
const LicenseInfo = <T extends object>({ license }: Props & T) => (
  <Fragment>
    {license ? (
      <Fragment>
        <div className="py-5 mx-3">
          {license.isValid? (
            <div>
              <Icon icon="check" className="fa-lg text-success mr-2" />
              License is Valid
            </div>
          ) : (
            <div>
              <Icon icon="exclamation-circle" className="fa-lg text-danger mr-2" />
              License has expired
            </div>
          )}
      </Fragment>
    ) : null}
  </Fragment>
);

LicenseInfo.defaultProps = {
  clientId: '',
  expiry: null,
  isValid: true,
};

export default LicenseInfo;

А здесьмой тестовый пример: If the prop isValid is true, рендеринг компонента Icon с пиктограммой prop check, иначе другой.

Вот мой тест:

  it('expect to show check Icon when license.isValid prop is true', () => {
    const wrapper = mount<LicenseInfo>(<LicenseInfo isValid="true">Test</LicenseInfo>);
    const check = wrapper.find(<Icon icon="check" />).props;
    console.log(check);
    expect(check).toBeTruthy();
  });

Проблема, которую я считаюв check.101 console.log это и получите это ReactWrapper {} ..

Есть идеи, как правильно это сделать ...?Спасибо !!

Answer 1

из документов Enzyme'e find() ожидайте, что будет пройдено EnzymeSelector.И это должно быть

1. CSS-подобный селектор (Icon[icon=check] в вашем случае)
2. имя конструктора (Icon)
3. отображаемое имя ('Icon')
4. объект со свойствами

Вы передаете туда элемент JSX, чтобы ничего не находить.

Поэтому я считаю, что

it('expect to show check Icon when license.isValid prop is true', () => {
  const wrapper = mount<LicenseInfo>(<LicenseInfo isValid="true">Test</LicenseInfo>);
  const iconType = wrapper.find(Icon).prop('icon');
  expect(iconType).toEqual('check');
});

должно работатьдля тебя

Answer 2

Я понятия не имею, почему вы делаете это

const check = wrapper.find(<Icon icon="check" />).props;

, если вам нужно проверить проп

it('expect to show check Icon when license.isValid prop is true', () => {
  const wrapper = mount<LicenseInfo>(<LicenseInfo isValid="true">Test</LicenseInfo>);
  const check = wrapper.props().isValid;
  console.log(check);
  expect(check).toBeTruthy();
});