Vue.js / nuxt.js-测试组件内部动态添加的方法

问题描述

我正在尝试对其中一个组件中动态创建的方法进行测试，代码如下所示。

<template>
  <div id="app">
    <div @click="executeDynamic('myCustomFunction')">Click me!</div>
  </div>
</template>

<script>
export default {
  name: "App",data () {
    return {
      // These contain all dynamic user functions
      userFuncs: {}
    }
  },created () {
    window.setTimeout(() => {
      this.$set(this.userFuncs,'myCustomFunction',() => {
        console.log('whoohoo,it was added dynamically')
      })
    },2000)
  },methods: {
    executeDynamic (name) {
      if (this.userFuncs[name]) {
        this.userFuncs[name]()
      } else {
        console.warn(`${name} was not yet defined!`)
      }
    }
  }
};
</script>

测试文件

import WorkDateTime from "@/components/WorkDateTime.vue"
import Vue from "vue"

describe("WorkDateTime.vue",() => {
  it("allowedDatesFrom: today -> NG",() => {
    const that = { 
      $set: Vue.set
    }
    expect(WorkDateTime.data.userFuncs['myCustomFunction']).toBeTruthy()
  })
}

代码笔 https://codesandbox.io/s/vue-template-forked-ec7tg?file=/src/App.vue:0-662

解决方法

尝试类似的事情：

import { shallowMount } from '@vue/test-utils';
import WorkDateTime from '@/components/WorkDateTime.vue';

describe('WorkDateTime.vue',() => {
  it('userFuncs empty',() => {
    let wrapper = shallowMount(WorkDateTime);
    expect(wrapper.vm.userFuncs).toStrictEqual({});
  });

  it('userFuncs filled',async () => {
    let wrapper = shallowMount(WorkDateTime);
    let wait3Seconds = () => new Promise(resolve => setTimeout(() => resolve(),3000));
    await wait3Seconds();
    expect(wrapper.vm.userFuncs['myCustomFunction']).toBeInstanceOf(Function);
  });
});