如何为 Vue 3 项目编写单元测试和集成测试，并利用 `Vue Test Utils` 模拟组件行为？

各位靓仔靓女们，早上好/下午好/晚上好！

今天咱们来聊聊 Vue 3 项目的测试大作战，主要讲讲单元测试和集成测试，以及怎么用 Vue Test Utils 这个神器来模拟组件行为。争取让大家看完之后，也能愉快地写测试，告别 "啊！又要写测试了！" 的痛苦。

一、测试的重要性：不测一时爽，上线火葬场

先来简单粗暴地聊聊为什么要写测试。想象一下，你辛辛苦苦写了几个月的代码，信心满满地部署上线，结果用户一顿操作猛如虎，页面直接崩成渣。老板怒吼，用户投诉，你自己也想找个地缝钻进去。

这就是不写测试的下场。测试就像一个安全网，在你发布代码之前，帮你抓住那些隐藏的 bug，保证你的代码质量，让你晚上睡得更香。

具体来说，测试的好处包括：

• 提前发现 Bug： 在开发阶段就能发现问题，避免上线后出现严重错误。
• 提高代码质量： 迫使你写出更模块化、更易于测试的代码。
• 减少回归错误： 修改代码后，可以快速运行测试，确保没有引入新的问题。
• 提高开发效率： 减少调试时间，让你更快地交付功能。
• 增强信心： 有了测试的保障，你可以更放心地重构代码，增加新功能。

总而言之，写测试就是磨刀不误砍柴工，看似浪费时间，实则提高效率，最终受益的是你自己。

二、测试的种类：分而治之，各个击破

测试有很多种，但对于 Vue 项目来说，最常用的就是单元测试和集成测试。

测试类型	目标	范围	工具	适用场景
单元测试	验证单个组件、函数或模块的行为是否符合预期。	最小的测试单元，通常是一个组件或函数。	Jest, Mocha, Vue Test Utils	独立测试组件的逻辑，确保每个组件都能正常工作。
集成测试	验证多个组件或模块在一起工作时是否符合预期。	多个组件或模块之间的交互。	Vue Test Utils, Cypress (E2E 测试也可以做集成测试)	测试组件之间的协作，验证数据传递和事件触发是否正确。
E2E 测试	模拟用户行为，验证整个应用程序的功能是否符合预期。（这里不做重点介绍，但也要知道有这么个东西）	整个应用程序，包括前端、后端和数据库。	Cypress, Playwright	测试整个应用程序的流程，验证用户界面的正确性，比如注册、登录、购买流程等。

简单来说：

• 单元测试：就像检查一个机器零件，看它是不是按照图纸生产的。
• 集成测试：就像把几个零件组装在一起，看它们能不能正常工作，配合顺畅。
• E2E 测试：就像让用户来使用这个机器，看看它能不能完成预期的任务。

今天咱们主要讲单元测试和集成测试。

三、Vue Test Utils：测试的瑞士军刀

Vue Test Utils 是 Vue 官方提供的测试工具库，它提供了一系列 API，让你能够轻松地挂载 Vue 组件，访问组件的属性和方法，触发事件，断言组件的行为。

简单来说，有了 Vue Test Utils，你就能像操控真实组件一样操控测试组件，模拟用户的操作，验证组件的输出。

3.1 安装 Vue Test Utils

首先，你需要安装 Vue Test Utils：

npm install @vue/test-utils@next --save-dev

或者

yarn add @vue/test-utils@next --dev

注意 @next 表示安装的是 Vue 3 版本的 Vue Test Utils。

3.2 单元测试实战：测试一个简单的 Counter 组件

咱们先来写一个简单的 Counter 组件：

// src/components/Counter.vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment,
    };
  },
};
</script>

这个组件很简单，显示一个计数器，点击按钮可以增加计数器的值。

现在，咱们来写一个单元测试来验证它的行为：

// tests/unit/Counter.spec.js
import { mount } from '@vue/test-utils';
import Counter from '@/components/Counter.vue';

describe('Counter.vue', () => {
  it('renders the initial count', () => {
    const wrapper = mount(Counter);
    expect(wrapper.text()).toContain('Count: 0');
  });

  it('increments the count when the button is clicked', async () => {
    const wrapper = mount(Counter);
    await wrapper.find('button').trigger('click');
    expect(wrapper.text()).toContain('Count: 1');
  });
});

代码解释：

• describe：定义一个测试套件，用来组织相关的测试用例。
• it：定义一个测试用例，用来测试一个特定的功能。
• mount：挂载组件，创建一个组件的实例。
• wrapper：组件实例的包装器，提供了访问组件属性和方法的能力。
• wrapper.text()：获取组件的文本内容。
• wrapper.find('button')：查找组件中的 button 元素。
• wrapper.trigger('click')：触发 button 元素的 click 事件。
• expect：断言，用来验证测试结果是否符合预期。
• toContain：断言文本内容是否包含指定的字符串。
• async 和 await：因为 trigger 是一个异步操作，需要使用 async 和 await 来等待事件触发完成。

这个测试用例做了两件事：

1. 验证组件渲染时，计数器的初始值是 0。
2. 验证点击按钮后，计数器的值会增加 1。

要运行这个测试，你需要安装一个测试运行器，比如 Jest：

npm install -D jest @vue/vue3-jest

然后，在 package.json 中添加一个测试脚本：

{
  "scripts": {
    "test:unit": "jest"
  }
}

最后，运行测试：

npm run test:unit

如果一切顺利，你应该看到测试通过的提示。

3.3 集成测试实战：测试两个组件之间的交互

现在，咱们来写一个稍微复杂一点的例子，测试两个组件之间的交互。

首先，咱们创建一个 Parent 组件：

// src/components/Parent.vue
<template>
  <div>
    <Child :message="parentMessage" @child-event="handleChildEvent" />
    <p>Parent Message: {{ parentMessage }}</p>
    <p>Child Message: {{ childMessage }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';
import Child from './Child.vue';

export default {
  components: {
    Child,
  },
  setup() {
    const parentMessage = ref('Hello from Parent');
    const childMessage = ref('');

    const handleChildEvent = (message) => {
      childMessage.value = message;
    };

    return {
      parentMessage,
      childMessage,
      handleChildEvent,
    };
  },
};
</script>

这个 Parent 组件包含一个 Child 组件，并向 Child 组件传递一个 parentMessage 属性，同时监听 Child 组件的 child-event 事件。

然后，咱们创建一个 Child 组件：

// src/components/Child.vue
<template>
  <div>
    <p>Child Message: {{ message }}</p>
    <button @click="emitEvent">Emit Event</button>
  </div>
</template>

<script>
import { ref, defineEmits } from 'vue';

export default {
  props: {
    message: {
      type: String,
      required: true,
    },
  },
  setup(props, { emit }) {
    const emitEvent = () => {
      emit('child-event', 'Hello from Child');
    };

    return {
      emitEvent,
    };
  },
};
</script>

这个 Child 组件接收一个 message 属性，并提供一个 emitEvent 方法，点击按钮会触发 child-event 事件，并传递一个消息给 Parent 组件。

现在，咱们来写一个集成测试来验证这两个组件之间的交互：

// tests/unit/Parent.spec.js
import { mount } from '@vue/test-utils';
import Parent from '@/components/Parent.vue';
import Child from '@/components/Child.vue';

describe('Parent.vue', () => {
  it('passes the parent message to the child component', () => {
    const wrapper = mount(Parent);
    const childComponent = wrapper.findComponent(Child);
    expect(childComponent.props('message')).toBe('Hello from Parent');
  });

  it('updates the child message when the child event is emitted', async () => {
    const wrapper = mount(Parent);
    await wrapper.findComponent(Child).find('button').trigger('click');
    expect(wrapper.text()).toContain('Child Message: Hello from Child');
  });
});

代码解释：

• wrapper.findComponent(Child)：查找组件中的 Child 组件实例。
• childComponent.props('message')：获取 Child 组件的 message 属性。

这个测试用例做了两件事：

1. 验证 Parent 组件向 Child 组件传递了正确的 parentMessage 属性。
2. 验证当 Child 组件触发 child-event 事件时，Parent 组件能够正确地更新 childMessage 属性。

同样，运行测试：

npm run test:unit

如果一切顺利，你应该看到测试通过的提示。

3.4 Vue Test Utils 常用 API 概览

为了更好地使用 Vue Test Utils，咱们来简单概览一下它的一些常用 API：

API	描述	示例
mount(Component, options)	挂载一个组件，创建一个组件的实例。options 可以用来传递 props、提供全局配置等。	const wrapper = mount(MyComponent, { props: { msg: 'Hello' }, global: { plugins: [VueRouter] } })
shallowMount(Component, options)	浅挂载一个组件，只渲染组件本身，不渲染子组件。可以提高测试速度，减少测试的复杂性。	const wrapper = shallowMount(MyComponent)
wrapper.find(selector)	查找组件中的元素，selector 可以是 CSS 选择器、组件名称等。	const button = wrapper.find('button')
wrapper.findAll(selector)	查找组件中所有匹配 selector 的元素。	const buttons = wrapper.findAll('button')
wrapper.findComponent(Component)	查找组件中的指定组件实例。	const childComponent = wrapper.findComponent(ChildComponent)
wrapper.findAllComponents(Component)	查找组件中所有指定组件实例。	const childComponents = wrapper.findAllComponents(ChildComponent)
wrapper.get(selector)	查找组件中的元素，如果找不到会抛出错误。	const button = wrapper.get('button')
wrapper.text()	获取组件的文本内容。	expect(wrapper.text()).toContain('Hello')
wrapper.html()	获取组件的 HTML 内容。	expect(wrapper.html()).toContain('<button>')
wrapper.props(key)	获取组件的 props，key 是 props 的名称。	expect(wrapper.props('msg')).toBe('Hello')
wrapper.emitted(event)	获取组件触发的事件，event 是事件名称。	expect(wrapper.emitted('my-event')).toEqual([['data']])
wrapper.trigger(event, options)	触发组件的事件，event 是事件名称，options 可以用来传递事件参数。	await wrapper.find('button').trigger('click')
wrapper.setValue(value)	设置表单元素的值，比如 input、textarea 等。	await wrapper.find('input').setValue('Hello')
wrapper.setChecked(checked)	设置 checkbox 或 radio 的选中状态，checked 是一个布尔值。	await wrapper.find('input[type="checkbox"]').setChecked(true)
wrapper.isVisible()	判断组件是否可见。	expect(wrapper.isVisible()).toBe(true)

这些 API 只是 Vue Test Utils 的一部分，但它们足以让你编写大部分的单元测试和集成测试。

四、模拟组件行为：让测试更真实

在测试中，有时候我们需要模拟组件的行为，比如模拟用户输入、模拟网络请求、模拟第三方库的调用等。

Vue Test Utils 提供了一些方法来帮助我们模拟组件行为：

• mocks： 可以在挂载组件时，通过 mocks 选项来模拟全局变量或第三方库。
• stubs： 可以用 stubs 选项来替换子组件，避免测试子组件的依赖。
• global.plugins： 可以在 global 选项中配置插件，模拟 Vue Router、Vuex 等插件的行为。

4.1 模拟全局变量：告别 "undefined" 错误

假设你的组件依赖一个全局变量 window.API_URL：

// src/components/MyComponent.vue
<template>
  <div>
    <p>API URL: {{ apiUrl }}</p>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const apiUrl = ref('');

    onMounted(() => {
      apiUrl.value = window.API_URL;
    });

    return {
      apiUrl,
    };
  },
};
</script>

在测试环境中，window.API_URL 默认是 undefined，会导致组件渲染出错。

为了解决这个问题，你可以使用 mocks 选项来模拟 window.API_URL：

// tests/unit/MyComponent.spec.js
import { mount } from '@vue/test-utils';
import MyComponent from '@/components/MyComponent.vue';

describe('MyComponent.vue', () => {
  it('renders the API URL', () => {
    const wrapper = mount(MyComponent, {
      global: {
        mocks: {
          $window: {
            API_URL: 'https://api.example.com',
          },
        },
      },
    });
    expect(wrapper.text()).toContain('API URL: https://api.example.com');
  });
});

这样，组件就能正确地渲染 API URL 了。

4.2 模拟第三方库：摆脱外部依赖

假设你的组件使用了第三方库 axios 来发送 HTTP 请求：

// src/components/MyComponent.vue
<template>
  <div>
    <p>Data: {{ data }}</p>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const data = ref('');

    onMounted(async () => {
      const response = await axios.get('/api/data');
      data.value = response.data;
    });

    return {
      data,
    };
  },
};
</script>

在测试中，你可能不想真正发送 HTTP 请求，而是想模拟 axios 的行为，返回一些假数据。

你可以使用 mocks 选项来模拟 axios：

// tests/unit/MyComponent.spec.js
import { mount } from '@vue/test-utils';
import MyComponent from '@/components/MyComponent.vue';
import axios from 'axios';

jest.mock('axios'); // 模拟 axios 模块

describe('MyComponent.vue', () => {
  it('renders the data', async () => {
    axios.get.mockResolvedValue({ data: 'Hello from API' }); // 模拟 axios.get 方法

    const wrapper = mount(MyComponent);
    await wrapper.vm.$nextTick(); // 等待异步操作完成

    expect(wrapper.text()).toContain('Data: Hello from API');
  });
});

代码解释：

• jest.mock('axios')：告诉 Jest 模拟 axios 模块。
• axios.get.mockResolvedValue({ data: 'Hello from API' })：模拟 axios.get 方法，返回一个 Promise，其 resolved 值为 { data: 'Hello from API' }。
• wrapper.vm.$nextTick()：等待组件的异步操作完成，比如 onMounted 钩子函数中的 axios.get 请求。

这样，组件就能使用模拟的 axios 方法，返回假数据，而不需要真正发送 HTTP 请求。

4.3 替换子组件：隔离测试范围

假设你的组件包含一个复杂的子组件，你只想测试父组件的逻辑，不想测试子组件的依赖。

你可以使用 stubs 选项来替换子组件：

// src/components/Parent.vue
<template>
  <div>
    <Child :message="message" />
  </div>
</template>

<script>
import { ref } from 'vue';
import Child from './Child.vue';

export default {
  components: {
    Child,
  },
  setup() {
    const message = ref('Hello from Parent');

    return {
      message,
    };
  },
};
</script>

// tests/unit/Parent.spec.js
import { mount } from '@vue/test-utils';
import Parent from '@/components/Parent.vue';

describe('Parent.vue', () => {
  it('renders the message', () => {
    const wrapper = mount(Parent, {
      stubs: {
        Child: { // 替换 Child 组件
          template: '<div>Stubbed Child</div>', // 使用一个简单的模板
        },
      },
    });
    expect(wrapper.text()).toContain('Stubbed Child');
  });
});

这样，Parent 组件中的 Child 组件就被替换成了一个简单的 div，你可以专注于测试 Parent 组件的逻辑，而不用担心 Child 组件的依赖。

五、测试的最佳实践：磨刀不误砍柴工

最后，咱们来聊聊测试的一些最佳实践：

• 测试驱动开发 (TDD)： 先写测试用例，再写代码，确保代码满足测试用例的要求。
• 保持测试用例的简洁性： 每个测试用例只测试一个功能，避免测试用例过于复杂。
• 使用有意义的测试用例名称： 让测试用例的名称能够清晰地表达测试的目的。
• 尽量覆盖所有代码路径： 确保你的测试用例能够覆盖所有可能的代码执行路径。
• 定期运行测试： 在每次提交代码之前，运行测试，确保没有引入新的问题。
• 使用 CI/CD 工具： 将测试集成到 CI/CD 流程中，自动化测试过程。

总而言之，测试是一项需要长期坚持的工作，只有不断地实践和总结，才能写出高质量的测试用例，保证你的代码质量。

好了，今天的讲座就到这里了。希望大家能够掌握 Vue 3 项目的测试技巧，写出更健壮、更可靠的代码。记住，测试不是负担，而是你的好朋友，它能帮你避免上线火葬场，让你安心睡个好觉。

有问题欢迎提问，没问题就散会啦！