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

时间:2020-10-02 16:32:24

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

我有一个在渲染时多次调用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调用的返回值。任何帮助表示赞赏。

1 个答案:

答案 0 :(得分:3)

多次依赖 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))