Jest单元测试中如何Mock webextension-polyfill模块？

• 开发适配Firefox和Chrome的浏览器扩展，使用browser.* API，通过Mozilla的webextension-polyfill让Chrome支持browser对象
• 已创建browser.ts，内容为：export const browser = require('webextension-polyfill');
• 其他文件通过import {browser} from '../path/to/browser.ts'引入该对象
• 单元测试时，上述require语句触发报错：This script should only be loaded in a browser extension
• 尝试过rewire、proxyquire、Jest Mock均未成功，目前用try-catch捕获异常返回Mock对象，但不够优雅，希望找到更好的方案，关注过mockzilla但需先解决polyfill加载问题

方案1：正确配置Jest模块Mock #

之前Jest Mock未生效，大概率是配置方式不对，可通过以下两种方式实现：

方式A：单测试文件内Mock #

在需要用到browser对象的测试文件顶部添加：

// 完全mock webextension-polyfill模块
jest.mock('webextension-polyfill', () => ({
  // 按需添加需要mock的API，示例为tabs和storage模块
  tabs: {
    query: jest.fn().mockResolvedValue([]),
    create: jest.fn().mockResolvedValue({ id: 1 })
  },
  storage: {
    local: {
      get: jest.fn().mockResolvedValue({}),
      set: jest.fn().mockResolvedValue()
    }
  }
}));

Jest会在加载webextension-polyfill时直接返回定义的Mock对象，不会执行原模块代码，避免触发报错。

方式B：全局Mock（适用于所有测试文件） #

1. 在项目根目录创建__mocks__/webextension-polyfill.ts文件：

// 定义全局通用的browser mock对象
const mockBrowser = {
  tabs: {
    query: jest.fn().mockResolvedValue([]),
    create: jest.fn().mockResolvedValue({ id: 1 })
  },
  storage: {
    local: {
      get: jest.fn().mockResolvedValue({}),
      set: jest.fn().mockResolvedValue()
    }
  },
  // 按需扩展其他API
};

export default mockBrowser;

2. 在jest.setup.ts中添加全局mock声明：

jest.mock('webextension-polyfill');

3. 确保jest.config.js中配置了该setup文件：

module.exports = {
  // 其他配置...
  setupFilesAfterEnv: ['./jest.setup.ts']
};

所有测试文件会自动使用该Mock模块，无需逐个文件配置。

方案2：重构browser.ts的环境区分逻辑 #

通过环境变量判断加载逻辑，测试环境直接返回Mock对象，生产/开发环境加载polyfill：

let browserInstance;

if (process.env.NODE_ENV === 'test') {
  // 测试环境：返回预定义Mock对象
  browserInstance = {
    tabs: { query: jest.fn(), create: jest.fn() },
    storage: { local: { get: jest.fn(), set: jest.fn() } }
    // 按需扩展
  };
} else {
  // 生产/开发环境：加载webextension-polyfill
  browserInstance = require('webextension-polyfill');
}

export const browser = browserInstance;

Jest默认会将process.env.NODE_ENV设为test，无需额外配置环境变量。

方案3：结合mockzilla使用 #

mockzilla专门用于Mock浏览器扩展API，可配合模块Mock解决polyfill加载问题：

1. 先mockwebextension-polyfill，让它返回mockzilla创建的browser对象：

import { mockBrowser } from 'mockzilla-webextension';

jest.mock('webextension-polyfill', () => mockBrowser);

2. 在测试用例中使用mockzilla配置具体Mock行为：

import { mockBrowser } from 'mockzilla-webextension';

describe('扩展功能测试', () => {
  beforeEach(() => {
    // 重置所有mock状态
    mockBrowser.reset();
  });

  test('测试tabs.query接口', async () => {
    // 配置mock返回值
    mockBrowser.tabs.query.mockResolvedValue([{ id: 1, url: 'https://example.com' }]);

    // 执行待测试代码...

    // 断言mock被正确调用
    expect(mockBrowser.tabs.query).toHaveBeenCalledWith({ active: true });
  });
});

这种方式既解决了polyfill加载报错问题，又能利用mockzilla的便捷API管理浏览器扩展Mock，比手动定义Mock更灵活。

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