Vue 系前端测试策略
💡
原文中文，约9200字，阅读约需22分钟。
📝
内容提要
Vitest是一个与Vite整合的测试框架，提供了describe、test和expect等关键字来编写测试代码。它解决了mocking的问题，使用spyOn来监听函数并伪造返回值。然而，对于某些模块（如vue-router），使用spyOn可能会出现问题。Vitest还提供了vi.fn()和vi.spyOn()方法来修改目标行为，以及vi.mock()方法来替换导入的模块。除了函数的测试，Vitest推荐使用Vue Test Utils来测试用户界面组件。Vue Test Utils提供了mount函数来模拟挂载组件和触发事件，以及get、find和query等方法来查询元素，使用fireEvent来模拟用户操作。另外，Vue Testing Library是对Vue Test Utils的封装，强调贴近用户操作的测试。写测试时要注意避免测试实现细节，关注页面元素的变化来判断测试是否通过。
🎯
关键要点
- Vitest是一个与Vite整合的测试框架，提供describe、test和expect等关键字。
- Vitest解决了mocking的问题，使用spyOn来监听函数并伪造返回值。
- 对于某些模块（如vue-router），使用spyOn可能会出现问题。
- Vitest提供vi.fn()和vi.spyOn()方法来修改目标行为，以及vi.mock()方法来替换导入的模块。
- Vitest推荐使用Vue Test Utils来测试用户界面组件，提供mount函数来模拟挂载组件和触发事件。
- Vue Testing Library是对Vue Test Utils的封装，强调贴近用户操作的测试。
- 写测试时要避免测试实现细节，关注页面元素的变化来判断测试是否通过。
- 使用vi.clearAllMocks等方法清除mock，每个测试用例需要使用相同mock时可以在beforeEach中统一处理。
- mock方法的函数签名是(path: string, factory?: () => unknown) => void，若不传入factory，Vitest会在__mocks__文件夹找同名文件。
- Vue Test Utils用于模拟挂载组件和触发事件，提供wrapper对象来操作组件。
- Vue Testing Library鼓励避免测试实现细节，强调通过用户交互检查页面元素变化。
- VTL的测试方式相对简单，但在某些情况下可能无法进行细节操作。
- 总结：Vitest负责测试运行，Vue Test Utils负责模拟组件挂载，VTL主张接近用户操作的测试。
➡️
