Jest 测试 React 组件与 react-intersection-observer

Question

我正在尝试测试一个包含子组件的组件，该子组件包含 react-intersection-observer 但我总是收到错误

我试图导入库，但它仍然失败。这是初步测试

    beforeEach(() => {
      testContainer = document.createElement("div");
      document.body.appendChild(testContainer);
      subject = memoize(() =>
        mount(<FilterNav {...props} />, { attachTo: testContainer })
      );
    });

    afterEach(() => {
      testContainer.remove();
    });

    context("the main filter is shown initially", () => {
      it("sets focus on the primary filter", () => {
        subject();
        const input = testContainer.querySelector(".main-input");
        expect(document.activeElement).toEqual(input);
      });

我收到此错误 -> Uncaught [ReferenceError: IntersectionObserver is not defined]

有什么方法可以模拟 IntersectionObserver 吗？

谢谢

原文由 Rafael Simões 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我实际上能够通过模拟函数解决这个问题并将其包含在窗口对象中

const observe = jest.fn();

window.IntersectionObserver = jest.fn(function() {
  this.observe = observe;
});

原文由 Rafael Simões 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你可以在模拟文件中做这样的事情（我称之为 intersectionObserverMock.js 例如）：

 const intersectionObserverMock = () => ({
     observe: () => null
})
window.IntersectionObserver = jest.fn().mockImplementation(intersectionObserverMock);

并在测试文件中直接导入文件，如下所示：

 import '../__mocks__/intersectionObserverMock';

这将解决你的“IntersectionObserver is not defined”问题

原文由 Erez Lieberman 发布，翻译遵循 CC BY-SA 4.0 许可协议