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发出请求的本地测试。

除了测试，如果您正在等待要构建的实际端点，则可以在开发中使用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 />
    },
    {}
)

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

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

Answer 3

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

Answer 4

您可以使用fetchMock npm模块。您提供的数据将模拟所有XHR调用。

故事书配置：

class MyApp extends StatelessWidget {
  onAuthStateChanged() {
    FirebaseAuth _auth = FirebaseAuth.instance;
    return new StreamBuilder(
        stream: _auth.onAuthStateChanged,
        builder: (BuildContext context, snapshot) {
          if (snapshot.hasData) {
            return DescriptionPage();
          }
          return SignInPage();
        })
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: onAuthStateChanged(),
      debugShowCheckedModeBanner: false,
      routes: <String, WidgetBuilder>{
        '/SignInPage': (BuildContext context) => SignInPage(),
        '/DescriptionPage': (BuildContext context) => DescriptionPage(),
      },
    );
  }

完整的教程操作方法位于YouTube

Mock api来自Storybook

4 个答案: