来自Storybook的模拟api调用

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应该适用于您可能不想通过internet发出请求的本地测试。

在测试之外，如果您正在等待构建真正的端点，您可以在开发中使用模拟/它(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 />
    },
    {}
)

另外，你需要在预览头.html文件中添加jquery脚本

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

Answer 3

我已经开始使用json-server来拦截API调用。你必须在一个选项卡中启动它，在另一个选项卡中启动storybook，但这是相当酷的。