自定义组件单元测试时如何正确模拟 DOM 结构？

Zz会静提问于 2026-03-16 15:24:22 阅读 45

组件

我写了一个简单的自定义按钮组件，想用 Jest + Testing Library 做单元测试，但每次渲染都报错说找不到对应的 DOM 节点。我明明在测试里用了 render 啊，是不是我的组件结构有问题？

这是我的组件代码：

<template>
  <button class="my-btn" @click="handleClick">
    <slot></slot>
  </button>
</template>

<script>
export default {
  methods: {
    handleClick() { /* do something */ }
  }
}
</script>

测试时直接 render(MyButton) 就挂了，控制台提示“TypeError: Cannot read property ‘addEventListener’ of null”，这到底该怎么测？

我来解答赞 9 收藏

反馈

2 条解答

秋梓 Dev Lv1

我之前也遇到过，确保你在测试文件里正确导入了 Vue 并且注册了全局的 Vue 实例，有时候 Jest 的环境可能不会自动识别 Vue 组件。试试这样写：

import { createLocalVue, mount } from '@vue/test-utils'

import MyButton from '@/components/MyButton.vue'



const localVue = createLocalVue()



test('renders button with text', () => {

  const wrapper = mount(MyButton, {

    localVue,

    slots: {

      default: 'Test Button'

    }

  })

  expect(wrapper.text()).toBe('Test Button')

})

2026-03-25 11:05

迷人的子涵 Lv1

这个报错是因为你用的渲染方式不对，Vue 组件测试得用 @vue/test-utils 的 mount 方法：

import { mount } from '@vue/test-utils'

import MyButton from './MyButton.vue'



test('renders button', () => {

  const wrapper = mount(MyButton)

  expect(wrapper.find('button.my-btn').exists()).toBe(true)

  

  wrapper.find('button.my-btn').trigger('click')

})

如果想用 Testing Library 的风格，就用 @testing-library/vue，底层会自动处理 DOM 环境。

另外确保 jest.config.js 里配置了 testEnvironment: 'jsdom'，没配置的话 DOM 是 null。

2026-03-17 09:06