vue js jest.spyОтключенный вызов функции не работает в модульном тесте для компонента класса

Question

Я новичок в модульном тестировании и пытаюсь проверить функцию, вызываемую при монтировании компонента. Ниже приведен код компонента, который я тестирую:

<template>
  <div>
    <div class="grid">
      <Card
        class="grid_layout_col"
        @showItemDetail="showDetails(index)"
        @openEditModal="editItem(index)"
      />
    </div>
    <!-- fab -->
    <Fab ref="fabBtn" @addItem="showModal" />
  </div>
</template>

<script lang="ts">
// @ is an alias to /src
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import router from "../router";
import { store, actions, mutations } from "@/store/store";
import Card from "@/components/Card.vue";
import Fab from "@/components/Fab.vue";

@Component({
  components: {
    Card,
    Fab
  }
})
export default class Home extends Vue {
  itemData: Array<object>;

  constructor() {
    super();
    this.itemData = [];
  }

  convertBlobURL(imageData: string) {}

  showDetails(val: number) {}

  addItem() {}

  editItem(val: string) {}

  showModal() {}

  resetHeader() {}

   mounted() {
    // load the card data
    actions.loadData();

  }
}

Вот код для действий:

 export const actions = {
  loadData(){
    store.loadData();
  },
  getDelStoreLength(): number {
    return store.delStore.length;
  },
  getStoreLength(): number {
    return store.dataStore.data.length; 
  }
};

Проблема, с которой я сталкиваюсь, заключается в следующем: 1007 *

import { shallowMount, mount } from "@vue/test-utils";
import Home from "@/views/Home.vue";

//
const factory = (propsData: object) => {
  return shallowMount(Home, {
    propsData: {
      ...propsData
    },
    stubs: {

    },
    mocks: {

    }
  });
};
it("should call actions.loadData function on mounted", () => {
  const wrapper = factory({});
  let spyIt = jest.spyOn(Home as any, 'actions.loadData');
  expect(spyIt).toHaveBeenCalled();
});

Я получаю следующее:

Невозможно следить за свойством actions.loadData, поскольку оно не является функцией; вместо этого дано неопределенное значение

Кто-нибудь знает, что это такое и как это исправить?

Answer 1

Как уже отмечалось, actions не является свойством компонента Home, поэтому за ним нельзя следить. Даже если бы это было так, его нельзя было бы шпионить как jest.spyOn(Home as any, 'actions.loadData'), потому что свойства компонента не отображаются на самом объекте компонента, и некорректно ссылаться на вложенные свойства с помощью строки 'actions.loadData'.

Это должно быть:

import { actions } from "@/store/store";
  ...
  let spyIt = jest.spyOn(actions, 'loadData').mockImplementation(() => {});
  // mount Home
  expect(spyIt).toHaveBeenCalled();