如何使用 Jest 和 React 测试库模拟从自定义挂钩返回的函数

Question

我在测试使用自定义挂钩的组件时遇到问题。我为“Spinner”编写了一个自定义挂钩，它在内部使用上下文向组件提供微调器状态。

然后，我在内部使用了 useSpinner() ，例如登录表单组件。我收到下面提到的错误。这里的测试运行也没有失败。

未捕获的 TypeError setLoading 不是函数。

Login.tsx

...

const [loading, setLoading] = useSpinner();

  const clearForm = useCallback(() => {
    setEmail('');
    setPassword('');
    setLoading(false); /* Getting error here */
  }, [setLoading]);

  useEffect(() => () => clearForm(), [clearForm]);
...

use-spinner.tsx

export default function useSpinner(): SpinnerContextType {
  const context = useContext(SpinnerContext);
  if (!context) {
    throw new Error('useSpinner is used outside of SpinnerContext scope');
  }
  return context;
}

在我的 types.ts 文件中，我定义了类型 SpinnerContextType

export type SpinnerContextType = [
  loading: boolean,
  setLoading: (value: boolean) => void
];

并SpinnerContext.tsx 文件包含

const SpinnerContext = createContext<SpinnerContextType>([false, null]);

在我的测试文件 Login.test.tsx 中，我为此创建了一个模拟。但这没有用。

const setLoadingMock = jest.fn((v: boolean) => {});
  jest.mock('../../hooks/use-spinner', () => ({
    __esModule: true,
    default: [false, setLoadingMock],
  }));

test('Test login', () => {
    render(
        <SpinnerContext.Provider value={[false, setLoadingMock]}>
            <Login />
        </SpinnerContext.Provider>
    );
});