JavaScript 中怎么 Mock 暗黑模式媒体查询 matchMedia-js教程-PHP中文网

mock matchmedia 暗黑模式需替换 window.matchmedia 为可触发 change 事件的模拟对象，支持 matches 动态设置与 triggerchange 调用监听器，确保组件响应主题切换。

javascript 中怎么 mock 暗黑模式媒体查询 matchmedia

在 JavaScript 测试中 Mock matchMedia 以模拟暗黑模式（(prefers-color-scheme: dark)），关键是替换全局的 window.matchMedia 方法，使其返回可控的 MediaQueryList 对象，并支持手动触发 change 事件。

直接覆盖 matchMedia 方法

最常用的方式是在测试前重写 window.matchMedia，返回一个伪造的 MediaQueryList 实例：

用 jest.fn() 或手动构造对象，确保 matches 属性可读、addEventListener/removeEventListener 存在
必须实现 dispatchEvent（或兼容的触发机制），以便在切换主题时通知监听器
注意：不能只 mock 返回值，否则监听逻辑（如 mediaQuery.addEventListener('change', handler)）不会生效

创建可控制的 MediaQueryList 模拟对象

推荐封装一个可设置状态、可触发变更的模拟类：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

定义 matches getter/setter，方便测试中切换亮/暗模式
内部维护事件监听器列表，提供 triggerChange() 方法调用所有 change 回调
在 beforeEach 中安装：window.matchMedia = (query) => query === '(prefers-color-scheme: dark)' ? new MockMediaQueryList(false) : { matches: false }

使用 Jest 自带的 mockImplementation（简洁场景）

如果只需固定返回某一种状态（例如始终暗色），可用：

Object.defineProperty(window, 'matchMedia', { value: jest.fn().mockImplementation(query => ({ matches: query.includes('dark') })) });
但此方式不支持监听 change 事件，仅适用于只读判断（如 if (matchMedia(...).matches)）
若组件依赖事件响应（比如动态更新 class 或 theme context），必须用可触发事件的完整模拟