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

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

有什么方法可以模拟 IntersectionObserver？

谢谢

Answer 1

在您的 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 2

我扩展了 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;
  }
};

Answer 3

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

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

  observe() {
    return null;
  }

  disconnect() {
    return null;
  };

  unobserve() {
    return null;
  }
};

在您的测试导入文件中：

import './__mocks__/intersectionObserverMock'

Answer 4

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

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

并在测试文件中直接像这样导入文件：

import '../__mocks__/intersectionObserverMock';

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

Answer 5

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

const observe = jest.fn();

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

Answer 6

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

更新：我们需要直接在测试文件中导入intersection-observer。

import 'intersection-observer';