JavaScript 中怎么 Mock 元素可见性 IntersectionObserver-js教程-PHP中文网

mock intersectionobserver 的核心是替换全局构造函数并控制回调触发时机，通过自定义模拟类实现 observe/trigger 等方法，手动传入 intersectionobserverentry 模拟可见性变化，配合 act 和清理确保测试隔离与逻辑验证。

javascript 中怎么 mock 元素可见性 intersectionobserver

在 JavaScript 单元测试中 Mock IntersectionObserver，核心是**替换全局构造函数并控制回调触发时机**，从而模拟元素“进入/离开视口”的行为。不需要真实滚动或 DOM 渲染，重点在于让 observer 的 observe() 和回调逻辑可预测、可断言。

1. 替换 IntersectionObserver 构造函数

用 Jest 或其他测试框架的 jest.mock()（或手动重写 window.IntersectionObserver）来拦截实例创建：

定义一个轻量级模拟类，保存传入的 callback 和 options
提供 observe()、unobserve()、disconnect() 的空实现（或仅记录调用）
暴露 trigger() 方法，手动触发回调，并传入自定义的 IntersectionObserverEntry 数组

示例（Jest）：

class MockIntersectionObserver {
  constructor(callback, options) {
    this.callback = callback;
    this.options = options;
    this.observed = new Set();
  }
  observe(el) { this.observed.add(el); }
  unobserve() {}
  disconnect() {}
  trigger(entries) {
    this.callback(entries, this);
  }
}

beforeEach(() => {
  window.IntersectionObserver = MockIntersectionObserver;
});

2. 手动触发可见性变化

测试中调用 trigger() 模拟不同可见状态，例如：

Java Development Manual

Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。当用户需要：(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...

下载

元素完全可见：传入 isIntersecting: true 且 intersectionRatio: 1
部分可见：设 intersectionRatio: 0.3
完全不可见：设 isIntersecting: false 或 intersectionRatio: 0

示例：

const observer = new IntersectionObserver(cb);
observer.observe(target);

// 模拟进入视口
observer.trigger([{
  isIntersecting: true,
  intersectionRatio: 1,
  target,
}]);