An alternative API mocking library for frontend developers
Tags: api, mock, http, request
Published: 2022-06-11 11:04:36

## **What is it?**
[http-request-mock](https://github.com/huturen/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](https://github.com/huturen/http-request-mock) has integrated with [@ngneat/falso](https://github.com/ngneat/falso), you can easily generate massive amounts of fake data.

## **Full feature list:**
- [Static response](https://huturen.github.io/http-request-mock-docs/feature/static/)
- [Dynamic response](https://huturen.github.io/http-request-mock-docs/feature/dynamic/)
- [HTTP status](https://huturen.github.io/http-request-mock-docs/feature/status/)
- [Response headers](https://huturen.github.io/http-request-mock-docs/feature/headers/)
- [Delaying response](https://huturen.github.io/http-request-mock-docs/feature/delay/)
- [Times limit of mocking](https://huturen.github.io/http-request-mock-docs/feature/times/)
- [Disable mocking](https://huturen.github.io/http-request-mock-docs/feature/disable/)
- [Bypass mocking](https://huturen.github.io/http-request-mock-docs/feature/bypass/)
- [Fake data](https://huturen.github.io/http-request-mock-docs/feature/faker/)
- [Cross domain](https://huturen.github.io/http-request-mock-docs/feature/cross/)
- [Debug Logs](https://huturen.github.io/http-request-mock-docs/feature/logs/)
- [Mork For protobuf protocol files](https://huturen.github.io/http-request-mock-docs/feature/proto/)
- [Cache](https://huturen.github.io/http-request-mock-docs/feature/cache/)
- [Remote mock data](https://huturen.github.io/http-request-mock-docs/feature/remote/)



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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h604ve63auy7nxq5kdaz.png)


In a bare-bones example, you just import [http-request-mock](https://github.com/huturen/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:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4i3jowxmm9tlbglbo2gm.png)


## **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](https://github.com/huturen/http-request-mock#Integration), you can define your mock data(mock case) like below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nw2n2hg9ienvsw6hny4a.png)
 
All the requests matched by the mock case above will be intercepted by [http-request-mock](https://github.com/huturen/http-request-mock).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j71terb7vuemt9jcxj9p.png)



## **Unit Test**
[http-request-mock](https://github.com/huturen/http-request-mock) comes with built-in unit test capability and can be used in jest and mocha environments.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/an9vy8vwnb8g08g5l2c6.png)

Also, you can reuse a mock case like the one below, you can get the completed code by [this link](https://codesandbox.io/s/github/huturen/http-request-mock-unit-test/tree/main?file=/README.md). 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/891lmnj6xnmni27ro4wy.png)
 
 

## **Fake Data**
[http-request-mock](https://github.com/huturen/http-request-mock) has integrated with [@ngneat/falso](https://github.com/ngneat/falso). You can use it to generate massive amounts of fake data.

The data below is generated by [the mock case](https://huturen.github.io/http-request-mock-docs/feature/faker/) above.

```javascript
{
    "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](https://github.com/huturen/http-request-mock) supports using remote mock data, where you can dynamically modify the data returned from the remote.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4gru2cs3quprcf3qy4kz.png)

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](https://huturen.github.io/http-request-mock-docs/feature/remote/#).



## **Data-change-cache**
[http-request-mock](https://github.com/huturen/http-request-mock) supports data-change-cache. You can use it to achieve a closed-loop of product development without backend dependencies:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/piry5ysh2e44kswgaa16.png)

Check out [this link](https://huturen.github.io/http-request-mock-curd/#/dashboard) for a CURD demo without backend dependencies.


## **Examples**
- Integration with vue by webpack plugin: [Codesandbox](https://codesandbox.io/s/github/huturen/http-request-mock-integration-with-vue-by-webpack-plugin/tree/main), [Github](https://github.com/huturen/http-request-mock-integration-with-vue-by-webpack-plugin)

- Integration with vue by webpack CLI: [Codesandbox](https://codesandbox.io/s/github/huturen/http-request-mock-integration-with-vue-by-cli/tree/main), [Github](https://github.com/huturen/http-request-mock-integration-with-vue-by-cli)

- Integration with react: [Codesandbox](https://codesandbox.io/s/github/huturen/http-request-mock-integration-with-react-by-cli/tree/main), [Github](https://github.com/huturen/http-request-mock-integration-with-react-by-cli)

- Integration with nodejs: [Codesandbox](https://codesandbox.io/s/github/huturen/http-request-mock-integration-with-nodejs/tree/main), [Github](https://github.com/huturen/http-request-mock-integration-with-nodejs)

- A CURD demo without backend dependencies: [Website](https://huturen.github.io/http-request-mock-curd/#/dashboard), [Github](https://github.com/huturen/http-request-mock-curd)

- Unit test: [Codesandbox](https://codesandbox.io/s/github/huturen/http-request-mock-unit-test/tree/main), [Github](https://github.com/huturen/http-request-mock-unit-test)