使用 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

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

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

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

import '../__mocks__/intersectionObserverMock';

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

Answer 3

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

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

import 'intersection-observer';

Answer 4

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

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

  observe() {
    return null;
  }

  disconnect() {
    return null;
  };

  unobserve() {
    return null;
  }
};

在您的测试导入文件中：

import './__mocks__/intersectionObserverMock'

Answer 5

为了解决这个问题，我建议使用mockAllIsIntersectingtest -utils.js中的react-intersection-observer. 该函数模拟 IntersectionObserver。

例如

import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils';

it("sets focus on the primary filter", () => {
    subject();
    mockAllIsIntersecting(true);

    const input = testContainer.querySelector(".main-input");
    expect(document.activeElement).toEqual(input);
  });

Answer 6

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

const observe = jest.fn();

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