Mockar suas requisições do backend no lado do front end pode ser muito útil na hora do desenvolvimento e irei apresentar duas formas de fazer.

Vantagens de mockar requisições no front-end.

• Navegar e desenvolver sem depender do backend.
• Escrever testes de integração E2E na sua aplicação.
• Economizar o tempo de espera de requisições assíncronas.
• Economizar requisições em uma API pública com limite de requests.
• Desenvolver mais rápido com os dados que você precisa.

No meu trabalho nós combinamos o modelo do response com um backend, começamos a desenvolver com mocks e no final testamos com o backend real só pra garantir que tudo esteja funcionando.

Com isso chegamos até a economizar dinheiro da empresa ao criar um ambiente de demonstração da nossa aplicação usando mocks e não precisar de uma infra pro backend.

Pra esse exemplo irei criar uma listagem de personagens. Como estamos falando apenas das requisições, você pode usá-lo com React, Angular, Vue, Vanilla ou whatever framework.

Antes de tudo, vamos criar nosso arquivo de mock.

{
  "users": [
    {
      "name": "John"
    },
    {
      "name": "Mike"
    }
  ]
}

Agora vamos criar nossas funções responsáveis pelo requets.

import userMocks from './userMocks.json';
const mockRequests = true;
const BASE_URL = 'https://www.you-api.com';

const returnAsPromise = (mock) => {
  return new Promise((resolve) => resolve(mock));
};

export const fetchAllUsers = () => {
  if (mockRequests) {
    return returnAsPromise(userMocks);
  }

  return fetch(`${BASE_URL}/all-users`);
};

export const fetchSingleUser = (id) => {
  if (mockRequests) {
    return returnAsPromise(userMocks.users[0]);
  }

  return fetch(`${BASE_URL}/single-user?id=${id}`);
};

Dessa forma precisamos apenas mudar a variável mockRequests para receber as requisições mockadas ou não.

Usando axios-mock-adapter

Uma alternativa de mockar suas requisições é usar o pacote do npm axios-mock-adapter. Ele deve ser usado junto com o axios, que também é outro pacote para requisições HTTP.

Instalando as dependências:

npm install axios axios-mock-adapter

Configurar nosso arquivo de mocks assim:

import MockAdapter from 'axios-mock-adapter';
import userMock from './mock';

const useMock = (axios) => {
  const mock = new MockAdapter(axios);

  mock.onGet(/all-users/).reply(200, userMock);
  mock.onGet(/single-user/).reply(200, userMock.users[0]);
};

export default useMock;

importa-lo e usa-lo no nosso arquivo de requisições:.

import axios from 'axios';
import useMock from './useMock';

const mockRequests = true;
const baseURL = 'https://api.themoviedb.org';

const client = axios.create({
  baseURL,
});

if (mockRequests) {
  useMock(client);
}

export const fetchAllUsers = () => {
  return client.get('/all-users');
};

export const fetchSingleUser = (id) => {
  return client.get(`/single-user?id=${id}`);
};

Se você ver na documentação, a instância do axios-mock-adapter recebe tem alguns métodos como onGet, onPost, onPut, onDelete que recebe o endpoint que será mockado e encadeando o reply é possível retornar o status code e o response que queremos.

Dicas

É ideal substituir o mockRequests por uma variável de ambiente no .env, assim, podemos habilitar/desabilitar os mocks da aplicação em qualquer ambiente bem rápido.

MOCK_REQUESTS=ALL

const mockRequests = process.env.MOCK_REQUESTS === 'ALL';

Você pode importar o useMock dentro da condição que verifica o mockRequests para os arquivos de mock não irem para o seu bundle final.

if (process.env.NODE_ENV !== 'production' && mockRequests) {
  const useMock = require('./mockConfig');
  useMock(client);
}

Pode dar um pouco de trabalho pra você atualizar todos os mocks dependendo da quantidade de requições que você tem e as mudanças feitas no backend.