15

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？

谢谢。

4

5 回答 5

4

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

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

于 2019-02-07T13:47:04.187 回答
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 />
    },
    {}
)

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

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

于 2018-09-20T08:39:30.057 回答
1

您可以使用 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 上

于 2020-04-13T19:37:11.237 回答
1

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

  1. 修改面板的响应并即时测试。
  2. 修改状态码以验证错误响应。
  3. 添加延迟时间来体验加载状态。
于 2021-09-24T13:31:20.520 回答
1

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

于 2019-05-29T17:47:12.583 回答