Question

我使用axios-mock-adapter来模拟我的API，它可以正常工作，但是在一次模拟中它返回404错误，我找不到原因。

有here个带有测试的沙箱，您可以看到我们在运行测试时，第二次检查失败，因为axios POST调用不是模拟的。我已经尝试删除标题部分，但是运行测试时沙箱崩溃了。

API的模拟（测试部分）：

import axios from "axios";
import MockAdapter from 'axios-mock-adapter';
import Utils from "../Utils/Utils";

// Global variable for post request with axios
global.users_post = axios.create({
  baseURL: "http://localhost:5000/api/",
  headers: {'Content-Type': 'application/json'}
});

/* Mockup API */
var userMock = new MockAdapter(users_post);

const user_resp_full = {
  data: {
    first_name: "Test",
    last_name: "Test",
    email: "test@gmail.com",
    address: "Test",
    zipcode: 1010,
    city: "Test",
    admin: false
  }
}

const testAPI = () => {
    userMock
      .onPost("users", user_resp_full, Utils.getAuth())
      .reply(200, {data: {status: "success"}});
}

test("something", async () => {
  let tree = shallow(<UserManage type="create" uuid="" />);
  testAPI();
  await flushPromises();
  // Some test

  tree.find("#confirm-create").simulate("click");
  await flushPromises();
  // Error 404, mock isn't trigger
})

我已经检查过，数据是相同的，端点也一样，但是似乎没有正确地模拟它。

Axios呼叫班：

function (fields) {
    users_post.post("users", fields, Utils.getAuth())
    .then(resp => {
      let data = resp.data;
      // Do something
    })
    .catch(resp => {
      let data = resp.response.data;
      // Display error
    });
}

这时，在我的Jest测试中，它返回404错误，因此它还没有模拟我的终结点API（其他方法）。
Utils.getAuth()函数返回带有auth令牌的标头。

数据发送

有关数据发送内容的信息（首先是在使用模拟进行测试调用之前，其次是在经过测试的函数中，而数据日志是将数据发送到api）：

console.log src/tests/UserManage.test.js:222
  POST USER 2
{"first_name":"Test","last_name":"Test","email":"test@gmail.com","address":"Test","zipcode":1010,"city":"Test","admin":false}
console.log src/Components/Users/UserManage.js:152
  POST USER
console.log src/Components/Users/UserManage.js:153
{"first_name":"Test","last_name":"Test","email":"test@gmail.com","address":"Test","zipcode":1010,"city":"Test","admin":false}

更新

仅当我使用带有这样的标头的POST请求时，才会发生此错误：

axios.post("http://localhost/api/user/update", {name: "Test"}, {headers: {"Authorization": "Bearer token")}});

我看到on axios-mock-adapter github test page最终应该在没有标签的情况下测试headers：
{headers: {Autorization: "Bearer token"}}成为{Autorization: "Bearer token"}
但是不幸的是，它并没有比我更好。

解决方案

在马特·卡洛塔（Matt Carlotta）和他的codeandbox的回应下，我用两个固定问题的示例修改了mine：

使用axios *对POST请求模拟的测试
使用axios *实例测试POST请求模拟

*使用axios-mock-adapter

Answer 1

好的，第二轮。

当flushPromises需要花费一些时间来响应时，您的promises函数无法正确解析promise。解决方法是return promise并将await放在.test.js文件中的前面。由于我们在await上使用promise，因此不需要await flushPromises()。
此外，在headers模拟函数中包含onPost会导致该函数引发错误。由于您只是在嘲笑此请求（而不是实际测试其集成），因此不需要包括它们。但是，由于无论如何您已经在使用自定义axios配置，因此您只需在headers文件中包含axiosConfig.js。有关更多信息，请参见代码框的工作示例。

如下面的Unit Testing代码和框中所示，如果您尝试在await flushPromises()方法上使用deleteUserDataOverTime，它将失败。之所以失败，是因为它没有解决promise。该promise需要花费一些时间来解决，并且处理不正确。

此外，由于测试具有asynchronous的性质，因此您不应在同一测试文件中包含unit和integration测试。由于测试是asynchronous，因此请在相同的模拟请求或相同的模拟实例上调用mockAxios.reset()或mockAxios.restore()-以进行任何其他真实或伪造的API调用-会并且会无意中影响所有API调用（同样，它们是异步的，而不是同步测试）。

单元测试API的工作示例：https://codesandbox.io/s/6z36z6pzyr（伪API-包括GET，PUT，POST和{{1 }}）

集成测试API的工作示例：https://codesandbox.io/s/7z93xnm206（真实的API-仅包含DELETE，但功能GET应当保持不变，{ {1}}和PUT）

代码和框的工作示例：https://codesandbox.io/s/526pj28n1n

Answer 2

好的，这是一个棘手的问题。问题在axios-mock-adapter软件包中。它需要使用.create()方法的axios实例。看这里： creating an instance

在您的App.js中，使用：

import axios from "axios";
const instance = axios.create();

instance.post("http://localhost/api/user/update", {name: "Test"}, {headers: {"Authorization": "Bearer token")}});

尽管测试中没有任何改变。

我从axios-mock-adapter的测试中得到了提示。

这样的例子是： post test

为什么我的api模拟程序返回404错误？

API的模拟（测试部分）：

Axios呼叫班：

数据发送

更新

解决方案

2 个答案: