自定义Vue组件的单元测试怎么写才不会报错？

Top丶伊芃提问于 2026-03-01 11:26:21 阅读 6

组件

我用 Vue 3 写了个带 props 和 emit 的自定义组件，想用 Vitest + Vue Test Utils 测试它，但一跑测试就报错说找不到组件实例。

我试过这样写测试：

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

test('emits click event', () => {
  const wrapper = mount(MyButton, { props: { label: 'Click me' } })
  wrapper.find('button').trigger('click')
  expect(wrapper.emitted()).toHaveProperty('click')
})

但控制台一直提示 [Vue warn]: Component provided is not a valid component，是我哪里没配对吗？

单元测试自定义组件

我来解答赞 1 收藏

反馈

1 条解答

上官毓金 Lv1

你这个问题大概率是测试环境没配好，Vitest 需要 vue 插件才能解析 .vue 文件。

检查一下你的 vitest.config.js 或 vite.config.js，加上这个：

import { defineConfig } from 'vitest/config'

import vue from '@vitejs/plugin-vue'



export default defineConfig({

  plugins: [vue()],

  test: {

    environment: 'jsdom'

  }

})

另外确认 @vue/test-utils 版本是 2.x 以上，Vue 3 不支持老版本。装一下 jsdom 环境：npm install -D jsdom @vue/test-utils，重新跑测试就好了。

2026-03-01 12:13