如何在玩笑进行单元测试时模拟 angular 中的 ResizeObserver polyfill？

Question

我的目标是在运行 jest 单元测试时在 Angular 应用程序中模拟出resize-observer- polyfill 。

目前，我收到以下错误：

TypeError: resize_observer_polyfill_1.default is not a constructor

我在 这里发现了一个相关问题，因此尝试在组件旁边实现一个模拟。 所以这就是我尝试过的：

_mocks_/resizeObserver.ts

class ResizeObserver {
    observe() {
        // do nothing
    }
    unobserve() {
        // do nothing
    }
}
window.ResizeObserver = ResizeObserver;
export default ResizeObserver;

然后在我的规范文件中导入它：

import ResizeObserver from './_mocks_/resizeObserver';

但这并不能解决问题。

在代码中，我使用这样的 polyfill：

import ResizeObserver from 'resize-observer-polyfill';

这是一个非常令人沮丧的问题，所以我真的希望以某种方式解决这个问题。

Answer 1

从我看到的情况来看，您正在单元测试中导入模拟，但您没有使用它。 您需要在单元测试文件的顶部具有以下内容：

import ResizeObserver from './_mocks_/resizeObserver';

jest.mock('resize-observer-polyfill', () => { return ResizeObserver; });

Answer 2

从同一个 GitHub 问题：

jest.mock('resize-observer-polyfill', () => ({
  __esModule: true,
  default: jest.fn().mockImplementation(() => ({
    observe: jest.fn(),
    unobserve: jest.fn(),
    disconnect: jest.fn(),
  })),
})); 

如果您想立即调用调整大小处理程序 function，您可以将其添加到实现中：

jest.mock('resize-observer-polyfill', () => ({
  __esModule: true,
  default: jest.fn().mockImplementation((cb) => {
    // call event handler immediately
    cb()
 
    return {
      observe: jest.fn(),
      unobserve: jest.fn(),
      disconnect: jest.fn(),
    }
  }),
}));

如果您想按需调用它，一种方法是添加一些实际的事件处理程序到观察 function。