来自 Storybook 的模拟 api 调用答案

【问题标题】：Mock api calls from Storybook来自 Storybook 的模拟 api 调用
【发布时间】：2018-08-13 18:31:13
【问题描述】：

axios-mock-adapter 是否仅适用于使用 axios 发出的请求？

我编写了一个 POST 到 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 />
  },
  {}
)

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

axios-mock-adapter 是否仅适用于使用axios 发出的请求？ mock 调用是否必须在 MyComponent 内？

谢谢。

【问题讨论】：

我认为 axios 模拟适配器不会拦截来自其他库的 ajax 调用。如果你想在 storybook 上使用 axios 和 mock api 调用，我写了一个小教程：medium.com/@rafaelrozon/mock-axios-storybook-72404b1d427b

标签： reactjs mocking axios storybook axios-mock-adapter

【解决方案1】：

xhr-mock 应该适用于您可能不想通过 Internet 发出请求的本地测试。

在测试之外，如果您正在等待构建真正的端点，您可以在开发中使用 Mock/it (https://mockit.io)。您可以声明自己的专用子域，然后将其换成真正的子域。免责声明：这是我最近发布的一个副项目，希望有任何反馈！

【讨论】：

【解决方案2】：

您可以使用 xhr-mock 代替 axios-mock-adapter。

模拟 XMLHttpRequest 的实用程序。

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

在 NodeJS 和浏览器中工作。与 Axios、jQuery、Superagent 以及可能所有其他基于 XMLHttpRequest 构建的库兼容

import mock from 'xhr-mock';

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

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

    return <MyComponent />
    },
    {}
)

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

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

【讨论】：

【解决方案3】：

我已经开始使用json-server 来拦截 API 调用。您必须在一个选项卡中启动它，然后在另一个选项卡中启动故事书，但这很酷。

【讨论】：

【解决方案4】：

您可以使用 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',
};

完整的教程在YouTube上

【讨论】：

这是一个不错的库，而且很容易使用。

【解决方案5】：

您可以使用 storybook-addon-mock 使用插件面板模拟任何 fetch 或 XHR 请求。这个包支持

修改面板的响应并即时测试。
修改状态码以验证错误响应。
添加延迟时间来体验加载状态。

【讨论】：