Javascript vue测试utils为document.querySelector返回null

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

ApplicationElement.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>

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

const localVue = createLocalVue()

describe('ApplicationElement tests', () => {
    it('should emit event with element1 parameter on corresponding radio button choice', async() => {
        const wrapper = shallowMount(ApplicationElement, {
            localVue,
            attachTo: document.body,
            propsData: {
                recursionNumber: 1
            }
        })
        await wrapper.find('input[type="radio"][id="element1"]').setChecked()
        expect(wrapper.emitted().passChosenElement[0]).toEqual([{element: 'element1'}])
        wrapper.destroy()
    })
})

测试失败，原因是：“TypeError:无法读取null的属性“id” 如果我从组件中的chooseElement方法中删除document.querySelector行并手动发出正确的id，则测试成功

---

如何让document.querySelector与vue测试UTIL一起工作？

我知道，这个问题已经有点老了，但我终于找到了解决方案。您需要使用

attachTo

（自2021年5月起）将组件附加到html元素。解决方案如下所示：

description（'ApplicationElement测试'，（）=>{
它（'应该在相应的单选按钮选项上发出带有element1参数的事件'，async（）=>{
常量elem=document.createElement（'div'）
if（document.body）{
document.body.appendChild（elem）
}
const wrapper=shallowMount（ApplicationElement{
localVue，
附件：document.body，
propsData：{
递归数：1
},
附件：埃伦，
})
wait wrapper.find（'input[type=“radio”][id=“element1”]”）。setChecked（）
expect（wrapper.emissed（）.passChosenElement[0]）.toEqual（[{element:'element1'}]））
wrapper.destroy（）
})
});

正如您已经做的那样，在每次测试之后调用

wrapper.destroy（）

非常重要。重构小技巧：在每个回调函数之后，将

包装器.destroy（）放入
中。在这里你可以找到更多关于