如何在测试时正确模拟 useSelector 挂钩以返回正确的值？答案

【问题标题】：How to properly mock useSelector hook to return correct values while testing?如何在测试时正确模拟 useSelector 挂钩以返回正确的值？
【发布时间】：2021-01-18 08:15:39
【问题描述】：

我有一个在渲染时多次调用 useSelector 的函数。在模拟我使用的选择器时：

jest.spyOn(Redux, 'useSelector').mockReturnValueOnce(data).mockReturnValueOnce(moreData);

这改变了我的组件中调用钩子的顺序。我也尝试过创建一个模拟商店并将其发送到测试中的渲染组件中：

const state = { userGuid: 'testGuid', user };
const store = mockStore(state);
jest.spyOn(Redux, 'useSelector').mockImplementation(() => store.getState());
const { getByTestId } = wrappedRender(ProfileScreen, mockProps, { store });

但这会将数据包装在我的组件无法解构的额外对象中。

到目前为止，我找不到任何其他方法来模拟多个 useSelector 调用的返回值，而无需更改调用的钩子的顺序。任何帮助表示赞赏。

【问题讨论】：

标签： javascript reactjs react-native unit-testing jestjs

【解决方案1】：

依赖mockReturnValueOnce 多次调用是不行的，因为顺序可能会改变。无论useSelector 被调用多少次，下面的代码都只会返回存根状态。

  import * as redux from 'react-redux'

  const user = {
    id: 1,
    name: 'User',
  }

  const state = { user }

  jest
    .spyOn(redux, 'useSelector')
    .mockImplementation((callback) => callback(state))

【讨论】：