Mocking api calls from React Applications, using Pretenderjs and Fakerjs.
import { Server, Faker, uid } from 'react-mock'
const endPoint = '/api/v1/todos'
const todoSchema = {
author: Faker.internet.email(),
content: () => Faker.lorem.sentence(),
createdAt: () => Faker.date.past()
}
const requestHandler = (request, generator) => {
const todoList = generator.next(10, todoSchema);
return [200, { 'Content-Type': 'application/json' }, JSON.stringify(todoList)];
}
Server.mockGet(endPoint, requestHandler)
Server.on() // to start mocking /api/v1/todos APIaxios.get('/api/v1/todos').then(({ data }) => {
// data is an array of 10 todo objects
})- Suppose you want to simulate the fetching of 10 guides
- You know the API Endpoint
- You know the Format of each guide object
- You know the Format of the Error response
// <app-root>/src/mock-server
import { Server, Faker, uid } from 'react-mock'
const apiRoute = '/api/v1/guides'
const requestHandler = (request, generator) => {
const guides = generator.next(10); // @returns { <id1>: schema1, <id2>: schema2 }
// const error = generator.error();
return [200, { 'Content-Type': 'application/json' }, JSON.stringify(guides)];
}
const schema = {
description: Faker.lorem.sentence(),
createdAt: Faker.date.past(),
favoredCount: Faker.random.number(),
isPublic: random.boolean(),
author: {
id: uid.next(),
name: Faker.name.findName(),
picture: Faker.internet.avatar()
}
};
const errorFormat = {
message: Faker.lorem.sentence()
}
Server.mockGet(apiRoute, requestHandler, schema, errorFormat)
Server.on() // @returns Promise that resolves with null or rejects with Error
// Server.off()
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent