[英]How can i test an API call in vuejs using jest?
我在組件中使用此方法通過axios進行API調用時,我檢查了有關如何對其進行測試的文檔,但似乎無法弄清楚該方法。 任何幫助,將不勝感激。
loadContents() {
axios.get('/vue_api/content/' + this.slug).then(response => {
this.page_data = response.data.merchandising_page
}).catch(error => {
console.log(error)
})
},
您可以使用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);
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.