用玩笑进行单元测试时，如何以角度模拟 ResizeObserver polyfill？

Posted 2023-03-08

【中文标题】用玩笑进行单元测试时，如何以角度模拟 ResizeObserver polyfill？

【英文标题】：How to mock ResizeObserver polyfill in angular, when doing unit tests with jest?

【发布时间】：2020-03-10 20:53:58

【问题描述】：

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

目前，我收到以下错误：

TypeError: resize_observer_polyfill_1.default is not a constructor

我找到了related issue here，因此尝试在组件旁边实现模拟。所以这是我尝试过的：

_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';

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

【问题讨论】：

我遇到了同样的问题，并以if (ResizeObserver) new ResizeObserver(...) 结束了我的调查

【参考方案1】：

来自同一个 GitHub 问题：

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

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

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(),
    
  ),
));

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

【参考方案2】：

据我所知，您正在单元测试中导入模拟，但您没有使用它。您需要在单元测试文件的顶部有以下内容：

import ResizeObserver from './_mocks_/resizeObserver';

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