Browser Extensions Development (Chrome & Edge) · 课时

为扩展编写单元测试

使用常用的 JavaScript 测试框架为扩展逻辑编写单元测试，确保其可靠性

为扩展编写单元测试 是 CoddyKit 上的免费 Browser Extensions Development (Chrome & Edge) 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Browser Extensions Development (Chrome & Edge) 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Browser Extensions Development (Chrome & Edge) 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

Intro to Unit Testing

Welcome! In this lesson, we'll dive into unit testing for browser extensions. Unit testing is a way to test small, isolated parts of your code, often called "units."

For extensions, this means testing individual functions or modules without needing to run the full browser environment. It's about ensuring each piece works correctly on its own.

Why Test Extensions?

Testing is crucial for building robust browser extensions. Here's why:

Reliability: Catches bugs early, ensuring your extension works as expected.
Maintainability: Makes future changes safer, preventing accidental breakage (regressions).
API Changes: Helps adapt to updates in browser APIs (like Manifest V3 changes).
Complex Logic: Ensures tricky background or content script logic is sound.

Pick Your Test Framework

Several JavaScript frameworks help you write and run tests. Popular choices include:

Jest: A complete testing solution from Facebook, known for its ease of use and built-in mocking.
Mocha: A flexible test runner, often paired with an assertion library like Chai.
Vitest: A fast, modern alternative built on Vite.

For this lesson, we'll use Jest due to its popularity and comprehensive features.

Set Up Jest for Testing

To get started, create a project folder and initialize it with npm. Then, install Jest as a development dependency:

npm init -y
npm install --save-dev jest

Next, add a test script to your package.json file so you can easily run tests:

{
  "name": "my-extension-tests",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "jest": "^29.0.0" // Version may vary
  }
}

Test Pure JavaScript Logic

Let's write a simple utility function that might be part of your extension's logic. Create a file named utils.js:

// utils.js
function sum(a, b) {
  return a + b;
}

function capitalize(str) {
  if (!str) return '';
  return str.charAt(0).toUpperCase() + str.slice(1);
}

module.exports = { sum, capitalize };

Writing Your First Test

Now, create a test file named utils.test.js. Jest automatically finds files ending with .test.js or .spec.js.

We'll import our functions and use Jest's test (or it) and expect syntax to define and check our tests. Try running this example!

// utils.test.js
const { sum, capitalize } = require('./utils');

test('sums two numbers correctly', () => {
  expect(sum(1, 2)).toBe(3);
  expect(sum(-1, 1)).toBe(0);
});

test('capitalizes a string', () => {
  expect(capitalize('hello')).toBe('Hello');
  expect(capitalize('world')).toBe('World');
  expect(capitalize('')).toBe('');
});

// To run these tests, execute: npm test

The Challenge of Chrome APIs

Browser extensions rely heavily on the chrome.* APIs (e.g., chrome.storage, chrome.tabs). These APIs are only available within a browser environment.

When running unit tests outside a browser (like with Node.js-based Jest), the chrome object will be undefined. To test logic that uses these APIs, we need to mock them.

Mocking means creating a simulated version of an object or function to control its behavior during a test.

Mocking chrome.storage

Let's create a utility that uses chrome.storage.local. This function would typically be in your background script or another module.

First, our utility function (e.g., in storageUtils.js):

// storageUtils.js
async function saveSetting(key, value) {
  if (typeof chrome !== 'undefined' && chrome.storage && chrome.storage.local) {
    await chrome.storage.local.set({ [key]: value });
    return true;
  }
  // Fallback for non-browser environments or missing API
  console.warn('chrome.storage.local not available');
  return false;
}

async function getSetting(key) {
  if (typeof chrome !== 'undefined' && chrome.storage && chrome.storage.local) {
    const result = await chrome.storage.local.get(key);
    return result[key];
  }
  // Fallback
  console.warn('chrome.storage.local not available');
  return undefined;
}

module.exports = { saveSetting, getSetting };

Testing with Mocked APIs

Now, let's write a test for our storageUtils.js. We'll create a mock for chrome.storage.local before each test to simulate its behavior.

Jest's jest.fn() is perfect for creating mock functions and tracking their calls. Try running this test!

// storageUtils.test.js
const { saveSetting, getSetting } = require('./storageUtils');

// Mock chrome.storage.local globally for tests
const mockStorage = {};
global.chrome = {
  storage: {
    local: {
      set: jest.fn(async (obj) => {
        Object.assign(mockStorage, obj);
        return Promise.resolve();
      }),
      get: jest.fn(async (key) => {
        return Promise.resolve({ [key]: mockStorage[key] });
      }),
    },
  },
};

beforeEach(() => {
  // Reset mock storage and clear Jest mock calls before each test
  for (const key in mockStorage) { delete mockStorage[key]; }
  chrome.storage.local.set.mockClear();
  chrome.storage.local.get.mockClear();
});

test('saveSetting saves data to chrome.storage.local', async () => {
  await saveSetting('username', 'CoddyKit');
  expect(chrome.storage.local.set).toHaveBeenCalledWith({ username: 'CoddyKit' });
  expect(mockStorage.username).toBe('CoddyKit');
});

test('getSetting retrieves data from chrome.storage.local', async () => {
  mockStorage.username = 'CoddyKit'; // Pre-set mock storage
  const username = await getSetting('username');
  expect(chrome.storage.local.get).toHaveBeenCalledWith('username');
  expect(username).toBe('CoddyKit');
});

// To run these tests, execute: npm test

Quick Check: Unit Testing

You've learned about unit testing and how to mock browser APIs. Which of the following statements is TRUE about unit testing browser extension logic?

Recap: Unit Testing

In this lesson, you learned:

The importance of unit testing for browser extensions.
How to set up a testing environment using Jest.
How to write unit tests for pure JavaScript functions.
The concept and practice of mocking chrome.* APIs to test extension logic outside the browser.

Unit testing is a critical skill for building robust and maintainable extensions. Keep practicing to ensure your extension's core logic is always solid!

常见问题解答

「为扩展编写单元测试」课时是免费的吗？

是的 — 「为扩展编写单元测试」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Browser Extensions Development (Chrome & Edge) 课程的其余内容，请升级到 CoddyKit PRO。 Browser Extensions Development (Chrome & Edge) 课程共包含 4 节课。

「为扩展编写单元测试」这节课中我会学到什么？

使用常用的 JavaScript 测试框架为扩展逻辑编写单元测试，确保其可靠性你通过在浏览器中直接运行的动手代码来练习 Browser Extensions Development (Chrome & Edge)，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Browser Extensions Development (Chrome & Edge) 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Browser Extensions Development (Chrome & Edge) 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「为扩展编写单元测试」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Browser Extensions Development (Chrome & Edge) 课中编写并运行代码吗？

能。每节 Browser Extensions Development (Chrome & Edge) 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Browser Extensions Development (Chrome & Edge)