Reactjs 来自Storybook的模拟api调用

axios模拟适配器是否仅适用于使用
axios
发出的请求

我已经编写了一个发布到API的组件（使用vanilla XHR，而不是axios）。我正在Storybook中对其进行测试，希望拦截这些POST请求，因为端点还不存在：

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 />
  },
  {}
)

从“React”导入React
从“@kadira/storybook”导入{storiesOf}
从“/MyComponent”导入MyComponent
从“axios”导入axios
从“axios模拟适配器”导入模拟适配器
var mock=新的MockAdapter（axios）
storiesOf（“我的组件”，模块）。addWithInfo(
“模拟器”，
() => {
mock.onPost（）.reply（500）
返回
},
{}
)

我的组件仍在尝试访问API端点，我得到的是404响应，而不是预期的500响应

axios模拟适配器是否仅适用于使用
axios
发出的请求？
mock
调用是否必须在
MyComponent
中

谢谢。
您可以使用xhr模拟而不是axios模拟适配器

用于模拟XMLHttpRequest的实用程序

非常适合测试。非常适合在后端仍在构建时进行原型设计

在节点和浏览器中工作。与Axios、jQuery、Superagent>以及其他基于XMLHttpRequest构建的库兼容

从“xhr mock”导入mock；
storiesOf（“我的组件”，模块）.addWithInfo（“模拟器”，
() => {
模拟邮政（“”{
现状：500，
正文：“{}”
});
返回
},
{}
)

另外，您需要在storybook的preview-head.html文件中添加jquery脚本

1） 
xhr mock应该适用于本地测试，您可能不希望通过internet发出请求

在测试之外，如果您正在等待构建真正的端点，那么可以在开发中使用Mock/it（）。您可以声明自己的专用子域，然后将其替换为真正的子域。免责声明：这是我最近发布的一个附带项目，希望得到任何反馈
 我已经开始使用
json服务器
拦截API调用。您必须在一个选项卡中启动它，在另一个选项卡中启动故事书，但它非常酷。
您可以使用fetchMock npm模块。所有XHR调用都将使用您提供的数据进行模拟

故事书配置：

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',
};

从“React”导入React；
从“../components/messagesList”导入消息；
从“fetchMock”导入fetchMock；
从“./data/MESSAGES”导入消息；
fetchMock.get（'/messages'，messages）；
导出默认值{
标题：“消息”，
组件：消息
};
导出常量ToStorybook=（）=>；
ToStorybook.story={
名称：'消息列表'，
};

如何实现这一点的完整教程在
上，我认为axios模拟适配器不会拦截来自其他库的ajax调用。如果您想在storybook上使用axios和mock api调用，我写了一个关于它的小教程：这是一个很好的库，非常容易使用。
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',
};