如何在Puppeteer中使用设备模拟器先后运行桌面及移动端Jest测试用例

适用于所有.test.ts后缀的测试用例，无需修改单测内部逻辑，即可实现「先全量跑桌面端用例、再全量跑移动端用例」的需求，默认基于Jest + jsdom组件测试场景实现：

• 第一步：确认基础依赖
  如果还没装jsdom测试环境，先执行安装命令：
  npm i -D jest-environment-jsdom
  然后在jest.config.ts里确认基础配置正确，原有配置不用改动，确保能匹配到所有.test.ts文件即可：

  export default {
    testEnvironment: "jsdom",
    testMatch: ["**/*.test.ts"],
    // 你项目里原有的其他Jest配置全部保留
  }
  

• 第二步：编写分端视口初始化文件
  在项目根目录新建两个测试前置配置文件，分别处理桌面、移动端的视口mock：
  第一个是jest.desktop.setup.ts，对应桌面端视口：

  // 桌面端测试全局前置逻辑
  beforeAll(() => {
    // 模拟桌面常用视口尺寸 1920*1080
    Object.defineProperty(window, "innerWidth", {
      writable: true,
      configurable: true,
      value: 1920,
    });
    Object.defineProperty(window, "innerHeight", {
      writable: true,
      configurable: true,
      value: 1080,
    });
  
    // 如果项目用matchMedia做响应式判断，补全mock
    Object.defineProperty(window, "matchMedia", {
      writable: true,
      value: jest.fn().mockImplementation((query) => ({
        matches: window.innerWidth >= 768, // 768替换成你项目实际的移动端断点值
        media: query,
        onchange: null,
        addListener: jest.fn(),
        removeListener: jest.fn(),
        addEventListener: jest.fn(),
        removeEventListener: jest.fn(),
        dispatchEvent: jest.fn(),
      })),
    });
  
    // 触发resize事件让响应式逻辑生效
    window.dispatchEvent(new Event("resize"));
  });
  

  第二个是jest.mobile.setup.ts，对应移动端视口：

  // 移动端测试全局前置逻辑
  beforeAll(() => {
    // 模拟移动端常用视口尺寸 375*812
    Object.defineProperty(window, "innerWidth", {
      writable: true,
      configurable: true,
      value: 375,
    });
    Object.defineProperty(window, "innerHeight", {
      writable: true,
      configurable: true,
      value: 812,
    });
  
    // 同桌面端，补全matchMedia mock
    Object.defineProperty(window, "matchMedia", {
      writable: true,
      value: jest.fn().mockImplementation((query) => ({
        matches: window.innerWidth >= 768,
        media: query,
        onchange: null,
        addListener: jest.fn(),
        removeListener: jest.fn(),
        addEventListener: jest.fn(),
        removeEventListener: jest.fn(),
        dispatchEvent: jest.fn(),
      })),
    });
  
    window.dispatchEvent(new Event("resize"));
  });
  

• 第三步：配置运行脚本
  打开项目根目录的package.json，在scripts字段里添加三个命令：

  {
    "scripts": {
      "test:desktop": "jest --setupFilesAfterEnv='./jest.desktop.setup.ts'",
      "test:mobile": "jest --setupFilesAfterEnv='./jest.mobile.setup.ts'",
      "test": "npm run test:desktop && npm run test:mobile"
    }
  }
  

配置完成后直接执行npm test即可：Jest会先加载桌面端配置，把所有10个.test.ts用例全部跑完，桌面端执行结束后自动加载移动端配置，重新把全部10个用例在移动端视口下跑一遍，不用修改任何现有测试用例的代码。

如果是做E2E测试（比如Jest配合Playwright/Puppeteer），逻辑完全一致，只需要把两个setup文件里的jsdom视口mock，替换成对应测试框架的视口切换API即可，脚本执行顺序不用改。

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