小编Dav*_*Hut的帖子

我正在使用vue.js和vue-cli构建一个应用程序，您可以在其中配置订单。用户应该能够选择是否要在每个订单后配置另一个订单，或者是否完成。为了实现这一目标，我想递归地重用我的订单组件：

订单.vue：

<template>
  <div id="order">
    <other> // just to show that I used other components here and how
    <div>
      <button class="CustomButton" v-on:click="finalizeOrder">
        Finalize Order
      </button>
      <button class="CustomButton" v-on:click="configureAdditionalOrder">
        Configure Additional Order
      </button>
    </div>
    <order v-if="additionalOrder" @passOrderObject="catchOrderObjectFromRecursiveChild" @finalizeOrder="passFinalizeOrder" />
  </div>
</template>

<script>
import Other from '@/components/Other.vue'

export default {
  components: {
    Other
  },
  data () {
    return {
      additionalOrder: false
    }
  },
  methods: {
    configureAdditionalOrder () {
      this.buildOrderObject()
      this.additionalOrder = true
    },
    catchOrderObjectFromRecursiveChild (order) {
      this.$emit('passOrderObject', order) …

我正在为 Vue.js 组件编写单元测试，该组件显示一些单选按钮，并在选中按钮时发出带有单选按钮 id 的事件：

应用程序元素.vue：

<template>
  <div id="element">
    <label>
      <input
        type="radio"
        name="Element"
        id="element1"
        v-on:change="chooseElement"
      />
      Element1
    </label>
    <label>
      <input
        type="radio"
        name="Element"
        id="element2"
        v-on:change="chooseElement"
      />
      Element2
    </label>
    <label>
      <input
        type="radio"
        name="Element"
        id="element3"
        v-on:change="chooseElement"
      />
      Element3
    </label>
    <label>
      <input
        type="radio"
        name="Element"
        id="element4"
        v-on:change="chooseElement"
      />
      Element4
    </label>
  </div>
</template>

<script>
export default {
  methods: {
    chooseElement () {
      var chosenElement = document.querySelector('input[name="Element"]:checked').id
      this.$emit('passChosenElement', {category: chosenElement})
    }
  }
}
</script>

<style>
</style>

我为该组件编写了以下测试：

ApplicationElement.spec.js：

import { shallowMount, createLocalVue } from '@vue/test-utils'
import 'regenerator-runtime/runtime' …