vue.js test-utils 如何测试挂载生命周期钩子(Hook)中的函数

Question

在下面的组件中，我想测试 mounted() Hook 中的函数(模拟它们)

ContactForm.vue

    <template>
       ...
    </template>

    <script>
    import { mapGetters } from "vuex";
    import appValidationDictionarySetup from "@/locales/appValidationDictionary";
    import router from "@/router";

    export default {
      name: "contactForm",
      $_veeValidate: { validator: "new" },
      data() {
        return {
          ...
        };
      },
      computed: {
        ...mapGetters(["language"]),
        ...mapGetters("authentication", ["loading"]),
        ......
      },
      watch: {
        language(newLanguage) {
          this.$validator.localize(newLanguage);
        }
      },
      methods: {
        ...
      },
      mounted() {
        appValidationDictionarySetup(this.$validator);
        this.$validator.localize(this.language);
      }
    };
    </script>

以下规范测试失败，因为我不知道如何模拟这两个函数:appValidationDictionarySetup() 和 $validator.localize()任何反馈表示赞赏..(我应该测试它吗？......也许是第一个提示)

ContactForm.spec.js

    import Vue from "vue";
    import Vuex from 'vuex';
    import { storeMock } from './mocks.js';
    import VeeValidate from "vee-validate";

    import i18n from "@/locales";
    import Vuetify from "vuetify";

    import { shallowMount } from "@vue/test-utils";
    import ContactForm from "@/components/Home/ContactForm.vue";

    Vue.use(Vuex);
    Vue.use(VeeValidate, { errorBagName: "errors" });
    Vue.use(Vuetify);

    describe("ContactForm.vue", () => {
      let wrapper;
      let options;
      const store = new Vuex.Store(storeMock)
      const v = new VeeValidate.Validator();

      beforeEach(() => {
        const el = document.createElement("div");
        el.setAttribute("data-app", true);
        document.body.appendChild(el);
        options = {
          sync: false,
          store,
          provide: () => ({
            $validator: v
          }),
          i18n
        }
      });

      it("Mounted", async () => {
        // given
        // when
        wrapper = shallowMount(ContactForm, options);
        // then
        console.log(wrapper.vm.$validator);
     expect(wrapper.vm.$validator.localize()).toHaveBeenCalledTimes(1);
      });
    });

控制台日志

    ContactForm.vue
        ✕ Mounted (281ms)

      ● ContactForm.vue › Mounted

        expect(jest.fn())[.not].toHaveBeenCalledTimes()

        jest.fn() value must be a mock function or spy.
        Received: undefined

          41 |     // then
          42 |     console.log(wrapper.vm.$validator);
        > 43 |     expect(wrapper.vm.$validator.localize()).toHaveBeenCalledTimes(1);
             |                                              ^
          44 |   });
          45 |
          46 |

          at Object.toHaveBeenCalledTimes (tests/unit/ContactForm.spec.js:43:46)
          at tryCatch (node_modules/regenerator-runtime/runtime.js:62:40)
          at Generator.invoke [as _invoke] (node_modules/regenerator-runtime/runtime.js:296:22)
          at Generator.prototype.(anonymous function) [as next] (node_modules/regenerator-runtime/runtime.js:114:21)
          at step (node_modules/@babel/runtime/helpers/builtin/asyncToGenerator.js:10:30)
          at _next (node_modules/@babel/runtime/helpers/builtin/asyncToGenerator.js:25:9)
          at node_modules/@babel/runtime/helpers/builtin/asyncToGenerator.js:32:7
          at Object.<anonymous> (node_modules/@babel/runtime/helpers/builtin/asyncToGenerator.js:5:12)

      console.log tests/unit/ContactForm.spec.js:42
        ScopedValidator {
          id: 6,
          _base:
           Validator {
             strict: true,
             errors: ErrorBag { vmId: [Getter/Setter], items: [Getter/Setter] },
             fields: FieldBag { items: [Getter/Setter] },
             paused: false,
             fastExit: true },
          _paused: false,
          errors: [Getter/Setter] }

    Test Suites: 1 failed, 1 total
    Tests:       1 failed, 1 total
    Snapshots:   0 total
    Time:        3.677s, estimated 6s
    Ran all test suites matching /ContactForm.spec.js/i.
    error Command failed with exit code 1.

更新

我试过了:

    it("Mounted", async () => {
        // given
        const localizeMock = jest.spyOn(v, "localize");
        localizeMock.mockImplementation(() => "mock");
        // when
        wrapper = shallowMount(ContactForm, options);
        // then
        console.log(wrapper.vm.$validator);
        expect(wrapper.vm.$validator.localize()).toHaveBeenCalledTimes(1);
      });

但它失败了，并出现以下错误消息

      ● ContactForm.vue › Mounted

          expect(jest.fn())[.not].toHaveBeenCalledTimes()

          jest.fn() value must be a mock function or spy.
          Received: undefined

            43 |     // then
            44 |     console.log(wrapper.vm.$validator);
          > 45 |     expect(wrapper.vm.$validator.localize()).toHaveBeenCalledTimes(1);
               |                                              ^
            46 |   });
            47 |
            48 |

更新 2

我不知道这样做是否正确，但我更新了 mounted() 测试以检查是否将 validator.locale 设置为存储值没关系..;是否足以进行测试？

    it("Mounted", async () => {
    // when
    wrapper = shallowMount(ContactForm, options);
    // then
    expect(wrapper.vm.$validator.locale).toBe("en");
    });

控制台日志

 PASS  tests/unit/ContactForm.spec.js
  ContactForm.vue
    ✓ Mounted (163ms)

Answer 1

import { shallowMount, createLocalVue } from '@vue/test-utils'
import MyComponent from '/path/to/MyComponent'

describe('MyComponent.vue', () => {
  let spy
  let localVue

  beforeEach(() => {
    spy = jest.spyOn(MyComponent.methods, 'the_name_of_the_method_called_on_mount')

    localVue = createLocalVue()

    wrapper = shallowMount(MyComponent, {localVue})
  })

  it('the_name_of_the_method_called_on_mount is called on mount!', () => {
    expect(spy).toHaveBeenCalled()
  })
})