如何正确地模拟多个 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 组件实现你的商店非常简单。这是 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
})

Answer 2

import * as redux from 'react-redux';
...
  beforeEach(() => {
    jest
      .spyOn(redux, 'useSelector')
      .mockReturnValueOnce(xxxx)
      .mockReturnValueOnce(yyyy);
  });

如何正确地模拟多个 useSelector 钩子

how properly mock multiple useSelector hooks

unit-testing

reactjs

react-testing-library