Vue3 defineModel + Vitest 覆盖率 80% 流水账Vue3 defineModel + Vite

Vue3 defineModel + Vitest 覆盖率 80% 流水账

背景
defineModel 是 Vue 3.4 的新语法糖，可以一行代码实现双向绑定，但官网例子太简单，我想在真实组件里测一遍，同时把单元覆盖率拉到 80%。

做法

用 <script setup> + defineModel 封装 Counter 组件：

vue
```
const count = defineModel<number>({ default: 0 })
```

测试用例写在 Counter.test.ts，用 Vitest + @vue/test-utils：

TypeScript

it('+1', async () => {
  const wrapper = mount(Counter, { props: { modelValue: 0 } })
  await wrapper.trigger('click')
  expect(wrapper.text()).toContain('1')
})

pnpm test --coverage → 自动生成覆盖率报告
把 < 80 % 的分支补齐，直到终端变绿。

结果

1 个组件，5 个用例，Statements 82 %
Vitest 运行速度 < 1 s，CI 同样一次过
徽章直接贴在 README，HR 一眼看懂。

源码地址
github.com/web-code-hu…
Badge: gap-2024-saas.netlify.app/badges/cove…