Mocking Backend Response

Akhil Reddy Gangula
Jul 11 · 3 min read


Testing the backend server or logic without UI is relatively easy than testing the front end without any actual backend services. In order for frontend developers to develop a reactive UI application, one needs a functional backend. But let's admit it! backend logic won’t be available while developing a front end for most of the time. This is why we need a tool that could mock backend response. Wait! can’t we create a mocks in the component level and use it? Yes, of course! but let's take a step back and think with a larger perspective. How many mock can we create in client-side code? After certain period maintenance would be a problem.

Image for post
Image for post


So what's the solution? I had the same question for a while, searched and tried out so many node and other packages. At last, I found Wiremock, a backend mocking tool coded in Java + Json + handlebars. It fits for most of my purpose. But there were so many gaps that could be filled in the framework. Most of the front end developers are from JS background. Implementing a new class and adding that to listeners wouldn’t be an efficient way. So I have come up with this package called mock-json-response.

Mock JSON Response package is built on the idea of less configuration and more control. Removing the dependency of handlebars and instead depending on the power of JS for data manipulation. It has all the basic features that modern mocking needs!

Image for post
Image for post

Enough of history lets dive right in!

In Action

To get started, mock-json-response takes 2 mandatory arguments, functions and data directory path (path given should be absolute). Before the server is started, function directory files are loaded which decides the route of the incoming request.

Data Directory simply has JSON files with the raw response data.

Function Directory will be expecting the JS object in the files, with 3 required fields logic, request, response.

logic is a function type which receives request and data as arguments will be used to manipulate the response data.

Possible values for request object: method, urlPath, headers. “urlPath” can be both string or any valid regex. “headers” is an object which will match the value of the incoming header to the value given in the headers object with the help of an appropriate helper function.

// functionDirectory/test.js
logic: ({ headers }, { data }) => {
data.message = headers["x-error"];
request: {
method: "GET", //type of request
urlPath: "/mock/(.*)/error", //path of the request
headers: {
"x-mock": { //header keys
contains: "error", //matchers to match hea value

Possible values for response object: status, headers, inlineData, bodyFileName. InlineData is an object that can be used for constructing response data. “bodyFileName” is used to map JSON from data directory.

// functionDirectory/test.js
response: {
status: 200, //status to returned
headers: { //headers in response
"Content-Type": "application/json",
inlineData: { //a way to pass raw data inline
test: 'inline data'
bodyFileName: "data.json" //name of the file with raw jsonData
// dataDirectory/data.json{
"value":"generic string"

When a request GET: http://localhost:3000/mock/WES-1234/error with headers “x-mock”: “authentication error” will return

value: "generic string",
message: "authentication error"
with status as 200 and headers as "Content-Type": "application/json"
Image for post
Image for post


Mocking backend service never been so simple with mock-json-response. Try this open-source, modern framework.

Thanks for taking the time to read my article. Will be back with interesting topics and updates, stay tuned.

The Startup

Medium's largest active publication, followed by +717K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store