如何在Jest中快速Mock Chrome DevTools Panels对象？

方案1：用Proxy自动生成嵌套Mock对象 #

你可以用JavaScript的Proxy创建一个自动递归生成mock的全局chrome对象，不管访问chrome下的任何层级属性，都会自动生成对应的mock函数或嵌套mock，完全不用手动补全所有字段：

const createMockChrome = () => {
  const handler = {
    get(target, prop) {
      if (!(prop in target)) {
        // 函数类型返回jest mock，非函数返回新的嵌套Proxy
        target[prop] = typeof prop === 'function' ? jest.fn() : createMockChrome();
      }
      return target[prop];
    }
  };
  return new Proxy({}, handler);
};

// 在测试文件开头挂载全局mock
global.chrome = createMockChrome();

测试时你可以正常断言目标方法的调用情况，比如：

expect(chrome.devtools.panels.create).toHaveBeenCalledWith(
  'extension-tool',
  'favicon,ico',
  'index.html#/devtool-panel',
  expect.any(Function)
);

方案2：只Mock用到的部分，用类型断言绕过TS检查 #

如果是TypeScript项目，不想写全所有类型字段，可以用as any绕过类型检查，只定义你实际用到的API：

// 仅mock需要用到的create方法，其余字段忽略
global.chrome = {
  devtools: {
    panels: {
      create: jest.fn()
    } as any
  } as any
};

这种方式适合仅用到chrome少数API的场景，简单直接，不用额外写复杂逻辑。

方案3：在Jest全局setup文件中统一配置Mock #

如果多个测试文件都需要用到chrome对象，可以在Jest的全局setup文件中配置Proxy mock，避免每个文件重复编写：

1. 在jest.config.js中指定setup文件：

module.exports = {
  setupFilesAfterEnv: ['./jest.setup.js']
};

2. 在jest.setup.js中添加Proxy mock代码：

const createMockChrome = () => {
  const handler = {
    get(target, prop) {
      if (!(prop in target)) {
        target[prop] = typeof prop === 'function' ? jest.fn() : createMockChrome();
      }
      return target[prop];
    }
  };
  return new Proxy({}, handler);
};

global.chrome = createMockChrome();

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