模拟 useSelector 具有不同的值

Question

我正在尝试这样的事情：

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

然后尝试做这样的事情：

useSelector.mockReturnValueOnce({});
shallow(
  <ComponentUsingUseSelector />
);

这会给我一个错误：

的模块工厂jest.mock()不允许引用任何超出范围的变量。

因此，如果我不能使用超出范围的变量进行模拟，那么我将如何为每个测试返回不同的值？

Answer 1

简化版本，也可以使用：

import * as redux from 'react-redux'

jest
  .spyOn(redux, 'useSelector')
  .mockReturnValueOnce('first call')

mockReturnValueOnce另外，最好只存根存储的必要部分，而不是依赖于多次调用：

const locale = 'en'

const state = {
  application: { locale },
}

jest
  .spyOn(redux, 'useSelector')
  .mockImplementation((callback) => callback(state))

Answer 2

在阅读了大量没有做我（认为）需要做的事情的文章和文档之后，以下内容似乎有效；终于找到了一个可以的。

import { useSelector } from 'react-redux';

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


describe('some test', () => {
  it('do something', () => {
    useSelector.mockImplementation(() => ('hello world'));
    shallow(
      <ComponentUsingUseSelector />
    );

如果多次调用我可以这样做：

describe('some test', () => {
  it('do something', () => {
    useSelector.
      .mockReturnValueOnce('first call')
      .mockReturnValueOnce('second call')
    shallow(
      <ComponentUsingUseSelector />
    );