用 mapStateToProps 开玩笑地测试 Promise 函数

Question

我有以下功能代码：

fetchDeviceList 在 mapStateToProps 的帮助下从 redux 存储绑定

  componentDidMount() {
    this.props.fetchDeviceList().then(() => {
      this.saveFirstClassifiedDeviceDetails();
    });
  }

我的测试代码如下所示：

 it('should pass', () => {
    const methodNameFake = jest.spyOn(
      DeviceListContainer.prototype,
      'fetchDeviceList'
    );

    const props = {
       data: []
    };

    const connectedComponent = mount(
      <DeviceListContainer {...props} />
    );

    expect(methodNameFake).toHaveBeenCalledTimes(1);
  });

但出现错误：TypeError: this.props.fetchDeviceList is not a function

TypeError: Cannot read property '_isMockFunction' of undefined

fetchDeviceList是一个直接通过mapStateToProps从redux绑定的函数

我需要了解测试此实现的最佳方法是什么？我是 React 新手，这是第一次尝试为 Promise 编写 Jest 测试用例，请多多包涵。

也试过了；

component = shallow(
      <DeviceListContainer
        {...props}
        fetchDeviceList={jest.fn().mockReturnValue(() => {
          return Promise.resolve('yo');
        })}
      />
    );

然后我得到错误：TypeError: this.props.fetchDeviceList(...).then is not a function

我们是否需要在测试时传递 props，这是正确的处理方式吗，因为 props 数据将在组件从 Redux 存储加载后立即生成。最好的方法是什么？

有人知道我做错了什么吗？

Answer 1

Redux 文档中有一节是关于测试 Redux 容器的。

https://redux.js.org/recipes/writing-tests#connected-components

在上面的链接中有所提及，但我建议简单地测试内部表示组件，而不是尝试测试 Redux 的 connect() 函数返回的高阶组件。

您对自己编写的单元测试代码感兴趣，即内部展示组件，而不是 Redux 团队编写的调用 connect() 的代码。

所以你已经拥有的东西应该可以工作，只要你直接测试DeviceList，而不是容器：

component = shallow(
  <DeviceList
    data={[]}
    fetchDeviceList={jest.fn().mockReturnValue(() => {
      return Promise.resolve('yo');
    })}
  />
);