React Redux 测试失败，因为它无法通过操作获取数据

Question

我正在尝试使用 Jest 和 Enzyme 测试我的智能组件，但它没有要呈现的数据，因为它应该是通过操作获取的。错误是：getTasks is not a function

Enzyme.configure({ adapter: new Adapter() });

describe('Main', () => {
  describe('when loading is true', () => {
    it('should render loading div', () => {
      const wrapper = mount(<Main.WrappedComponent loading={true} />);
      expect(wrapper.html()).toEqual('<div>Loading</div>');
      wrapper.unmount();
    });
  });
});

这是我正在尝试测试的组件，它通过操作获取数据，然后用它们做一些事情，但如果没有数据（loading === true），它只会呈现 <div> 与 "Loading" 文本。 getTasks() 只是 import 数据：

class Main extends React.Component {
  constructor(props) {
    super();
    this.handleData = this.handleData.bind(this);
    this.handleHigh = this.handleHigh.bind(this);
  }

  componentDidMount() {
    const { getTasks } = this.props;
    getTasks();
  }

  render() {
    const { data, loading } = this.props;
    if (!loading) {
      this.handleData(data);
      return (
          {data.map(task => {
            if (task.obj_status === 'active') 
              return (
               // Doing some stuff with data here
              );
    } else {
      return <div>Loading</div>;
    }
  }
}

const mapStateToProps = state => ({
  data: state.main.data,
  loading: state.main.loading
});

const mapDispatchToProps = dispatch => ({
  ...bindActionCreators(
    {
      getTasks: loadTasks,
      dispatch
    },
    dispatch
  )
});

export default withRouter(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(Main)
);

Answer 1

您需要将 getTasks 作为函数传入您的 props：

const wrapper = mount(<Main.WrappedComponent loading={true} getTasks={() => {}} />);

当 Enzyme 挂载时，它会调用 componentDidMount 并调用未定义的属性并爆炸

Answer 2

更好的解决方案是模拟函数：

const getTasksMock = jest.fn();
const wrapper = mount(<Main.WrappedComponent loading={true} getTasks={getTasksMock}/>);

然后你可以检查调用函数，例如：toHaveBeenCalled() https://jestjs.io/docs/en/expect.html#tohavebeencalled

React Redux 测试失败，因为它无法通过操作获取数据

React Redux Test failed because it can't fetch data throught action

javascript

reactjs

jestjs

enzyme

react-redux