编辑“︁Vue.js组件单元测试”︁

{{DISPLAYTITLE:Vue.js组件单元测试}}

== 介绍 ==
'''组件单元测试'''是Vue.js开发中验证独立组件功能正确性的关键实践。通过隔离测试单个组件，开发者可以确保其行为符合预期，同时降低整体应用出现缺陷的风险。单元测试的核心原则是：
* 测试单一功能单元（如组件）
* 不依赖外部系统（如API或数据库）
* 快速执行且结果可重复

在Vue.js生态中，通常使用[[Jest]]或[[Mocha]]作为测试运行器，配合[[Vue Test Utils]]工具库进行组件测试。

== 测试工具配置 ==
=== 基本依赖 ===
需在项目中安装以下包：
<syntaxhighlight lang="bash">
npm install --save-dev @vue/test-utils jest vue-jest
</syntaxhighlight>

=== 配置文件示例 ===
在<code>jest.config.js</code>中配置：
<syntaxhighlight lang="javascript">
module.exports = {
  moduleFileExtensions: ['js', 'json', 'vue'],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '^.+\\.js$': 'babel-jest'
  }
}
</syntaxhighlight>

== 基本测试结构 ==
=== 测试文件示例 ===
测试一个简单的<code>Button.vue</code>组件：
<syntaxhighlight lang="javascript">
import { mount } from '@vue/test-utils'
import Button from './Button.vue'

describe('Button Component', () => {
  test('renders button text', () => {
    const wrapper = mount(Button, {
      propsData: {
        text: 'Click me'
      }
    })
    expect(wrapper.text()).toContain('Click me')
  })
})
</syntaxhighlight>

=== 关键方法说明 ===
{| class="wikitable"
! 方法 !! 描述
|-
| <code>mount()</code> || 完整渲染组件及其子组件
|-
| <code>shallowMount()</code> || 仅渲染当前组件（隔离子组件）
|-
| <code>find()</code> || 查找DOM元素或子组件
|-
| <code>trigger()</code> || 模拟DOM事件
|}

== 核心测试场景 ==
=== Props验证 ===
测试组件是否正确接收props：
<syntaxhighlight lang="javascript">
test('accepts valid props', () => {
  const wrapper = mount(Button, {
    propsData: {
      size: 'large',
      disabled: true
    }
  })
  expect(wrapper.props('size')).toBe('large')
  expect(wrapper.props('disabled')).toBe(true)
})
</syntaxhighlight>

=== 事件触发测试 ===
验证组件是否发出正确事件：
<syntaxhighlight lang="javascript">
test('emits click event', async () => {
  const wrapper = mount(Button)
  await wrapper.trigger('click')
  expect(wrapper.emitted().click).toBeTruthy()
})
</syntaxhighlight>

=== 状态变更测试 ===
测试组件内部状态变化：
<syntaxhighlight lang="javascript">
test('toggles active state', async () => {
  const wrapper = mount(ToggleButton)
  await wrapper.trigger('click')
  expect(wrapper.vm.isActive).toBe(true)
})
</syntaxhighlight>

== 高级测试技巧 ==
=== 异步行为测试 ===
处理异步操作的两种方法：
<syntaxhighlight lang="javascript">
// 方法1：使用async/await
test('async data loading', async () => {
  const wrapper = mount(AsyncComponent)
  await wrapper.vm.$nextTick()
  expect(wrapper.find('.data').exists()).toBe(true)
})

// 方法2：返回Promise
test('promise resolution', () => {
  return new Promise(resolve => {
    const wrapper = mount(AsyncComponent)
    setTimeout(() => {
      expect(wrapper.find('.result').exists()).toBe(true)
      resolve()
    }, 1000)
  })
})
</syntaxhighlight>

=== 模拟依赖 ===
使用<code>jest.mock</code>模拟外部模块：
<syntaxhighlight lang="javascript">
jest.mock('../api', () => ({
  fetchData: jest.fn(() => Promise.resolve({ data: 'mock' }))
}))

test('uses mock API', async () => {
  const wrapper = mount(ComponentWithAPI)
  await wrapper.vm.$nextTick()
  expect(wrapper.text()).toContain('mock')
})
</syntaxhighlight>

== 测试覆盖率 ==
通过Jest收集覆盖率数据，在<code>package.json</code>中添加：
<syntaxhighlight lang="json">
{
  "scripts": {
    "test:coverage": "jest --coverage"
  }
}
</syntaxhighlight>

典型覆盖率报告包含：
* 语句覆盖率（Statement）
* 分支覆盖率（Branch）
* 函数覆盖率（Functions）
* 行覆盖率（Lines）

== 最佳实践 ==
1. '''测试优先原则'''：先写测试再实现功能（TDD）
2. '''单一断言'''：每个测试用例只验证一个行为
3. '''描述性命名'''：如<code>"should emit submit event when form is valid"</code>
4. '''避免实现细节'''：测试行为而非内部实现
5. '''保持测试独立'''：用例之间不应有依赖关系

== 实际案例 ==
=== 表单组件测试 ===
测试一个登录表单组件：
<syntaxhighlight lang="javascript">
describe('LoginForm', () => {
  test('validates empty fields', async () => {
    const wrapper = mount(LoginForm)
    await wrapper.find('form').trigger('submit.prevent')
    expect(wrapper.find('.error').text()).toContain('Required')
  })

  test('submits valid form', async () => {
    const wrapper = mount(LoginForm)
    await wrapper.find('input[type="email"]').setValue('test@example.com')
    await wrapper.find('input[type="password"]').setValue('123456')
    await wrapper.find('form').trigger('submit.prevent')
    expect(wrapper.emitted().submit[0]).toEqual([
      { email: 'test@example.com', password: '123456' }
    ])
  })
})
</syntaxhighlight>

=== 交互流程图 ===
<mermaid>
graph TD
  A[用户点击按钮] --> B[触发click事件]
  B --> C{是否禁用?}
  C -->|否| D[执行点击逻辑]
  C -->|是| E[阻止操作]
  D --> F[更新组件状态]
  F --> G[发出事件]
</mermaid>

== 数学表达 ==
在测试覆盖率计算中会使用以下公式：
<math>
\text{覆盖率} = \frac{\text{已执行代码行数}}{\text{总代码行数}} \times 100\%
</math>

== 常见问题 ==
=== 如何测试插槽内容？ ===
使用<code>slots</code>选项：
<syntaxhighlight lang="javascript">
const wrapper = mount(Component, {
  slots: {
    default: 'Main Content',
    header: '<h2>Title</h2>'
  }
})
</syntaxhighlight>

=== 如何测试路由相关组件？ ===
注入模拟的<code>$route</code>和<code>$router</code>：
<syntaxhighlight lang="javascript">
const $route = { path: '/test' }
const wrapper = mount(Component, {
  mocks: { $route }
})
</syntaxhighlight>

== 总结 ==
Vue.js组件单元测试是构建可靠应用的重要保障。通过系统性地：
* 验证组件渲染输出
* 测试用户交互行为
* 检查事件触发机制
* 确保状态变更正确性

开发者可以显著提升代码质量并减少生产环境中的错误。建议将单元测试作为持续集成流程的必要环节，并保持至少80%的测试覆盖率。

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue.js测试]]