Question

我有一个我想测试的组件。它看起来像这样 -

import * as React from 'react';
import { CATEGORY_TYPES } from '../../constants';

import './ResultCard.sass';

const ResultCard = ({ result, onSelectResult = null }) => {
  const { guid, category, postcode, condition } = result;
  const { value, image } = CATEGORY_TYPES.find(asset => asset.type === result.category);

  return (
    <article className="media result-card is-marginless" onClick={() => onSelectResult()}>
   <!-- omitted for brevity -->
    </article>
  );
};

export default ResultCard;

使用以下测试案例进行测试 -

import * as React from 'react';
import { shallow } from 'enzyme';

import { ResultCard } from '../../../src/components';
import { CATEGORY_TYPES } from '../../../src/constants';

describe('.ResultCard', () => {
  it('should render', () => {
    const { wrapper } = setup({});

    expect(wrapper.exists()).toBe(true);
  });
});

const setup = propOverrides => {
  const props = Object.assign(
    { result: { guid: '61934c1f-ce55-5cc7-e1d7-18b391fe7944', postcode: 'ab12 3cd', category: 'foo', condition: 'bar' } },
    propOverrides
  );
  const wrapper = shallow(<ResultCard {...props} />);
  return { wrapper };
};

但是我从测试运行中得到以下错误 -

  TypeError: Cannot read property 'value' of undefined

       7 |   const { guid, category, postcode, condition } = result;
       8 |   const { value, image } = CATEGORY_TYPES.find(asset => asset.type === result.category);
    >  9 |
      10 |   return (
      11 |     <article className="media result-card is-marginless" onClick={() => onSelectResult()}>
      12 |       <figure className="media-left">

我不确定如何将CATEGORY_TYPES周围的组件逻辑引入我的组件。

Answer 1

愚蠢的错误，我正在传递'foo'并希望在我的CATEGORY_TYPES数组中找到它，因为它不存在而无效

Jest / Enzyme - 无法阅读财产和价值＆＃39;未定义的

1 个答案: