如何正确模拟多个 useSelector 钩子

Question

我的组件有多个选择器：

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
}))

在这种情况下它真正嘲笑的是哪个选择器？

Answer 1

不要嘲笑选择器。您想要测试 Redux 和 React 组件之间的集成，而不是选择器的 Redux 实现。如果您使用的话react-testing-library，劫持该render()方法并使用 Redux Provider 组件实现您的存储非常简单。以下是设置可重用渲染函数的文档。

这是考虑到用户而重新编写的测试：

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

// Explanation of behavior
it('displays data when ready', { 
  renderWithProviders(<YourComponent />, { 
    preloadedState: {
      someSlice: {
        dataready: true // <-- Pass data for selector in store slice
      }
    }
  })

  // Check that something shows based on selector
  expect(screen.getByTestId('some-testId')).toBeInTheDocument()
})