Question

我有如下的vue组件代码

updated: function() {
   // set showPackages = true after all the child component render
   this.$nextTick(function() {
      this.show = this.element.show ? true : false
      this.done = true
   })
}

现在，我们要测试此更新的挂钩，并检查是否设置了this.show。

有人知道如何为此生命周期挂钩编写测试用例吗？

Answer 1

当路线更改时更新的挂钩会触发，因此我们需要做的就是更改路线。

添加路由器进行测试

import { shallowMount, config, createLocalVue } from "@vue/test-utils";
import VueRouter from "vue-router";
const localVue = createLocalVue();
localVue.use(VueRouter);

启动它并添加到包装器

const router = new VueRouter({
  mode: "abstract"
});
const wrapper = shallowMount(YourComponent, {
  localVue,
  router
};

然后在测试期间推送新路线

router.push('/route-1');

这将触发updated钩子

Answer 2

最简单的方法似乎是setProps，由父母来做

it('When parent's index change, call the updateHandler', () => {
   const wrapper = mount(YourComponent, { localVue });
   const spy = jest.spyOn(wrapper.vm, 'handleUpdate');
   wrapper.setProps({ index : 1 });
   expect(spy).toHaveBeenCalled()
})

Answer 3

您可以将update钩子的逻辑提取到单独的方法：

  updated() {
    // set showPackages = true after all the child component render
    this.handleUpdate();
  },

  methods: {
    handleUpdate() {
      this.$nextTick(() => {
        this.show = this.element.show ? true : false;
        this.done = true;
      });
    }
  }

单元测试：

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

const localVue = createLocalVue();

describe('YourComponent.vue', () => {

  test('async update lifecycle hook behavior', () => {
    const wrapper = shallowMount(YourComponent, {
      localVue,
      propsData: {
        element: {
          show: false
        },
        done: false,
        show: true
      }
    });
    expect(wrapper.exists()).toBe(true);
    expect(wrapper.vm.done).toBe(false);
    wrapper.vm.handleUpdate();
    wrapper.vm.$nextTick(() => {
      expect(wrapper.vm.done).toBe(true);
      expect(wrapper.vm.show).toBe(false);
    });
  });
});

另请参阅： https://vue-test-utils.vuejs.org/guides/testing-async-components.html

其他建议：

您可以通过替换以下代码来进一步改进代码：

this.show = this.element.show ? true : false;

通过

this.show = !!this.element.show;

（另请参见：https://eslint.org/docs/rules/no-unneeded-ternary）

使用带有“ vue-test-utils”和“ jest”的“ Updated”钩子进行测试

3 个答案: