Question

我有一个React应用程序，该应用程序使用react-redux，useSelector从存储中获取数据。 react组件具有

function PersonDataView() {
  const name= useSelector(state => state.data.name)
  const dob= useSelector(state => state.data.dob)
  const dispatch = useDispatch()
  const show= () => dispatch({type: 'SHOW'})
  const remove= () => dispatch({type: 'REMOVE'})
  return (
    <div>
      <h2>Person Details</h2>
     <div>
      <button onClick={show}>Show</button>
      <span aria-label="name">{name}</span>
      <span aria-label="dob">{dob}</span>
      <button onClick={remove}>Remove</button>
     </div>
   </div>
  )
}

我正在使用react-testing-library测试该组件。有没有使我们更容易测试这些组件的API。我知道两种测试方法： 1）我可以使用redux-mock-store模拟商店，然后将此组件包装在提供程序组件下。 2）在玩笑中模拟useSelector方法

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

但是使用jest模拟的问题是在使用多个选择器的情况下，所有useSelectors将返回相同的模拟值。使用开玩笑的方式，jest.fn（）。mockReturnValueOnce（）在我看来并不正确。

Answer 1

我建议使用其他方法-将选择器提取到单独的文件中，例如文件selectors.js：

const nameSelector = state => state.data.name;
const dobSelector = state => state.data.dob;

然后在测试中，您可以如下模拟useSelector：

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

和模拟选择器分开，例如：

jest.mock('./selectors.js', () => ({
  nameSelector: jest.fn().mockReturnValue("myTestName"),
  dobSelector: jest.fn().mockReturnValue("myTestDob"),
});

Answer 2

尝试一下：

jest.mock('react-router');
const useSelectorMock = useSelector as any;

describe('something', () {

test('name', () => {

// Use this for each useSelector call:
useSelectorMock.mockImplementationOnce(jest.fn(() => returnValue as yourType));
}

}

Answer 3

试试这个方法：

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

您还应该在此处添加一层：

jest.mock('react-redux', () => {
  const store = {
    data: {
      name: { 
           ...
      },
      dob: {
           ...
      }
    }
  };

测试react-redux useSelector

3 个答案: