React Testing Library 如何测试 Vue 组件？

百里雨萱提问于 2026-02-28 17:56:22 阅读 17

框架

我最近在用 React Testing Library 写测试，但项目里混用了 Vue 组件，有点懵。是不是不能直接测？

比如我有个 Vue 单文件组件，结构大概是这样：

<template>
  <button @click="handleClick">{{ count }}</button>
</template>

<script>
export default {
  data() { return { count: 0 } },
  methods: {
    handleClick() { this.count++ }
  }
}
</script>

我试过直接用 render() 挂载它，结果报错说不是 React 元素……这该咋办？难道得换测试库？

Redux 性能优化

我来解答赞 4 收藏

反馈

1 条解答

W″嘉赫 Lv1

哈，你这属于典型的"拿锤子找钉子"了。React Testing Library 顾名思义是给 React 用的，它内部依赖 React 的渲染机制，Vue 组件它根本认不出来，报错太正常了。

不过也不用慌，Testing Library 这个家族有一整套解决方案，Vue 有自己对应的 @testing-library/vue，API 设计理念跟 React 版本几乎一模一样，你学会了 React 版，Vue 版上手也就几分钟的事。

先装依赖：

npm install @testing-library/vue @testing-library/jest-dom vue-jest --save-dev

然后你的测试代码这样写：

import { render, fireEvent } from '@testing-library/vue'

import Counter from './Counter.vue'



test('点击按钮计数增加', async () => {

  const { getByText } = render(Counter)

  

  // 初始状态

  getByText('0')

  

  // 点击按钮

  await fireEvent.click(getByText('0'))

  

  // 验证更新

  getByText('1')

})

看，render、fireEvent、getByText 这些 API 是不是跟 React 版本一个味儿？这就是 Testing Library 系列的好处，跨框架一致性很强。

还有个情况，如果你项目真的是 React 和 Vue 混用，而且两边都要测，那就各自用各自的测试库，互不干扰。JS里面本来就是各跑各的，测试配置文件里把两个都配好就行，别硬想着用一套库通吃，那是在给自己挖坑。

2026-02-28 18:00