Desde que comecei a implementar testes unitários para os projetos e aplicações que estava envolvido, configurava o mock das bibliotecas de requisições HTTP individualmente. Por exemplo, se eu utilizasse o axios para fazer chamadas a outras APIs, durante a implementação dos testes, eu configurava o mock do axios em si. Vamos dar uma olhadinha nessa implementação:

Considere a seguinte função:

const axios = require("axios");

async function fetchCep(cep) {
        const { data } = await axios.get(`https://viacep.com.br/ws/${cep}/json/`);
    return data;
}

module.exports = {
      fetchCep,
};

A simples função fetchCep(cep) utiliza a biblioteca axios para fazer uma solicitação HTTP GET para um serviço de consulta de CEP (Código de Endereçamento Postal) fornecido pela API do ViaCEP. O objetivo desta função é obter informações de endereço com base em um CEP fornecido como argumento.

Agora vamos implementar o teste unitário que valida se a função fetchCep retorna as informações do CEP fornecido obtidas na API do ViaCEP:

const mockAxiosGet = jest.fn();
jest.mock("axios", () => ({
    get: mockAxiosGet,
}));

const { fetchCep } = require("./axiosMockExample");

describe("fetchCep", () => {
    it("should return cep information", async () => {
        mockAxiosGet.mockResolvedValueOnce({
            data: {
                cep: "12345678",
                logradouro: "Avenida Paulista",
                bairro: "Centro",
                localidade: "São Paulo",
                uf: "SP",
            },
        });
        const cep = "12345678";

        const result = await fetchCep(cep);

        expect(result.cep).toBe("12345678");
        expect(result.logradouro).toBe("Avenida Paulista");
        expect(result.bairro).toBe("Centro");
        expect(result.localidade).toBe("São Paulo");
        expect(result.uf).toBe("SP");
    });
});

Em um primeiro momento, estamos configurando o mock da biblioteca axios e de sua função get:

const mockAxiosGet = jest.fn();
jest.mock("axios", () => ({
      get: mockAxiosGet,
}));

Logo em seguida, realizamos a importação da nossa função fetchCep :

const { fetchCep } = require("./axiosMockExample");

O primeiro passo do teste “should return cep information" é configurar o retorno do método get da biblioteca axios:

mockAxiosGet.mockResolvedValueOnce({
    data: {
        cep: "12345678",
        logradouro: "Avenida Paulista",
        bairro: "Centro",
        localidade: "São Paulo",
        uf: "SP",
    },
});

Configurado o retorno do método get, realizamos a chamada à nossa função fetchCep e validamos se obtivemos o retorno esperado:

const cep = "12345678";

const result = await fetchCep(cep);

expect(result.cep).toBe("12345678");
expect(result.logradouro).toBe("Avenida Paulista");
expect(result.bairro).toBe("Centro");
expect(result.localidade).toBe("São Paulo");
expect(result.uf).toBe("SP");

Agora, basta executarmos nosso teste utilizando o jest:

Excelente! Nosso teste passou como esperado! 🥳

Porém, e se, por algum motivo, necessitamos alterar a biblioteca de requisições HTTP que estamos utilizando atualmente, o axios? O que aconteceria com nosso teste implementado? Vamos conferir?

Suponhamos que a biblioteca axios foi trocada pela Fetch API nativa do Node.js:

async function fetchCep(cep) {
    const response = await fetch(`https://viacep.com.br/ws/${cep}/json/`);

    return response.json();
}

module.exports = {
    fetchCep,
};

Vamos agora executar nosso teste unitário:

Como podemos ver, nosso teste passou a falhar. O motivo da falha está relacionado ao fato de termos configurado um mock completamente preso à biblioteca que utilizávamos anteriormente, o axios.

Para solucionarmos essa dependência utilizaremos a biblioteca [Mock Service Worker (MSW)](https://mswjs.io/). Essa biblioteca é uma ferramenta que permite simular e interceptar solicitações de rede em aplicativos web e Node.js durante os testes. Ela fornece uma maneira conveniente de criar mocks para as respostas de chamadas de rede, permitindo que os desenvolvedores controlem o comportamento das solicitações HTTP feitas pelo aplicativo em testes unitários, sem realmente realizar solicitações à rede real. Isso é especialmente útil para isolar testes e garantir que o aplicativo funcione corretamente, mesmo quando a API ou os serviços externos não estão disponíveis, enquanto também simplifica a simulação de diferentes cenários de respostas de rede para fins de teste.

Agora, vamos configurar o service worker em nosso arquivo de testes. Para isso, precisamos instalar o pacote do MSW em nossas dependências de desenvolvimento utilizando o npm ou yarn:

npm install msw --save-dev

No arquivo de testes, vamos importar o objeto rest do pacote msw e a função setupServer do pacote msw/node:

const { setupServer } = require("msw/node");
const { rest } = require("msw");

Antes da declaração da nossa suite de testes, o describe, vamos configurar nosso server, o qual será responsável por interceptar todas as chamas realizadas por qualquer biblioteca de requisições HTTP:

const server = setupServer(
    rest.get("https://viacep.com.br/ws/:cep/json/", (req, res, ctx) => {
        return res(
            ctx.status(200),
            ctx.json({
                cep: "12345678",
                logradouro: "Avenida Paulista",
                bairro: "Centro",
                localidade: "São Paulo",
                uf: "SP",
            })
        );
    })
);

Como podemos ver, estamos configurando o comportamento do interceptor para requisições HTTP do tipo GET no endpoint https://viacep.com.br/ws/:cep/json/. Note que em :cep, estamos abstraindo qualquer CEP que seja fornecido durante a requisição HTTP. A configuração realizada retornará o status code 200 e o objeto contendo as informações do CEP no corpo da resposta.

Para mais informações sobre possibilidades de configuração de interceptores, recomendo consultarem a documentação oficial do MSW.

Estamos quase lá! Precisamos, das seguintes configurações:

• Antes de todos os testes da suite, inicializar nosso servidor:

beforeAll(() => server.listen());

• Após cada teste da suite, restaurar a configuração original do nosso servidor, definida acima. Essa restauração garante que, caso adicionemos novos handlers ou sobrescrevemos os existentes dentro dos testes, a configuração do servidor seja a original antes de cada teste ser executado dentro de nossa suite:

afterEach(() => server.resetHandlers());

• Após todos os testes da suite, encerrar nosso servidor:

afterAll(() => server.close());

Os últimos dois pontos a serem alterados em nosso arquivo de testes é a remoção do mock da biblioteca axios e da configuração do retorno do seu método get:

// REMOVER
const mockAxiosGet = jest.fn();
jest.mock("axios", () => ({
    get: mockAxiosGet,
}));

...

// REMOVER
mockAxiosGet.mockResolvedValueOnce({
    data: {
        cep: "12345678",
        logradouro: "Avenida Paulista",
        bairro: "Centro",
        localidade: "São Paulo",
        uf: "SP",
    },
});

Finalmente, a nossa implementação do teste ficará assim:

const { setupServer } = require("msw/node");
const { rest } = require("msw");
const { fetchCep } = require("./axiosMockExample");

const server = setupServer(
    rest.get("https://viacep.com.br/ws/:cep/json/", (req, res, ctx) => {
        return res(
            ctx.status(200),
            ctx.json({
                cep: "12345678",
                logradouro: "Avenida Paulista",
                bairro: "Centro",
                localidade: "São Paulo",
                uf: "SP",
            })
        );
    })
);

describe("fetchCep", () => {
    beforeAll(() => server.listen());

    afterEach(() => server.resetHandlers());

    afterAll(() => server.close());

    it("should return cep information", async () => {
        const cep = "12345678";

        const result = await fetchCep(cep);

        expect(result.cep).toBe("12345678");
        expect(result.logradouro).toBe("Avenida Paulista");
        expect(result.bairro).toBe("Centro");
        expect(result.localidade).toBe("São Paulo");
        expect(result.uf).toBe("SP");
    });
});

Agora, temos nosso teste passando com sucesso:

Neste exemplo, nos baseamos em uma requisição HTTP do tipo GET. Porém, a biblioteca MSW permite configurarmos interceptores para todos os verbos HTTP.

Recomendo fortemente o estudo da documentação oficial da biblioteca para implementação dos testes de seus projetos e aplicações.