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

大家好，欢迎来到今天的“Vue 3 测试大作战”讲座！今天，咱们就来聊聊如何给你的 Vue 3 项目穿上测试的铠甲，让 Bug 无处遁形。

开场白：测试的重要性，就像给代码买保险

想象一下，你辛辛苦苦写了一个组件，功能强大，界面酷炫。结果上线之后，用户反馈一大堆 Bug，轻则界面错乱，重则数据丢失。这时候，你是不是感觉像坐过山车一样刺激？

单元测试和集成测试，就像给你的代码买了保险。它们可以在你发布代码之前，帮你发现潜在的问题，避免线上事故。所以，不要再认为测试是浪费时间了，它其实是在为你省时间，省钱，甚至是挽救你的头发！

第一章：磨刀不误砍柴工 – 测试环境搭建

首先，我们需要搭建一个测试环境。这里我们使用 Vue CLI 来创建一个项目，并安装必要的依赖。

1. 创建 Vue 项目:

   vue create vue3-testing-demo
   # 选择 Vue 3 预设或者手动选择，确保选择了 TypeScript (可选，但推荐)

2. 安装测试依赖:

   cd vue3-testing-demo
   npm install --save-dev @vue/test-utils @vue/vue3-jest jest babel-jest @babel/preset-env @babel/preset-typescript identity-obj-proxy

   • @vue/test-utils: Vue 官方提供的测试工具库，提供了各种 API 来挂载组件、查找元素、模拟用户交互等等。
   • @vue/vue3-jest: Jest 的 Vue 3 预设，用于处理 Vue 组件的编译和转换。
   • jest: 流行的 JavaScript 测试框架，提供了丰富的断言和 Mock 功能。
   • babel-jest: Babel 的 Jest 预设，用于转换 ESNext 语法。
   • @babel/preset-env: Babel 预设，用于根据目标环境自动选择需要的 Babel 插件。
   • @babel/preset-typescript: Babel 预设，用于处理 TypeScript 代码。
   • identity-obj-proxy: 用于处理 CSS Modules 和静态资源，避免在测试中引入真实的 CSS 文件。

3. 配置 Jest:

   在项目根目录下创建一个 jest.config.js 文件，并添加以下配置：

   module.exports = {
     moduleFileExtensions: [
       'js',
       'ts',
       'json',
       'vue'
     ],
     transform: {
       '^.+\.vue$': '@vue/vue3-jest',
       '^.+\.ts?$': 'ts-jest',
       '^.+\.js?$': 'babel-jest'
     },
     moduleNameMapper: {
       '^@/(.*)$': '<rootDir>/src/$1',
       '\.(css|less|sass|scss)$': 'identity-obj-proxy' //处理css模块
     },
     testEnvironment: 'jsdom',
     transformIgnorePatterns: ['/node_modules/'],
   };

   • moduleFileExtensions: 指定 Jest 识别的文件扩展名。
   • transform: 指定不同类型的文件使用哪个转换器。
   • moduleNameMapper: 配置模块别名，方便在测试代码中引用模块。这里用到了identity-obj-proxy处理 css modules。
   • testEnvironment: 指定测试环境，jsdom 模拟浏览器环境。
   • transformIgnorePatterns: 指定不需要转换的文件，通常是 node_modules 目录下的文件。

4. 配置 babel.config.js:

   如果没有 babel.config.js 文件，则创建它，并添加以下配置：

   module.exports = {
     presets: [
       ['@babel/preset-env', { targets: { node: 'current' } }],
       '@babel/preset-typescript',
     ],
   };

5. 添加测试脚本到 package.json:

   在 package.json 文件的 scripts 字段中添加以下脚本：

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

   现在，你就可以使用 npm run test 命令来运行测试了。

第二章：单元测试 – 瞄准单个组件

单元测试的目标是测试单个组件的功能是否正常。我们需要模拟组件的依赖，隔离组件的上下文，只关注组件自身的逻辑。

1. 创建一个简单的组件:

   在 src/components 目录下创建一个 Counter.vue 组件：

   <template>
     <div>
       <button @click="decrement">-</button>
       <span>{{ count }}</span>
       <button @click="increment">+</button>
     </div>
   </template>
   
   <script>
   import { ref } from 'vue';
   
   export default {
     name: 'Counter',
     setup() {
       const count = ref(0);
   
       const increment = () => {
         count.value++;
       };
   
       const decrement = () => {
         count.value--;
       };
   
       return {
         count,
         increment,
         decrement,
       };
     },
   };
   </script>

2. 编写单元测试:

   在 src/components/__tests__ 目录下创建一个 Counter.spec.js 文件：

   import { mount } from '@vue/test-utils';
   import Counter from '../Counter.vue';
   
   describe('Counter.vue', () => {
     it('renders the initial count', () => {
       const wrapper = mount(Counter);
       expect(wrapper.text()).toContain('0');
     });
   
     it('increments the count when the "+" button is clicked', async () => {
       const wrapper = mount(Counter);
       await wrapper.find('button:nth-child(3)').trigger('click');
       expect(wrapper.text()).toContain('1');
     });
   
     it('decrements the count when the "-" button is clicked', async () => {
       const wrapper = mount(Counter);
       await wrapper.find('button:nth-child(1)').trigger('click');
       expect(wrapper.text()).toContain('-1');
     });
   });

   • mount: @vue/test-utils 提供的 API，用于挂载组件。
   • describe: Jest 提供的 API，用于组织测试用例。
   • it: Jest 提供的 API，用于定义单个测试用例。
   • wrapper.text(): 获取组件的文本内容。
   • wrapper.find(): 查找组件中的元素。
   • wrapper.trigger(): 触发元素的事件。
   • expect: Jest 提供的 API，用于断言测试结果。
   • async/await: 用于处理异步操作，比如事件触发。

3. 运行测试:

   在终端中运行 npm run test 命令，就可以看到测试结果了。如果一切正常，你应该看到所有的测试用例都通过了。

第三章：模拟组件行为 – Mock 的妙用

有时候，我们需要测试的组件依赖于其他的组件或 API。为了隔离组件的上下文，我们需要模拟这些依赖的行为。Vue Test Utils 和 Jest 提供了强大的 Mock 功能，可以帮助我们实现这个目标。

1. 创建一个依赖 API 的组件:

   在 src/components 目录下创建一个 UserList.vue 组件：

   <template>
     <div>
       <ul>
         <li v-for="user in users" :key="user.id">{{ user.name }}</li>
       </ul>
     </div>
   </template>
   
   <script>
   import { ref, onMounted } from 'vue';
   
   export default {
     name: 'UserList',
     setup() {
       const users = ref([]);
   
       const fetchUsers = async () => {
         const response = await fetch('https://jsonplaceholder.typicode.com/users');
         const data = await response.json();
         users.value = data;
       };
   
       onMounted(fetchUsers);
   
       return {
         users,
       };
     },
   };
   </script>

   这个组件会从 https://jsonplaceholder.typicode.com/users API 获取用户列表，并在页面上显示。

2. 编写单元测试，并 Mock API 请求:

   在 src/components/__tests__ 目录下创建一个 UserList.spec.js 文件：

   import { mount } from '@vue/test-utils';
   import UserList from '../UserList.vue';
   
   describe('UserList.vue', () => {
     it('renders the user list', async () => {
       // Mock fetch API
       global.fetch = jest.fn(() =>
         Promise.resolve({
           json: () => Promise.resolve([
             { id: 1, name: 'John Doe' },
             { id: 2, name: 'Jane Doe' },
           ]),
         })
       );
   
       const wrapper = mount(UserList);
       // 等待异步操作完成
       await wrapper.vm.$nextTick();
   
       expect(wrapper.findAll('li').length).toBe(2);
       expect(wrapper.text()).toContain('John Doe');
       expect(wrapper.text()).toContain('Jane Doe');
   
       // 确保 fetch 被调用
       expect(global.fetch).toHaveBeenCalledTimes(1);
     });
   });

   • global.fetch = jest.fn(...): 使用 Jest 的 jest.fn() 方法来 Mock 全局的 fetch API。
   • Promise.resolve(...): 返回一个 Promise 对象，模拟 API 请求的响应。
   • wrapper.vm.$nextTick(): 等待 Vue 组件更新 DOM。因为 fetchUsers 是异步执行的，所以需要等待它完成之后才能断言结果。
   • expect(global.fetch).toHaveBeenCalledTimes(1): 断言 fetch API 被调用了一次。

3. 运行测试:

   在终端中运行 npm run test 命令，就可以看到测试结果了。如果一切正常，你应该看到所有的测试用例都通过了。

第四章：集成测试 – 组件间的协作

集成测试的目标是测试多个组件之间的协作是否正常。我们需要模拟组件之间的交互，验证组件之间的通信和数据传递是否正确。

1. 创建一个父组件和一个子组件:

   在 src/components 目录下创建一个 ParentComponent.vue 组件：

   <template>
     <div>
       <ChildComponent :message="parentMessage" @child-event="handleChildEvent" />
       <p>Message from child: {{ childMessage }}</p>
     </div>
   </template>
   
   <script>
   import { ref } from 'vue';
   import ChildComponent from './ChildComponent.vue';
   
   export default {
     name: 'ParentComponent',
     components: {
       ChildComponent,
     },
     setup() {
       const parentMessage = ref('Hello from parent');
       const childMessage = ref('');
   
       const handleChildEvent = (message) => {
         childMessage.value = message;
       };
   
       return {
         parentMessage,
         childMessage,
         handleChildEvent,
       };
     },
   };
   </script>

   在 src/components 目录下创建一个 ChildComponent.vue 组件：

   <template>
     <div>
       <p>{{ message }}</p>
       <button @click="emitEvent">Send message to parent</button>
     </div>
   </template>
   
   <script>
   import { defineEmits } from 'vue';
   
   export default {
     name: 'ChildComponent',
     props: {
       message: {
         type: String,
         required: true,
       },
     },
     emits: ['child-event'],
     setup(props, { emit }) {
       const emitEvent = () => {
         emit('child-event', 'Hello from child');
       };
   
       return {
         emitEvent,
       };
     },
   };
   </script>

   父组件向子组件传递一个 message prop，子组件通过 child-event 事件向父组件传递消息。

2. 编写集成测试:

   在 src/components/__tests__ 目录下创建一个 ParentComponent.spec.js 文件：

   import { mount } from '@vue/test-utils';
   import ParentComponent from '../ParentComponent.vue';
   import ChildComponent from '../ChildComponent.vue';
   
   describe('ParentComponent.vue', () => {
     it('passes the correct message to the child component', () => {
       const wrapper = mount(ParentComponent);
       const childComponent = wrapper.findComponent(ChildComponent);
       expect(childComponent.props('message')).toBe('Hello from parent');
     });
   
     it('updates the parent message when the child emits an event', async () => {
       const wrapper = mount(ParentComponent);
       const button = wrapper.find('button');
       await button.trigger('click');
       expect(wrapper.text()).toContain('Message from child: Hello from child');
     });
   });

   • wrapper.findComponent(): 查找组件中的子组件。
   • childComponent.props(): 获取子组件的 prop 值。

3. 运行测试:

   在终端中运行 npm run test 命令，就可以看到测试结果了。如果一切正常，你应该看到所有的测试用例都通过了。

第五章：高级技巧 – Slots, Stubs, and More

Vue Test Utils 还提供了许多高级技巧，可以帮助你编写更灵活、更强大的测试用例。

功能	描述	示例代码
Slots	测试组件的 slots 内容。	javascript it('renders the slot content', () => { const wrapper = mount({ template: '<div><slot></slot></div>', }, { slots: { default: '<span>Hello from slot</span>', }, }); expect(wrapper.text()).toContain('Hello from slot'); });
Stubs	替换组件的子组件，避免不必要的依赖和副作用。	javascript it('stubs the child component', () => { const wrapper = mount({ template: '<div><ChildComponent /></div>', components: { ChildComponent: { template: '<div>Stubbed Child</div>', }, }, }); expect(wrapper.text()).toContain('Stubbed Child'); }); // 或者使用 stub选项 it('stubs the child component with stub option', () => { const wrapper = mount(ParentComponent, { global: { stubs: { ChildComponent: true, // 替换为 true, 或者是一个组件定义 }, }, }); expect(wrapper.findComponent(ChildComponent).exists()).toBe(true); // 仍然存在, 但被替换 });
Provide/Inject	测试组件的 provide/inject 功能。	javascript // 父组件提供 const app = createApp({}); app.provide('message', 'Hello from provide'); // 挂载组件时 const wrapper = mount(MyComponent, { global: { provide: { message: 'Hello from provide', }, }, }); // 测试组件 it('renders the injected message', () => { const wrapper = mount({ inject: ['message'], template: '<div>{{ message }}</div>', }, { global: { provide: { message: 'Hello from provide', }, }, }); expect(wrapper.text()).toContain('Hello from provide'); });
Shallow Mount	只渲染组件自身，不渲染子组件，可以提高测试速度。	javascript import { shallowMount } from '@vue/test-utils'; const wrapper = shallowMount(MyComponent);
自定义选项	通过 global 选项配置全局行为，比如注册全局组件、插件等等。	javascript const wrapper = mount(MyComponent, { global: { components: { MyGlobalComponent, }, plugins: [MyPlugin], }, });
模拟路由	Mock Vue Router，测试组件的路由行为。	javascript import { createRouter, createWebHistory } from 'vue-router'; const router = createRouter({ history: createWebHistory(), routes: [ { path: '/home', component: Home }, ], }); const wrapper = mount(MyComponent, { global: { plugins: [router], }, }); // 模拟路由跳转 router.push('/home'); await router.isReady(); expect(wrapper.text()).toContain('Home');

总结：让测试成为你的好朋友

测试不是一件痛苦的事情，而是一个可以帮助你提高代码质量、减少 Bug 的好朋友。通过单元测试和集成测试，你可以更加自信地发布你的代码，避免线上事故。所以，让我们一起拥抱测试，让 Bug 无处遁形！

希望今天的讲座对大家有所帮助！如果有任何问题，欢迎随时提问。谢谢大家！