Browser Extensions Development (Chrome & Edge) · レッスン

拡張機能のユニットテスト作成

一般的なJavaScriptテストフレームワークを使って拡張機能のロジックにユニットテストを実装し、信頼性を確保します。

レッスン 2/411 ステップ

「拡張機能のユニットテスト作成」はCoddyKit上の無料Browser Extensions Development (Chrome & Edge)レッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応の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 チューターと学ぶ JavaScript — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 12
レッスン: 48

無料で学習を始めるコース全体を表示

よくある質問

「拡張機能のユニットテスト作成」レッスンは無料ですか？

はい。「拡張機能のユニットテスト作成」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Browser Extensions Development (Chrome & Edge)コースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Browser Extensions Development (Chrome & Edge)コースには全4レッスンが含まれています。

「拡張機能のユニットテスト作成」で何を学びますか？

一般的なJavaScriptテストフレームワークを使って拡張機能のロジックにユニットテストを実装し、信頼性を確保します。ブラウザで直接実行するハンズオンコードでBrowser Extensions Development (Chrome & Edge)を演習し、24時間対応の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)に戻る