如何在用jest做单元测试时，用Angular 模拟ResizeObserver polyfill？

ddrv8njm 于 2022-12-08 发布在 Jest

关注(0)|答案(3)|浏览(245)

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

目前，我收到以下错误：

TypeError: resize_observer_polyfill_1.default is not a constructor

我发现了一个related issue here，因此尝试在组件旁边实现一个mock。

模拟/调整观察者的大小.ts*

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

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

import ResizeObserver from './_mocks_/resizeObserver';

但这并不能解决问题。
在code中，我使用了如下的polyfill：

import ResizeObserver from 'resize-observer-polyfill';

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

jestjs

来源：https://stackoverflow.com/questions/58864555/how-to-mock-resizeobserver-polyfill-in-angular-when-doing-unit-tests-with-jest

3条答案

按热度按时间

z9smfwbn1#

来自同一个GitHub问题：

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

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

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

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

赞(0）回复(0）举报 2022-12-08

ilmyapht2#

通过将此代码添加到我的测试文件中，就在de describe('...上方，解决了问题

window.ResizeObserver =
    window.ResizeObserver ||
     jest.fn().mockImplementation(() => ({
     disconnect: jest.fn(),
     observe: jest.fn(),
     unobserve: jest.fn(),
    }));

赞(0）回复(0）举报 2022-12-08

1aaf6o9v3#

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

import ResizeObserver from './_mocks_/resizeObserver';

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

赞(0）回复(0）举报 2022-12-08

我来回答

如何在用jest做单元测试时，用Angular 模拟ResizeObserver polyfill？

3条答案

相关问题

热门标签

最新问答