使用Jest测试chrome.storage.local.set的调用次数问题

嘿，我懂你的困扰！作为Jest新手，碰到浏览器API的mock测试确实容易踩坑——硬编码的测试完全起不到验证实际代码的作用，得让测试真正和你的saveData函数绑定起来才行。下面我一步步给你捋清楚怎么改：

先说说你之前的问题出在哪 #

大概率你之前的测试是类似这样的硬编码写法，完全没和saveData挂钩：

test('chrome.storage.local被调用3次', () => {
  expect(chrome.storage.local.set).toHaveBeenCalledTimes(3);
});

这种写法根本没执行saveData，只是凭空断言调用次数，所以不管你怎么改saveData，测试都能过，完全无效。

正确的实现步骤 #

1. 先Mock浏览器的chrome.storage.local

因为Jest运行在Node环境里，没有浏览器的chrome对象，所以得先手动mock它：

// 在测试文件顶部或者Jest的setup文件里添加这段
global.chrome = {
  storage: {
    local: {
      set: jest.fn(), // 用Jest的mock函数替代真实的set方法
      // 如果你的函数用到get，也可以一起mock：get: jest.fn()
    }
  }
};

2. 假设你的saveData函数是这样的（供参考）

比如你的函数接收一个数据数组，遍历保存到local storage：

// 示例saveData函数，替换成你自己的实际代码
export const saveData = (dataList) => {
  dataList.forEach(item => {
    chrome.storage.local.set({ [item.id]: item.content });
  });
};

3. 编写真正关联函数的测试

测试的核心是先调用你的saveData，再验证mock方法的调用次数：

import { saveData } from './path-to-your-saveData-file'; // 导入你的函数

// 每次测试前重置mock，避免不同测试互相干扰
beforeEach(() => {
  chrome.storage.local.set.mockClear();
});

test('saveData执行时，chrome.storage.local.set被调用3次', () => {
  // 准备3条测试数据，对应要调用3次set
  const testData = [
    { id: 'item1', content: 'test1' },
    { id: 'item2', content: 'test2' },
    { id: 'item3', content: 'test3' }
  ];

  // 关键一步：调用你的saveData函数！
  saveData(testData);

  // 验证调用次数
  expect(chrome.storage.local.set).toHaveBeenCalledTimes(3);

  // 额外验证每次调用的参数是否正确（可选，但让测试更严谨）
  expect(chrome.storage.local.set).toHaveBeenNthCalledWith(1, { item1: 'test1' });
  expect(chrome.storage.local.set).toHaveBeenNthCalledWith(2, { item2: 'test2' });
  expect(chrome.storage.local.set).toHaveBeenNthCalledWith(3, { item3: 'test3' });
});

为什么这样就对了？ #

现在测试完全依赖saveData的实际行为：

• 如果你修改saveData，比如改成只保存2条数据，测试会因为调用次数不符而失败
• 如果你改了保存的参数格式，额外的参数验证也会报错
• 真正实现了“测试代码逻辑”的目的，而不是硬凑结果

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