Vue3中Composition API与Options API的测试机制是否一致？

核心测试逻辑完全一致 #

不管用哪种API写Vue组件，测试的核心目标都是一样的：验证组件渲染是否符合预期、用户交互是否触发正确的逻辑、业务规则是否生效。比如测试表单提交、列表渲染、按钮点击后的状态变化这些场景，两种API的测试思路没有本质区别。

关键差异与针对性技巧 #

1. 可以独立测试组合式函数 #

Composition API的一大优势是能把逻辑抽成独立的useXXX函数，这时候你完全不需要挂载组件，就能单独测试这些函数的逻辑：

// 示例：测试useCounter组合式函数
import { useCounter } from '@/composables/useCounter'

test('useCounter increments count correctly', () => {
  const { count, increment } = useCounter()
  increment()
  expect(count.value).toBe(1)
  increment(3)
  expect(count.value).toBe(4)
})

相比之下，Options API的逻辑分散在data、methods、computed里，很难单独抽离出来测试，必须挂载组件才能验证。

2. 组件测试的小细节 #

• 访问<script setup>内的属性：如果你的组件用了<script setup>，里面定义的变量和方法默认是私有的，没法像Options API那样直接通过wrapper.vm.xxx访问。解决办法有两个：

  • 用defineExpose把需要测试的内容暴露出来：

    <script setup>
    const count = ref(0)
    const increment = () => count.value++
    defineExpose({ count, increment })
    </script>
    

    测试时就能通过wrapper.vm.count拿到对应的值。
  • 优先通过用户行为或渲染结果验证：比如不要直接检查count的值，而是模拟点击按钮，然后看页面上显示的数字是否增加——这是更符合黑盒测试的思路，测试也更健壮，不会因为组件内部实现变化而失效。

• 生命周期钩子：不管是用Options API的mounted还是Composition API的onMounted，测试组件挂载后的逻辑时，只要正常挂载组件，对应的钩子都会执行，写法完全一致。

3. 依赖注入的测试无差异 #

不管用哪种API使用provide/inject，测试时都可以通过测试工具的global.provide注入依赖，写法完全一样：

test('component renders correct theme from injection', () => {
  const wrapper = mount(ThemedComponent, {
    global: {
      provide: {
        theme: 'dark'
      }
    }
  })
  expect(wrapper.find('.theme-indicator').text()).toBe('Dark Mode')
})

实用建议 #

• 优先黑盒测试：尽量通过用户的实际操作（点击、输入、跳转）和页面渲染结果来验证，少直接访问组件内部的属性和方法，这样测试更稳定，也更贴近真实用户场景。
• 拆分测试粒度：把复杂的业务逻辑抽成组合式函数，单独测试这些函数，既能降低组件测试的复杂度，也方便复用测试逻辑。
• 不用过度纠结API差异：Vue Test Utils这类工具对两种API都做了很好的支持，大部分场景下测试写法差异极小，重点还是放在验证业务逻辑的正确性上。

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