使用 axios-mock-adaptor 进行测试时获得'Request failed with status code 404'

Question

在default.js文件中创建Axios实例。

import axios from "axios";
const BASE_URL = import.meta.env.VITE_BACKEND_BASE_URL;
const instance = axios.create({
baseURL: BASE_URL,
});
instance.defaults.headers.common["Accept"] = "application/json";
instance.defaults.headers.post["Content-Type"] = "application/json";
instance.interceptors.request.use(
function (config) {
config.headers.Authorization = localStorage.getItem("token");
return config;
},
function (error) {
return Promise.reject(error);
}
);
export default instance;

我在default.test.js文件中使用axios-mock-adapter库编写单元测试用例，如下所示。

import MockAdapter from "axios-mock-adapter";
import axios from "@/axios/default";
describe("Axios functions", () => {
// Create a new instance of the mock adapter
let mock;
beforeEach(() => {
mock = new MockAdapter(axios);
});
it("sends a GET request to the endpoint", async () => {
const endpoint = "/example";
const url = import.meta.env.VITE_BACKEND_BASE_URL + endpoint;
const token = "12345";
const expectedData = { example: "data" };
// Mock the GET request to return the expected data
mock
.onGet(url, {
headers: { Authorization: token, Accept: "application/json" },
})
.reply(200, expectedData);
localStorage.setItem("token", token);
// Call the get function and wait for it to resolve
const response = await axios.get(endpoint);
// Check that the GET request was called with the correct URL and headers
expect(mock.history.get.length).toBe(1);
expect(mock.history.get[0].url).toBe(endpoint);
expect(mock.history.get[0].headers.Authorization).toBe(token);
expect(mock.history.get[0].headers.Accept).toBe("application/json");
// Check that the get function returns the expected data
expect(response.data).toEqual(expectedData);
});
it("sends a POST request to the endpoint", async () => {
const endpoint = "/example";
const url = import.meta.env.VITE_BACKEND_BASE_URL + endpoint;
const token = "12345";
const postData = { example: "data" };
const expectedData = { success: true };
// Mock the POST request to return the expected data
mock
.onPost(url, postData, {
headers: {
Authorization: token,
"Content-Type": "application/json",
Accept: "application/json",
},
})
.reply(200, expectedData);
localStorage.setItem("token", token);
// Call the post function and wait for it to resolve
const response = await axios.post(endpoint, postData);
// Check that the POST request was called with the correct URL, headers, and data
expect(mock.history.post.length).toBe(1);
expect(mock.history.post[0].url).toBe(endpoint);
expect(mock.history.post[0].headers.Authorization).toBe(token);
expect(mock.history.post[0].headers["Content-Type"]).toBe(
"application/json"
);
expect(mock.history.post[0].headers.Accept).toBe("application/json");
expect(JSON.parse(mock.history.post[0].data)).toEqual(postData);
// Check that the post function returns the expected data
expect(response.data).toEqual(expectedData);
});
});

get的单元测试通过了，没有错误，但post给出了Request failed with status code 404

PS -我正在使用vitest运行这些测试，因为这存在于vue应用程序中。

Answer 1

似乎你已经在你的onPost拦截器中定义了预期的标头，但在你的测试中的post请求没有发送相同的标头。这可能就是你得到404错误的原因。

要解决这个问题，请确保你在post请求中传递的头与你在onPost拦截器中设置的头相匹配。您可以在axios.post()方法的第三个参数中将标头作为对象传递，如下所示:

// Call the post function and wait for it to resolve
const response = await axios.post(endpoint, postData, { headers });