React测试TinyMCE组件时window.matchMedia is not a function问题

问题根源在于你写的mock代码是在beforeAll中执行的，但import 'tinymce/tinymce'会在测试代码运行之前就完成加载，此时window.matchMedia还未被mock，所以报错。要让node_modules里的依赖用上mock的window对象，必须在模块加载前完成mock。

以下是两种可行的解决方法：

方法1：全局提前mock（推荐） #

通过Jest的全局配置文件，在所有测试模块加载前初始化mock：

1. 新建src/setupTests.js文件，写入mock逻辑：

Object.defineProperty(window, "matchMedia", {
  writable: true,
  value: jest.fn().mockImplementation(query => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(),
    removeListener: jest.fn(),
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn(),
  }))
});

2. 在项目的jest.config.js中配置该文件为前置执行脚本：

module.exports = {
  // 其他配置项...
  setupFiles: ['<rootDir>/src/setupTests.js'],
};

这样所有测试文件（包括node_modules中的依赖）加载时，window.matchMedia已经被mock完成。

方法2：单个测试文件前置mock #

如果只需要在特定测试文件中生效，把mock代码放在所有import语句之前：

// 先完成window.matchMedia的mock
Object.defineProperty(window, "matchMedia", {
  writable: true,
  value: jest.fn().mockImplementation(query => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(),
    removeListener: jest.fn(),
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn(),
  }))
});

// 再导入依赖和组件
import 'tinymce/tinymce';
import { render } from '@testing-library/react';
import YourTinyMCEComponent from './YourTinyMCEComponent';

// 后续测试逻辑
beforeAll(() => {
  server.listen();
});

// ... 测试用例

由于JS模块的import会被提升到代码顶部执行，必须保证mock代码先于所有import运行，才能让TinyMCE加载时使用mock的方法。

额外提示 #

• 若测试中需要模拟不同的媒体查询结果，可以调整mock的matches返回值，比如根据传入的query参数动态返回
• 确认测试环境的全局window对象未被隔离，确保mock能被全局访问

内容的提问来源于stack exchange，提问作者rahul Kushwaha