在我的组件中具有使用axios进行API调用的方法后,我检查了有关如何对其进行测试的文档,但似乎无法弄清楚如何进行测试。任何帮助将不胜感激。
loadContents() {
axios.get('/vue_api/content/' + this.slug).then(response => {
this.page_data = response.data.merchandising_page
}).catch(error => {
console.log(error)
})
},
答案 0 :(得分:0)
您可以使用moxios
或axios-mock-adapter
自动模拟Axios请求。对于开发人员的人机工程学,我更喜欢后者。
考虑使用Axios提取用户数据的UserList
组件:
// UserList.vue
export default {
data() {
return {
users: []
};
},
methods: {
async loadUsers() {
const { data } = await axios.get("https://api/users");
this.users = data;
}
}
};
使用axios-mock-adapter
,相关的测试将Axios GET
请求的存根存入API URL,而是返回模拟数据:
import axios from "axios";
const MockAdapter = require("axios-mock-adapter");
const mock = new MockAdapter(axios);
import { shallowMount } from "@vue/test-utils";
import UserList from "@/components/UserList";
describe("UserList", () => {
afterAll(() => mock.restore());
beforeEach(() => mock.reset());
it("loads users", async () => {
mock
.onGet("https://api/users")
.reply(200, [{ name: "foo" }, { name: "bar" }, { name: "baz" }]);
const wrapper = shallowMount(UserList);
await wrapper.vm.loadUsers();
const listItems = wrapper.findAll("li");
expect(listItems).toHaveLength(3);
});
});