用酶和茉莉花测试高阶成分

Question

使用 Jasmine 和 Enzyme 进行测试，我一直在尝试测试连接到 redux 的 HOC。以下面的 HOC 为例：

import React, { Component } from 'react';
import { connect } from 'react-redux';

const WithAreas = (WrappedComponent) => {
  class WithAreasComponent extends Component {
    constructor(props) {
      super(props);    
    }    

    shouldRenderWrappedComponent(userObj) {
      return !!userObj.areas;
    }

    render() {
      const { userObj } = this.props;

      return shouldRenderWrappedComponent(userObj)
        ? <WrappedComponent {...this.props} />
        : null;
    }
  }

  function mapStateToProps(state) {
    const { info } = state;
    const { userObj } = info.userObj;

    return { userObj };
  }

  return connect(mapStateToProps)(WithAreasComponent);
};

export default WithAreas;

假设我想测试这个 HOC 以检查包装的组件是否正在根据 userObj 进行渲染。我想过做一个模拟组件并将其传递给 HOC，但这不起作用。

Test.js 文件：

import React from 'react';
import { shallow } from 'enzyme';
import jasmineEnzyme from 'jasmine-enzyme';

import WithAreas from './';

class MockComponent extends React.Component {
  render() {
    return(
      <div> MOCK </div>
    );
  }
}

function setup(extraProps) {
  const props = {
   info: {
    userObj: {
     id: 'example1'
    }
   },
  };

  Object.assign(props, extraProps);

  const WithAreasInstance = WithAreas(MockComponent);
  const wrapper = shallow(<WithAreasInstance {...props} />);

  return {
    props,
    wrapper
  };
}

fdescribe('<WithAreas />', () => {
  beforeEach(() => {
    jasmineEnzyme();
  });
  it('should render the Mock Component', () => {
    const { wrapper } = setup();
    expect(wrapper.find(MockComponent).exists()).toBe(true);
  });
});

但它给了我这个错误：

TypeError: (0 , _.WithAreas) is not a function at setup (webpack:///src/user/containers/WithAreas/test.js:20:47 <- src/test_index.js:9:18060087) at UserContext.<anonymous> (webpack:///src/user/containers//WithAreas/test.js:34:24 <- src/test_index.js:9:18060822) 我究竟做错了什么？或者您会推荐什么方法？

感谢您提供的任何帮助。

Answer 1

您没有正确导入测试中的 HOC。您已将其设置为默认导出，但正在使用命名导出解构。

在你的测试文件中试试这个：

import WithAreas from './';

另外，不要忘记将 store 传递给您的组件进行测试，否则 connect HOC 将无法按预期工作。

shallow(
  <Provider store={store}>
    <WithAreasInstance ...>
  </Provider>)