验证子组件的 prop 是 Enzyme 中的某个函数

Question

当我在测试中不断引用我的子组件并且我想检查进入子组件的道具之一是否是某个函数时，我一直被告知子组件在 Jest 中未定义，尽管事实上它是导入的，并且在组件呈现时未定义。组件代码如下：

class ActivityItemsDropdown extends React.Component {
  constructor(props) {
    super(props);
    this.state = { id: '' };
  }
  ...(various methods here)...
  render() {
  const {
    // these props are being dispatched from a redux state
    selectedOption,
    selectNewOption,
    onFilterChange,
    loanDates,
    loans,
    intl,
    } = this.props;
  return (
    <div className="dls-accent-gray-03-bg flex flex-align-center">
      <div className="col-md-3 margin-l margin-t pad-0">
        <Dropdown
          id="statements-dropdown"
          options={getOptions(loanDates, loans, intl)}
          value={selectedOption}
          onChange={index => onStatementChange(index,
          loanDates,
          loans,
          selectNewOption,
          onFilterChange)}
          label={intl.formatMessage({ id: 'loanActivityAndHistory.statementDropdown.view' })}
          getOptionLabel={({selectedLabel: label}) => {
          const lines = label.split('-');
          return { firstLine: lines[0], secondLine: lines[1] };
        }}
      />
    </div>
    {selectedOption === CUSTOM
      ? <ActivityItemsDatePicker applyCustomDates={onFilterChange} />
      : ''}
    </div>
    );
   }
  }

Jest 想要测试的未发现行是 Dropdown 子组件中的 getOptionLabel 属性中的两行。 Dropdown 组件是从我无权访问的 API 导入的，因此我无法看到 Dropdown 组件的内部情况。

在我的 Jest 文件（也使用 Enzyme）中，测试如下：

const testRecentActivityWhenCurrentStatementPresent = async () => {
  const wrapper = await shallow(<ActivityItemsDropdown
    selectedOption="1"
    selectNewOption={selectNewOption}
    onFilterChange={onFilterChange}
    loanDates={loanDates}
    loans={loans}
    intl={intl}
  />);

  const twoLineLabel = ({selectedLabel: label}) => {
    const lines = label.split('-');
    return { firstLine: lines[0], secondLine: lines[1] };
  }

  const dropdown = wrapper.find('#statements-dropdown');
  expect(dropdown.props().getOptionLabel).to.equal(twoLineLabel);
  dropdown.simulate('change', { value: 'RECENT_ACTIVITY' });
  expect(selectNewOption).toHaveBeenCalledWith({ value: 'RECENT_ACTIVITY' });
  expect(onFilterChange).toHaveBeenCalledWith('Jun 15, 2018', moment().format('MMM DD, YYYY'));
};

测试在抓取下拉列表时没有问题，因此它可以模拟更改，但在我尝试查找它具有的道具时发现下拉列表“未定义”。

在我的组件文件和测试文件中，我从正在使用的 API 导入 Dropdown 组件（访问 ActivityItemsDropdown 组件文件中的 Dropdown 组件没有问题）。

我在 Jest 中收到的错误是：

TypeError: Cannot read property 'equal' of undefined

  175 |
  176 |   const dropdown = wrapper.find('#statements-dropdown');
> 177 |   expect(dropdown.props().getOptionLabel).to.equal(twoLineLabel);
      |   ^

抱歉，这真的很长，但我已经玩了两个小时了，此时我已经束手无策了。

Answer 1

我不确定您使用的是哪个断言/预期库，但看起来您从 Enzyme 文档中获取了一个示例。

Enzyme 在他们的示例中使用Chai expect，而您应该使用Jest expect。

expect(dropdown.props().getOptionLabel).toEqual(twoLineLabel);