jest.mock() 中的 jest.fn() 返回 undefined答案

【问题标题】：jest.fn() inside jest.mock() returns undefinedjest.mock() 中的 jest.fn() 返回 undefined
【发布时间】：2021-11-18 15:35:28
【问题描述】：

我有一个简单的“util”模块，带有一个默认导出和 2 个命名导出。

const foo = () => 'foo'
export default foo
    
export const bar = () => 'bar'
export const baz = () => 'baz'

在我的测试中，我是这样嘲笑它的：

jest.mock('./util', () => ({
  __esModule: true,
  default: jest.fn(() => 'mocked foo'),
  bar: jest.fn(() => 'mocked bar'),
  baz: jest.fn(() => 'mocked baz'),
}))

describe('util', () => {
  //...
})

在我的组件上，当我调用foo()、bar() 或baz() 时，我收到了undefined。但如果我像这样删除jest.fn()，一切正常：

jest.mock('./util', () => ({
  __esModule: true,
  default: () => 'mocked foo',
  bar: () => 'mocked bar',
  baz: () => 'mocked baz',
}))

我的示例与 jest doc 中的示例非常接近： https://jestjs.io/docs/mock-functions#mocking-partials

我正在使用 React (CRA) 和 TypeScript

我知道模拟模块有不同的方法，但我很想了解我面临的问题。

知道我做错了什么吗？ :) 谢谢！

【问题讨论】：

标签： reactjs typescript testing jestjs create-react-app

【解决方案1】：

我遇到了同样的问题（也在运行 CRA），发现这可能是原因：

https://github.com/facebook/jest/issues/9131#issuecomment-668790615

这里有点晚了，但我只是遇到了这个确切的问题。一世发现有人添加了resetMocks: true jest.config.js 文件。这意味着 mock 的实现功能在每次测试前被重置。所以在我们的例子中，模拟函数在测试运行时被包含在模拟模块中，但是该模拟已被重置，因此它返回未定义。

关于原始问题构建环境，它看起来像 react-scripts 确实将 resetMocks: true 添加到 jest 配置中。 (https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/utils/createJestConfig.js#L69) 但是您可以在 package.json 的 jest 键上覆盖它。 (https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/utils/createJestConfig.js#L74)

【讨论】：

我知道 React17 中设置的更改，但我从未怀疑这是我的问题。你是对的，非常感谢！