从童话模拟API调用

问题描述 投票:5回答:3

是否axios-mock-adapter只与axios提出了要求工作?

我已经编写了POST到一个API(使用香草XHR,不爱可信)的成分。我在童话测试它,并希望从该端点还不存在拦截那些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

谢谢。

reactjs mocking axios storybook axios-mock-adapter
3个回答
3
投票

XHR-模拟应适用于本地测试,你可能不希望使整个Internet的请求。

测试之外,如果你正在等待真正的端点兴建,你可以在开发中使用模拟/它(https://mockit.io)。你可以要求自己的专用的子域,将其交换出去之后为真正的一个。免责声明:这是一个横向项目,我最近发布的,他会喜欢上它的任何反馈!


1
投票

您可以使用XHR-模拟,而不是爱可信 - 模拟适配器。

实用程序嘲讽的XMLHttpRequest。

伟大的测试。伟大的原型,同时后端仍然在建。

在工作和的NodeJS在浏览器中。与爱可信,jQuery的,SuperAgent的>大概每隔库兼容建立在XMLHttpRequest的

import mock from 'xhr-mock';

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

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

    return <MyComponent />
    },
    {}
)

另外,你需要添加jQuery脚本在预览head.html文件中的故事书

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


1
投票

我已经使用json-server拦截API调用启动。你必须在一个选项卡来启动它,而在另一个开始的故事书,但它是很酷。

© www.soinside.com 2019 - 2024. All rights reserved.