Mock api来自Storybook

Question

是否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？

谢谢.

Answer 1

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

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

Answer 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