Question

尝试编写一个确保调用handleClick()的测试，但我收到以下错误：TypeError: Cannot read property '_isMockFunction' of undefined。

这是我正在测试的组件（主要是），以及我使用Jest和Enzyme运行的测试代码。

import React from 'react';
import localize from '../data/Localize';
import translations from './translations';

class Category extends React.Component {
  constructor(props) {
    super(props);
  }

  handleClick(productInfo) {
    // do stuff
  }

  render() {
    return (
      <div>
        <a
          onClick={this.handleClick.bind(this, productInfo)}
        >
      </div>
    );
  }
}

export default localize(Category, translations);

localize根据状态返回给定语言的组件。

import React from 'react';
import { Provider } from 'react-redux';
import {
  render,
  mount,
} from 'enzyme';
import configureStore from 'store';
import { setLocale } from 'actions';
import { locales } from 'test/testUtils';
import Category from '../Category';

describe(`Category Component`, () => {
  for (const locale of locales) {
    const store = configureStore();
    store.dispatch(setLocale(locale));

    it(`calls handlesClick in ${locale}`, () => {
      const handleClick = jest.spyOn(Category.prototype, `handleClick`);

      const wrapper = mount(
        <Provider store={store}>
          <Category />
        </Provider>
      );

      wrapper.update();
      wrapper.find(`a`).simulate(`click`);
      expect(handleClick).toHaveBeenCalled();
    });
  }
});

组件将正确传递快照并将它们传出。但是，我没有运气这个测试。如何让Jest / Enzyme验证handleClick()是否被调用onClick？

Answer 1

您需要两次导出组件。这样一来，您的应用程序便可以按预期的方式运行（如果使用redux，则可以使用本地化或连接），然后再次如此，您可以测试组件，而不会使导出的组件的范围与您要测试的组件的范围冲突

尝试一下：

export class Category extends React.Component {}

在测试中，将该组件作为对象导入：

import { Category } from '../Category';

Jest Enzyme返回“TypeError：无法读取未定义的属性'_isMockFunction'

1 个答案: