Mocking RESTFul API in Storybook

Simulate different API responses inside Storybook stories using Axios and axios-mock-adapter.

So, I wanted to find a way to simulate different api responses for my React components while developing them in Storybook. I found out another tutorial that was very helpful but it used another fetch library instead Axios. Then, I decided to put my own little tutorial to help others that use Storybook and Axios HTTP client.

Assuming you have Storybook already setup. Install this:

npm install axios-mock-adapter --save-dev

Then in your stories:

My Test component is just to illustrate. What is important here is:

• Without the mock adapter, the response would be data for the planet Tatooine from the Star Wars api. But, the mock adapter intercepts the request and return { test: 'some mock data' }. Pretty cool!
• The API call you to specify onmock.onGet has to match exactly what it’s being requested in your Axios GET call. If in…