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

我使用

axios mock adapter

模拟我的API，它工作正常，但在一个模拟上返回404错误，我找不到原因

有一个带有test的沙盒，您可以看到当我们运行测试时，第二次检查失败了，因为

axios POST

调用没有被模拟。我试图删除标题部分，但在运行测试时，沙盒刚刚崩溃。

---

API模拟（测试部分）： 此时，在我的Jest测试中，它返回404错误，因此它没有模拟我的端点API（其他作品）。

Utils.getAuth（）

函数返回一个带有auth令牌的头。

---

数据发送 这涉及到数据发送的内容（第一个是在mock的测试调用之前，第二个是在测试函数中，数据日志是发送到api的数据）：

---

更新 只有当我使用标题如下的

POST

请求时，才会发生此错误：

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

我已经看到，最终我们应该在测试中使用

标题
，而不使用前面的标签：

{headers:{Autorization:“Bearer token”}
变成
{Autorization:“Bearer token”}


但不幸的是，它的效果并不比我好。

解决方案
根据Matt Carlotta和他的codesandbox的回复，我用两个固定问题的示例进行了修改：


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

*使用axios模拟适配器，第二轮


当
promise
函数需要一些时间才能响应时，您的
flushPromises
函数无法正确解析
promises
。解决方法是
返回
承诺
并在
test.js
文件中的
等待
。由于我们在
promise
上使用
await
，因此不需要
await flushPromises（）

此外，在
onPost
mock函数中包含
标题将导致函数抛出错误。因为您只是模拟这个请求（而不是实际测试其集成），所以不需要包含它们。但是，由于您已经在使用自定义的
axios
配置，因此可以在
axioconfig.js
文件中包含
头文件。有关更多信息，请参见代码沙盒的工作示例


如下面的
单元测试
codesandbox所示，如果尝试在
deleteUserDataTimeout
方法上使用
wait flushPromises（）
，则失败。它失败是因为它没有解析
承诺
。此
promise
需要一段时间才能解决，而且处理不当

此外，由于测试的
异步
性质，您不应该在同一测试文件中包含
单元
和
集成
测试。由于测试是
异步的
，因此对同一模拟请求或同一模拟实例调用
mockAxios.reset（）
或
mockAxios.restore（）（同样，它们是异步测试，而不是同步测试）

单元测试API的工作示例：（假API——包括
GET
、
PUT
、
POST
和
DELETE
）

集成测试API的工作示例：（真正的API——只包括
GET
，但是
PUT
、
POST
和
DELETE
的功能应该保持不变）

代码沙盒的工作示例：
好的，这是一个棘手的问题。问题出在程序包上。它需要使用
.create（）
方法的axios实例。
请看这里：

在App.js中，
使用：

不过，在测试中不需要做任何更改

我从测试中得到了提示

这方面的一个例子是：
可能完全不相关，但在testApi函数中，没有返回任何内容。事实上，我不明白testApi函数的意义，如果将userMock.onPost（）直接放在测试中（“某物”）会怎么样？感谢您的评论，我测试了它，但不幸的是它不起作用。我将该函数用于其他端点的其他模型，它们也起作用。您是否尝试过在onPost调用中添加前导斜杠，“/users”？示例中都显示了前导斜杠，@N3SS4H是的，但我使用的axios配置中包含..基本url，如
http://localhost:5000/
我对它进行了测试，但不起作用。你的回答对我的问题没有真正的帮助，你用
GET
请求描述了测试，但没有人提到带有标题的
POST
请求可能是错误的。但是我将创建一个可以复制的测试。是的，这很重要，因为我的
GET
请求（在您的测试中也是如此）在我的测试中工作得非常完美，但我的
POST
请求并非都失败了。因此我搜索了
POST
请求失败的原因，但我将用它创建一个沙盒测试。我添加了一个沙盒链接。请仔细阅读：API实现测试（也称
单元测试
）将模拟
请求
、
副作用
和
结果
。API集成测试（也称
端到端测试
）将实际测试从客户端到API的
请求
、
副作用
和
结果
。我还更新了上面的答案以突出差异。我很确定我解决了您的问题。请参阅上面更新的答案。就像在
axios模拟适配器
的github上一样，我将更新的答案和解决方案一起发送给您此外，我的问题是，我已经使用了一个带有自定义配置的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
    });
}

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}

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

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

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