使用 `vue-test-utils` 和 `jest` 使用 `Updated` 钩子进行测试答案

【问题标题】：Testing with `Updated` hook with `vue-test-utils` and `jest`使用 `vue-test-utils` 和 `jest` 使用 `Updated` 钩子进行测试
【发布时间】：2020-02-13 05:15:58
【问题描述】：

我有如下 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 是否设置。

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

【问题讨论】：

标签： unit-testing vue.js jestjs vue-test-utils

【解决方案1】：

您可以将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）

【讨论】：

在我看来，这并不能真正回答问题，或者至少不能完全回答。您正在测试 handleUpdate() 方法是否符合您的预期，但您没有测试 handleUpdate() 是从 updated 挂钩调用的。换句话说，您可以删除整个 updated 钩子，您的测试仍然可以通过。

【解决方案2】：

更新的钩子在路由改变时触发，所以我们需要做的就是改变路由。

添加路由器进行测试

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钩子

【讨论】：

【解决方案3】：

似乎最简单的方法是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()
})

【讨论】：

就我而言，这在我添加 await 关键字（如 await wrapper.setProps({ visible: false })）之前不起作用