11

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

这里有带测试的沙箱，你可以看到当我们运行测试时，第二次检查失败，因为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()函数返回带有身份验证令牌的标头。

数据发送

这涉及数据发送的内容（首先是在使用mock的测试调用之前，其次是在测试的函数中，数据日志是发送到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")}});

我在 axios-mock-adapter github 测试页面上看到，最终我们应该headers在没有标签的情况下进行测试：
{headers: {Autorization: "Bearer token"}}become{Autorization: "Bearer token"}
但不幸的是，它并没有比我更好地工作。

解决方案

根据 Matt Carlotta 和他的代码框的响应，我用 2 个固定问题示例修改了我的：

  • POST使用 axios*进行请求模拟测试
  • POST使用 axios* 实例的请求模拟测试

* 和axios-mock-adapter

4

2 回答 2

4

好的，第二轮。

  • 当需要一些时间来响应时，您的flushPromises功能无法promises正确解析。promise解决方法是在文件中return的前面promise加上一个。由于我们在,上使用，因此不需要。await.test.jsawaitpromiseawait flushPromises()
  • 另外，headers在onPost模拟函数内包含 会导致函数抛出错误。由于您只是在模拟此请求（而不是实际测试其集成），因此您不需要包含它们。但是，由于您已经在使用自定义axios配置，您只需将 包含headers在axiosConfig.js文件中即可。有关更多信息，请参阅您的代码框的工作示例。

如下面的Unit Testing代码框所示，如果您尝试await flushPromises()在该deleteUserDataOverTime方法上使用，它会失败。它失败了，因为它没有解决promise. 这promise需要一些时间来解决，并且没有得到妥善处理。

此外，由于asynchronous测试的性质，您不应该在同一个测试文件中包含unit和测试。integration由于测试是，在同一个模拟请求或同一个模拟实例asynchronous上调用mockAxios.reset()或—— 进行任何额外的真实或虚假 API 调用—— 可能并且将无意中影响所有 API 调用（同样它们是异步的，而不是同步的测试）。mockAxios.restore()

对 API进行单元测试的工作示例：https ://codesandbox.io/s/6z36z6pzyr （假 API——包括GET、、PUT和）POSTDELETE

集成测试 API 的工作示例：https ://codesandbox.io/s/7z93xnm206 （真正的 API - 仅包括GET, 但功能应保持不变PUT,POST和DELETE）

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

于 2019-03-28T16:46:11.220 回答
3

好吧，这是一个棘手的问题。问题出在axios-mock-adapter包上。它需要使用该.create()方法的 axios 实例。请参见此处： 创建实例

在您的 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的测试中得到了提示。

一个例子是： 后测

于 2019-03-29T15:39:50.627 回答