如何正确模拟多个 useSelector 钩子答案

【问题标题】：how properly mock multiple useSelector hooks如何正确模拟多个 useSelector 钩子
【发布时间】：2021-01-28 21:57:06
【问题描述】：

我的组件有多个选择器：

import { useSelector } from 'react-redux'
...
const data1 = useSelector(xxxxx)
const data2 = useSelector(yyyyy)

如何正确地模拟测试文件中的每一个？

import { useSelector } from 'react-redux'
jest.mock('react-redux', () => ({
    useSelector: jest.fn()
}))
....
useSelector.mockImplementation(() => ({
   dataready: true
}))

在这种情况下它真正模拟了哪个选择器？

【问题讨论】：

在这种情况下，它将模拟您的代码正在使用的useSelectors。
会是什么样子？

标签： reactjs unit-testing react-testing-library

【解决方案1】：

不要模拟选择器。你想测试 Redux 和 React 组件之间的集成，而不是选择器的 Redux 实现。如果您使用react-testing-library，那么劫持render() 方法并使用Redux Provider 组件实现您的商店非常简单。这是testing Connected Components 的文档。

这是您为用户重新编写的测试：

import { render } from '../../test-utils' // <-- Hijacked render

it('displays data when ready', { // <-- behavior explanation
  const {getByTestId} = render(<YourComponent />, { 
    initialState: {
      dataready: true // <-- Pass data for selector
    }
  })
  expect(getByTestId('some-testId')).toBeTruthy(); // <-- Check that something shows based on selector
})

【讨论】：

【解决方案2】：

您可以为每个要模拟的呼叫使用mockImplementationOnce。

import { useSelector } from 'react-redux'

jest.mock('react-redux', () => ({
    useSelector: jest.fn()
}))

// ...

useSelector
    .mockImplementationOnce(() => ({ dataready: true }))  // Mocks first call
    .mockImplementationOnce(() => ({ dataready: false })) // Mocks second call

【讨论】：