Question

我在设置单元测试以确定使用正确参数调用函数时遇到问题。 useAHook返回函数foo，后者调用函数bar。代码看起来像这样

//myModule.js
export const useAHook = (arg1, arg2) => {
  const foo = useCallback(() => {
    bar(arg1, arg2);
  }, [arg1, arg2]);

  return foo;
}

export const bar = (a, b) => {
   //does some stuff with a and b
}

我正在尝试使用renderHook和jest.spyOn对该代码进行单元测试。我想确认调用函数foo导致bar被正确的参数调用。我的单元测试看起来像这样

//myModule.spec.js

import * as myModule from './myModule.js'

it('should call foo with correct arguments', () => {
  const spy = jest.spyOn(myModule, 'bar');
  const { result } = renderHook(() => myModule.useAHook('blah', 1234));
  const useAHookFunc = result.current;

  useAHookFunc();

  // fails, spy is not called
  expect(spy).toBeCalledWith('blah', 1234);
});

结果是测试失败，表明从未调用spy。我在这里做错了还是使用任何一种工具都不正确？

Answer 1

此行：

import * as myModule from './myModule.js'

...将myModule.js的模块绑定导入myModule。

然后此行：

const spy = jest.spyOn(myModule, 'bar');

...将bar的模块导出包装为间谍...

...但是间谍从未被调用，因为useAHook并未调用bar的模块导出，它只是直接调用bar。 / p>

如果您修改useAHook以调用bar的模块导出，则将调用间谍。

有两种方法可以做到这一点。

您可以将bar移到其自己的模块中...

...或者您可以导入myModule.js的模块绑定，以便可以调用bar的模块导出：

import { useCallback } from 'react';

import * as myModule from './myModule';  // <= import the module bindings

export const useAHook = (arg1, arg2) => {
  const foo = useCallback(() => {
    myModule.bar(arg1, arg2);  // <= call the module export for bar
  }, [arg1, arg2]);

  return foo;
}

export const bar = (a, b) => {
   //does some stuff with a and b
}

使用带有jest.spyOn的react-hooks-testing-library-不调用spy

1 个答案: