Как правильно написать тест-кейс для метода, используя 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: {}


Я что-то делаю не так? Буду признателен за любой фидбэк.


Ответы (0 шт):