En el contexto actual de desarrollo de software, donde el front-end y back-end se desarrollan por separado, frecuentemente surgen demoras en la entrega de APIs. Para mitigar esto, se utilizan herramientas de mocking que permiten simular respuestas de interfaces, aceleradno así el ciclo de desarrollo del lado del cliente.

Las librerías esenciales para esta configuración son mockjs, json5 y axios. La primera genera datos aleatorios, la segunda facilita el manejo de archivos JSON con comentarios, y la última gestiona las solicitudes HTTP.

Instalación mediante npm:

npm install axios --save
npm install mockjs --save-dev
npm install json5 --save-dev

Creación de archivos para el mock: primero, un script que sirve como punto de entrada para simular endpoints.

const fileSystem = require('fs')
const pathModule = require('path')
const Mock = require('mockjs')
const json5 = require('json5')

// Función para cargar datos desde un archivo JSON5
function loadMockData (filePath) {
  const content = fileSystem.readFileSync(pathModule.resolve(__dirname, filePath), 'utf-8')
  return json5.parse(content)
}

// Exportar configuración del servidor
module.exports = function (server) {
  // Simular endpoint de perfil de usuario
  server.get('/api/userProfile', function (request, response) {
    const mockData = loadMockData('./userData.json5')
    response.json(Mock.mock(mockData))
  })
}

Archivo de datos simulados (userData.json5):

{
  userId: '@guid', // Identificador único aleatorio
  name: '@cname', // Nombre en chino aleatorio
  birthDate: '@date("yyyy-MM-dd")', // Fecha de nacimiento aleatoria
  profilePic: "@image('200x100', '#336699', '#FFFFFF', 'profile')", // Imagen generada
  bio: '@cparagraph', // Biografía aleatoria
  ipAddress: '@ip', // Dirección IP aleatoria
  contactEmail: '@email' // Correo electrónico aleatorio
}

Configuración en vue.config.js para integrar el mock durante el desarrollo:

devServer: {
    before: require('./src/mock/server.js'),
    open: true,
    host: 'localhost',
    port: 3000,
    hot: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: { '^/api': '' }
      }
    }
  }

Archivo de entorno (.env.developmant):

MOCK=true

Ejemplo de uso en un componente Vue:

fetchUserData() {
  this.axios.get('/api/userProfile')
    .then((response) => {
      console.log('Datos recibidos:', response.data)
    })
    .catch((error) => {
      console.error('Error en la solicitud:', error)
    })
}

Alternativamente, servicios en línea como FastMock ofrecen una interfaz gráfica para crear endpoints simulados sin necesidad de configuración local, permitiendo generar APIs de prueba rápidamente.