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

我遇到此错误->未捕获[ReferenceError：未定义IntersectionObserver]

有没有办法模拟IntersectionObserver？

谢谢

Answer 1

唯一对我有用的方法是创建文件src\__mocks__\intersectionObserverMock.js

global.IntersectionObserver = class IntersectionObserver {
  constructor() {}

  observe() {
    return null;
  }

  disconnect() {
    return null;
  };

  unobserve() {
    return null;
  }
};

在您的测试导入文件中：

import './__mocks__/intersectionObserverMock'

Answer 2

在您的 setupTests 文件中创建一个模拟：

// Mock IntersectionObserver
class IntersectionObserver {
  observe = jest.fn()
  disconnect = jest.fn()
  unobserve = jest.fn()
}

Object.defineProperty(window, 'IntersectionObserver', {
  writable: true,
  configurable: true,
  value: IntersectionObserver,
})

Object.defineProperty(global, 'IntersectionObserver', {
  writable: true,
  configurable: true,
  value: IntersectionObserver,
})

这会将它排序为未定义。

Answer 3

与使用IntersectionObserver的组件存在相同的问题。

更新：我们需要直接在测试文件中导入交集观察者。

import 'intersection-observer';

Answer 4

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

const observe = jest.fn();

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

Answer 5

您可以在模拟文件中执行类似的操作（例如，我将其称为intersectionObserverMock.js）：

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

，然后像这样直接在测试文件中导入文件：

import '../__mocks__/intersectionObserverMock';

这将解决您的“ IntersectionObserver未定义”问题

Answer 6

我扩展了Teebu的solution以触发第一个相交元素。然后我的测试就好像交集会匹配一样。

global.IntersectionObserver = class IntersectionObserver {

  constructor(private func, private options) {}

  observe(element: HTMLElement) {
    this.func([{isIntersecting: true, target: element}]);
  }

  disconnect() {
    return null;
  };

  unobserve() {
    return null;
  }
};

开玩笑地用jeact-intersection-observer测试组件反应

6 个答案: