Mocking Browser APIs

Mocking Browser APIs is an essential technique in testing and debugging web applications. It allows developers to simulate the behavior of browser APIs to ensure that code interacts correctly without needing to rely on actual browser functionality.

What is Mocking?

Mocking involves creating a simulated version of an API or object, allowing you to control its behavior and test how your code interacts with it.

Why Mock Browser APIs?

• To isolate components for testing.
• To avoid side effects in tests.
• To speed up test execution.

Using Jest for Mocking

Jest is a popular testing framework that provides built-in mocking capabilities. You can easily mock browser APIs using Jest's jest.fn() or jest.mock().

import { fetchData } from './api';

jest.mock('./api');

test('fetches successfully data from an API', async () => {
    const data = { id: 1, title: 'Mocked Title' };
    fetchData.mockResolvedValue(data);
    
    const result = await fetchData();
    expect(result).toEqual(data);
});
                

Mocking Built-In Browser APIs

For example, to mock localStorage:

describe('localStorage mock', () => {
    let setItemMock;

    beforeEach(() => {
        setItemMock = jest.spyOn(Storage.prototype, 'setItem');
    });

    afterEach(() => {
        setItemMock.mockRestore();
    });

    test('should call localStorage.setItem', () => {
        localStorage.setItem('key', 'value');
        expect(setItemMock).toHaveBeenCalledWith('key', 'value');
    });
});
                

• Always clean up mocks after tests to avoid side effects.
• Use TypeScript definitions for better type safety when mocking.
• Keep your mocks as close to the actual implementation as possible.