StoryShots搭配Storybook快照测试报addEventListener读取错误如何修复

报错根因 #

该错误触发原因是Jest使用的JSDOM测试环境未内置window.matchMedia方法实现，Storyshots初始化时调用matchMedia拿到undefined返回值，后续逻辑尝试在该undefined值上调用addEventListener绑定事件，直接抛出类型错误。

分步修复操作 #

• 第一步：添加缺失的matchMedia全局Mock
  在项目的Jest初始化配置文件（通常命名为jest.setup.js，放在项目根目录）中加入以下mock代码：

if (!window.matchMedia) {
  window.matchMedia = (query) => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(),
    removeListener: jest.fn(),
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn(),
  });
}

• 第二步：校验Jest配置正确性
  打开项目根目录的jest.config.js文件，确认两项配置：
  1. testEnvironment字段值为jsdom，不要使用默认的node测试环境
  2. setupFilesAfterEnv数组中包含刚才编写的setup文件路径，配置示例：

module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  // 其余原有Jest配置保持不变
}

• 第三步：适配高版本Storybook初始化逻辑
  如果使用Storybook 7及以上版本，快照测试入口文件不要引入浏览器端专属的运行时代码，标准初始化写法如下：

import initStoryshots from '@storybook/addon-storyshots';
import renderer from 'react-test-renderer';

initStoryshots({
  renderer,
  // 可按需配置需要排除的测试故事正则
  storyKindRegex: /^((?!.*?SkipSnapshot).)*$/
});

提示：如果项目中存在自定义的全局事件绑定逻辑（比如直接在入口文件给window/body绑定事件），需要在逻辑前加上if (process.env.NODE_ENV !== 'test')的环境判断，避免测试环境下DOM实例未就绪时提前调用DOM方法触发同类报错。

验证修复 #

执行命令清空Jest缓存后重新运行测试即可：
npx jest --clearCache && npm run test
配置无误的话快照测试会正常启动，不会再抛出addEventListener相关的类型错误。

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