如何在玩笑進行單元測試時模擬 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。