Vue 2 Jest测试报错：无法找到#app元素问题咨询

问题根源 #

测试执行时，项目的main.js会被加载执行，其中挂载Vue实例到#app的代码会尝试查找DOM元素，但测试环境初始DOM中不存在该元素，导致报错。即使你在测试文件的beforeEach中创建了#app，也可能因为main.js执行时机更早而无法生效。

解决方案 #

1. 修改main.js，避免测试环境自动挂载 #

将Vue实例的挂载逻辑改为仅在非测试环境执行：

// main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'

Vue.config.productionTip = false

const app = new Vue({
  vuetify,
  render: h => h(App)
})

// 仅在开发/生产环境挂载到#app
if (process.env.NODE_ENV !== 'test') {
  app.$mount('#app')
}

export default app

2. 调整测试文件的组件挂载方式 #

组件测试不需要将组件挂载到#app元素，直接移除attachTo选项即可（若有特殊需求保留，需确保beforeEach中创建#app的逻辑优先执行，但不推荐依赖全局DOM元素）：

it('check submit button is disabled if fields are empty', async () => {
  const wrapper = mount(home, {
    // 移除attachTo选项
    localVue,
    vuetify,
    store,
    stubs: ['router-link', 'router-view'],
  })
  const name = '';

  // 修正setData的错误用法：若.dname是输入框，用setValue；直接修改组件实例属性也可
  // wrapper.find('.dname').setValue(name);
  wrapper.vm.decoderName = name;
  await Vue.nextTick();

  expect(wrapper.vm.decoderName).toBe(name);
  expect(wrapper.vm.isValidForm).toBeFalsy();
  expect(wrapper.find('.createBtn').element.disabled).toBe(true);
});

额外注意点 #

• 你测试代码中的wrapper.find('.dname').setData(name)是错误用法：setData是组件实例的方法，不能直接用在DOM元素上。如果.dname是表单输入框，应使用setValue(name)；若要直接修改组件数据，可直接赋值给wrapper.vm的对应属性。

内容的提问来源于stack exchange，提问作者Haritha Perumal