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>

密码笔

---

试试这样的方法：

从'@vue/test-utils'导入{shallowMount}；
从“@/components/WorkDateTime.vue”导入WorkDateTime；
描述（'WorkDateTime.vue'，（）=>{
它（'userFuncs empty'，（）=>{
让包装器=浅装（WorkDateTime）；
expect（wrapper.vm.userFuncs）.toStrictEqual（{}）；
});
它（'userFuncs filled'，async（）=>{
让包装器=浅装（WorkDateTime）；
让wait3Seconds=（）=>newpromise（resolve=>setTimeout（（）=>resolve（），3000））；
等待wait3秒（）；
expect（wrapper.vm.userFuncs['myCustomFunction']）.toBeInstanceOf（函数）；
});
});

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()
  })
}