javascript - Jest.fn - 使用 jest.mock 时返回值返回未定义

Question

我有以下文件，我正在尝试为其编写单元测试:

import { document } from '../../globals';
const Overlay = () => {
  console.log(document.getElementsByTagName()); // this outputs 'undefined'
};

我正在努力模拟 getElementsByTagName功能。我的测试看起来像这样。

import { document } from '../../globals';
jest.mock('../../globals', () => ({
  document: {
    getElementsByTagName: jest.fn().mockReturnValue('foo')
  }
}));
console.log(document.getElementsByTagName()); // this outputs 'foo'

但不幸的是， console.log在顶部文件中总是输出 undefined .它可以看到文档对象和 getElementsByTagName模拟，但返回值始终为 undefined .

如果我 console.log(document.getElementsByTagName)我得到以下信息:

{ getElementsByTagName:
   { [Function: mockConstructor]
     _isMockFunction: true,
     getMockImplementation: [Function],
     mock: [Getter/Setter],
     mockClear: [Function],
     mockReset: [Function],
     mockReturnValueOnce: [Function],
     mockReturnValue: [Function],
     mockImplementationOnce: [Function],
     mockImplementation: [Function],
     mockReturnThis: [Function],
     mockRestore: [Function] },
}

但是如果我在另一个文件中做同样的事情，我会得到这个:

function () {
  return fn.apply(this, arguments);
}

我的怀疑是 jest.mock正在包装 jest.fn模拟另一个功能..有什么想法吗？

Answer 1

尝试使用 .mockReturnValue()分配后
我遇到了同样的行为，并通过调用 mockFn.mockReturnValue(value) 找到了成功分配后。
例如:

import { document } from '../../globals.js'

jest.mock('../../globals.js', () => ({
  document: {
    getElementsByTagName: jest.fn()
  }
}))

document.getElementsByTagName.mockReturnValue('foo')

console.log(document.getElementsByTagName()); // this outputs 'foo'

我在 jest 文档中看到了这两种模式。

见: mockFn.mockReturnValue(value) 显示分配后调用的位置。

见: jest.requireActual(moduleName) 显示分配期间调用的位置。

我想知道后一种情况是否需要其他一些交互模式来断言模拟的返回值，但我还没有弄清楚。我似乎无法使用 spyOn 复制成功图案 suggested in another answer here .