Как правильно написать тест-кейс для метода, используя vue-test-utils?
Всем привет!
Я совсем недавно начал писать тесты и пока у у меня много вопросов.
Например сейчас я пытаюсь покрыть тестом логику у метода getUsers в компоненте, код которого будет ниже:
<template>
<div>
<form id="form">
<button
id="submit"
type="button"
:disabled="isLoading"
@click="getUsers()"
>
Get users
</button>
<p>Results:</p>
<div v-if="isLoading" class="loader"></div>
</form>
<textarea
name=""
readonly
id="result"
cols="30"
rows="10"
:value="usersFormatted"
></textarea>
<br />
<button id="clear_btn" @click="clearUsers">Clear</button>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "Widget",
data: () => ({
isLoading: false,
users: [],
}),
computed: {
usersFormatted() {
return this.users.reduce((acc, val) => {
acc += `${val.id} ${val.email} \n`;
return acc;
}, "");
},
},
methods: {
async getUsers(add = "") { // этот метод необходимо покрыть тестом
this.clearUsers();
this.isLoading = true;
try {
const { data } = await axios.get(`https${add}://reqres.in/api/users`);
this.users = data.data;
this.isLoading = false;
} catch (e) {
this.isLoading = false;
throw new Error(e);
}
},
clearUsers() {
this.users = [];
},
},
};
</script>
Этот метод работает асинхронно - получает список юзеров, при клике на кнопку. И вот код к этому месту:
import { shallowMount } from "@vue/test-utils";
import Widget from "@/components/Widget.vue";
jest.mock("axios"); // мокаю тут axios. Это вообще тут нужно?
describe("Widget", () => {
it("sould call axios and return users array", async () => {
const wrapper = shallowMount(Widget);
const fetchData = {
get: jest.fn(() => Promise.resolve({ id: 1, email: "[email protected]" })) // тут тоже мокаю ответ
};
wrapper.find("#submit").trigger("click"); // событие-клик
expect(wrapper.vm.getUsers()).toBeCalledWith(fetchData); // вызываю метод и ожидаю, что он будет вызван с замоканными данными.
});
});
На данный момент получаю ошибку при выполнении команды yarn jest :
Matcher error: received value must be a mock or spy function
Received has type: object
Received has value: {}
Я что-то делаю не так? Буду признателен за любой фидбэк.