使用 `vue-test-utils` 和 `jest` 使用 `Created` 钩子进行测试

Question

我有一个像这样的 Vue 页面：

<template>
</template>

<script>
created(){
    this.doSomething();
}

methods: {
    doSomething() {
        .....
    }
}

</script>

现在，我们要测试这个创建的钩子并检查 doSomething() 方法是否被调用。

这样试过，jest也是在package.json中导入的

import {
  shallowMount,
  createLocalVue,
} from '@vue/test-utils';

const localVue = createLocalVue();

import Xyx from '/Xyx.vue';

const init = () => {
  wrapper = shallowMount(Xyx, { localVue });
  cmp = wrapper.vm;
};

describe('#created', () => {
  it('#doSomething', () => {
    init();
    wrapper.setMethods({
      doSomething: jest.fn(),
    })
    expect(cmp.doSomething).toHaveBeenCalled();
  });
});

我可以做这个创建的钩子的单元测试用例吗？

Answer 1

因为您的方法被调用created，所以它在您设置模拟之前运行。因此，您的测试将失败。
您必须在初始化时用模拟替换该方法（在您的情况下， on shallowMount）：

describe('Xyz', () => {
  it('should call doSomething() when created', () => {
    const doSomething = jest.fn()
    wrapper = shallowMount(Xyz, {
      localvue,
      methods: { doSomething }
    });
    expect(doSomething).toHaveBeenCalled();
  });
});

旁注：您没有声明cmp. 在测试开始时，您应该有一个 let cmp;

一个非常相似的讨论here。在链接的注释上方，有一种方法可以模拟大多数 Vue 组件生命周期钩子的属性。

Answer 2

该methods选项在 v1 of 中已弃用@vue/test-utils，因此已接受的答案不再有效。我自己遇到了这个问题，并决定深入研究源代码以找出如何测试它。

看起来Vue实际上将所有钩子存储在$options属性中。每个钩子都有一个选项，它是一个函数数组。需要注意的是，上下文不绑定到所述函数，因此您需要使用call或apply执行它们。

vm.$options.created.forEach(hook => {
  hook.call(vm);
});