Vue 系前端测试策略

UsubeniFantasy · 2023-04-30T13:49:03Z

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的封装，强调贴近用户操作的测试。写测试时要注意避免测试实现细节，关注页面元素的变化来判断测试是否通过。