Mock api calls from Storybook

Question

Does axios-mock-adapter only work on requests made with axios?

I have written a component that POSTs to an API (using vanilla XHR, not axios). I'm testing it in Storybook and want to intercept those POST requests since the endpoint doesn't exist yet:

import React from "react"
import { storiesOf } from "@kadira/storybook"
import MyComponent from "./MyComponent"
import axios from "axios"
import MockAdapter from "axios-mock-adapter"

var mock = new MockAdapter(axios)

storiesOf("My Component", module).addWithInfo(
  "Simulator",
  () => {
    mock.onPost().reply(500)
    return <MyComponent />
  },
  {}
)

My component still is trying to hit the API endpoint and I am getting a 404 response - not the expected 500 response.

Does axios-mock-adapter only work on requests made with axios? Does the mock call have to be inside MyComponent?

Thanks.

I think the axios mock adapter doesn't intercept ajax calls from other libraries. If you want to use axios and mock api calls on storybook, I wrote a small tutorial about it: https://medium.com/@rafaelrozon/mock-axios-storybook-72404b1d427b — Rafael Rozon, Apr 26 '18 at 17:01

score 5 · Answer 1 · answered Feb 07 '19 at 13:47

xhr-mock should work for local testing where you probably don't want to make requests across the internet.

Outside of testing, if you are waiting on the real endpoints to be built you could use Mock/it (https://mockit.io) in development. You can claim your own dedicated subdomain and swap it out later for the real one. Disclaimer: this is a side project I recently released and would love any feedback on it!

michalbegej · Answer 2 · 2018-09-21T06:57:51.870

You can use xhr-mock instead of axios-mock-adapter.

Utility for mocking XMLHttpRequest.

Great for testing. Great for prototyping while your backend is still being built.

Works in NodeJS and in the browser. Is compatible with Axios, jQuery, Superagent >and probably every other library built on XMLHttpRequest

import mock from 'xhr-mock';

storiesOf("My Component", module).addWithInfo("Simulator",
() => {

    mock.post('', {
      status: 500,
      body: '{}'
    });

    return <MyComponent />
    },
    {}
)

Additionaly you need to add jquery script in preview-head.html file in storybook

1) https://www.npmjs.com/package/xhr-mock

score 1 · Answer 3 · answered May 29 '19 at 17:47

1

I've started using json-server to intercept API calls. You have to start it in one tab, and start storybook in another, but it is pretty cool.

answered May 29 '19 at 17:47

Alan P.

2,898
6
28
52

score 1 · Answer 4 · answered Apr 13 '20 at 19:37

You can use fetchMock npm module. All XHR call will be mocked with data you provide.

Storybook configuration:

import React from 'react';
import Messages from '../components/messagesList';

import fetchMock from "fetch-mock";
import MESSAGES from './data/messages';

fetchMock.get('/messages', MESSAGES);

export default {
  title: 'Messages',
  component: Messages
};

export const ToStorybook = () => <Messages  />;

ToStorybook.story = {
  name: 'Messages list',
};

The complete tutorial how to do it is on YouTube

This is a nice library and is quite easy to use. – Alan P. Feb 12 '21 at 21:15 — Alan P., Feb 12 '21 at 21:15

score 1 · Answer 5 · answered Sep 24 '21 at 13:31

You can use storybook-addon-mock to mock any fetch or XHR request using the addon panel. This package supports

Modify response from the panel and test on the fly.
Modify the status code to verify the error response.
Add a delay time to experience the loading state.

Mock api calls from Storybook

5 Answers5