How to write unit test for components with vitest in Nuxt 3?

1. 初始化 Vitest

在 Nuxt 3 项目中使用 Vitest 开始单元测试前，首先确保已经安装了 Vitest。可以通过修改项目的 package.json 文件来添加 Vitest 相关依赖。

json
"devDependencies": {
  "vitest": "^0.5.0",
  "vue-test-utils": "^2.0.0-rc.15"
}

然后运行:

bash
npm install

2. 配置 Vitest

在项目根目录下创建 vitest.config.ts 文件来配置 Vitest。这里我们配置测试环境为 jsdom，因为我们是在测试 Vue 组件。

typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  test: {
    globals: true,
    environment: 'jsdom'
  }
})

3. 编写测试用例

假设我们有一个简单的 Vue 组件 MyButton.vue，它有一个按钮，当被点击时，会触发一个自定义事件。

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

<script setup>
defineProps({
  label: String
})

function handleClick() {
  emit('clicked')
}
</script>

为这个组件创建一个测试文件 MyButton.test.js。

javascript
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import MyButton from './MyButton.vue'

describe('MyButton', () => {
  it('should emit "clicked" event when button is clicked', async () => {
    const wrapper = mount(MyButton, {
      props: {
        label: 'Click Me'
      }
    })

    await wrapper.find('button').trigger('click')
    
    expect(wrapper.emitted()).toHaveProperty('clicked')
  })
})

4. 运行测试

要运行测试，可以在 package.json 中添加一个脚本来启动 Vitest。

json
"scripts": {
  "test": "vitest"
}

运行测试：

bash
npm run test

5. 分析测试结果

执行上述命令后，Vitest 将会运行所有匹配的测试文件并在命令行中输出测试结果。确保所有测试都是通过的，这样可以保证组件按预期工作。

小结

使用 Vitest 在 Nuxt 3 项目中进行组件测试是一个简单直接的过程。通过正确配置、编写测试用例、运行和分析测试，可以有效地确保 Vue 组件的功能和稳定性。