Escritura de pruebas unitarias para extensiones
Implemente pruebas unitarias para la lógica de su extensión mediante frameworks populares de pruebas de JavaScript a fin de garantizar su fiabilidad.
Escritura de pruebas unitarias para extensiones es una lección gratuita de Browser Extensions Development (Chrome & Edge) en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Browser Extensions Development (Chrome & Edge), y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Browser Extensions Development (Chrome & Edge) incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
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 jestNext, 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 testThe 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 testQuick 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!
Aprende JavaScript con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 12
- Lecciones
- 48
Preguntas frecuentes
¿La lección «Escritura de pruebas unitarias para extensiones» es gratis?
Sí — el texto completo de «Escritura de pruebas unitarias para extensiones» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Browser Extensions Development (Chrome & Edge), actualiza a CoddyKit PRO. El curso de Browser Extensions Development (Chrome & Edge) incluye 4 lecciones en total.
¿Qué aprenderé en «Escritura de pruebas unitarias para extensiones»?
Implemente pruebas unitarias para la lógica de su extensión mediante frameworks populares de pruebas de JavaScript a fin de garantizar su fiabilidad. Practicas Browser Extensions Development (Chrome & Edge) con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Browser Extensions Development (Chrome & Edge)?
No se requiere experiencia previa. Browser Extensions Development (Chrome & Edge) en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Escritura de pruebas unitarias para extensiones»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Browser Extensions Development (Chrome & Edge)?
Sí. Cada lección de Browser Extensions Development (Chrome & Edge) incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Depuración de componentes de extensiones
- Escritura de pruebas unitarias para extensiones
- Estrategias de optimización del rendimiento
- Registros, informes de errores y diagnóstico