An alternative API mocking library for frontend developers

What is it?

http-request-mock is an HTTP request mocking library that lets you develop, build and test as normal even when backend APIs are down or not ready yet. It supplies a new way to prototype your web application.

How does it work?

It mocks http requests issued by axios, jquery, superagent, node-fetch, got, (… you name it) by intercepting XMLHttpRequest, fetch, and nodejs native HTTP/HTTPS module requests at the low level.

How is it different?

It differs from the other mocking libraries in that it provides a webpack plugin and command-line tool to separate mock data from your business code. It’s a truly non-hacking mocking library. You never have to hack into your business code to mock something ever again after a one-time configuration.

Features

• Business-code-unaware: Does not interfere with code writing. Keep your code unaware of whether something is mocked or not.
• Interceptor: It can be used as an interceptor. You can decide how to handle requests.
• Reusable: The same mock case can be reused in unit tests, CI integration, or even debugging.
• Remote-mock: Support for using remote mock data, where you can dynamically modify the data returned from the remote.
• Fake data: http-request-mock has integrated with @ngneat/falso, you can easily generate massive amounts of fake data.

Full feature list:

• Static response
• Dynamic response
• HTTP status
• Response headers
• Delaying response
• Times limit of mocking
• Disable mocking
• Bypass mocking
• Fake data
• Cross domain
• Debug Logs
• Mork For protobuf protocol files
• Cache
• Remote mock data

Usage example

To mock an http request, just call a mock method or http verb method(get,post,put,patch,delete).

In a bare-bones example, you just import http-request-mock into your application entry file(such as src/main.js) and configure your mock data there. Take a Vue project as an example:

Project Integration

It may have lots of APIs to be mocked in a large web application. You may need frequently change the entry file when adding/deleting/updating mock data. There will be a day that you’ll get a mess as the project grows. So, we provide a webpack plugin and command tool to integrate your project. In this way, the mock data file can be separated from the entry to reduce the burden of managing this entry file.

After a one-time configuration for integration, you can define your mock data(mock case) like below.

All the requests matched by the mock case above will be intercepted by http-request-mock.

Unit Test

http-request-mock comes with built-in unit test capability and can be used in jest and mocha environments.

Also, you can reuse a mock case like the one below, you can get the completed code by this link.

Fake Data

http-request-mock has integrated with @ngneat/falso. You can use it to generate massive amounts of fake data.

The data below is generated by the mock case above.

{
    "id": 11,
    "name": "Vijay Iglesias",
    "age": 49,
    "phone": "(557) 203-2412",
    "gender": "female",
    "avatar": "https://i.pravatar.cc/100"
}

Remote mock data

http-request-mock supports using remote mock data, where you can dynamically modify the data returned from the remote.

When you request "https://www.api.com/remote2", the request of "https://jsonplaceholder.typicode.com/todos/1" will be sent out and returned to the remote object. Now, you can dynamically modify the data returned from the remote.

For more details, please refer to this link.

Data-change-cache

http-request-mock supports data-change-cache. You can use it to achieve a closed-loop of product development without backend dependencies:

Check out this link for a CURD demo without backend dependencies.

Examples

• Integration with vue by webpack plugin: Codesandbox, Github

• Integration with vue by webpack CLI: Codesandbox, Github

• Integration with react: Codesandbox, Github

• Integration with nodejs: Codesandbox, Github

• A CURD demo without backend dependencies: Website, Github

• Unit test: Codesandbox, Github