DEV Community
·
Vitest 与 Angular 的介绍
💡
原文英文，约1900词，阅读约需7分钟。
📝
内容提要
Angular团队弃用Karma，探索Web Test Runner和Jest等替代方案。Angular 18引入Vite作为开发服务器，使Vitest成为可选方案。本文介绍如何在Angular项目中配置Vitest，包括创建项目、安装插件、配置测试环境和代码覆盖率。Vitest语法与Karma和Jest相似，学习曲线较小，并讨论了在CI环境中运行测试和生成报告的方法。
🎯
关键要点
- Angular团队弃用Karma，探索Web Test Runner和Jest等替代方案。
- Angular 18引入Vite作为开发服务器，使Vitest成为可选方案。
- Vitest的语法与Karma和Jest相似，学习曲线较小。
- 本文介绍如何在Angular项目中配置Vitest，包括创建项目、安装插件和配置测试环境。
- 创建新项目并安装依赖后，移除Karma。
- 使用@analogjs/platform插件安装和配置Vitest。
- 配置vite.config.mts文件以设置Vitest的环境和测试选项。
- 在angular.json中替换测试部分以使用Vitest。
- 更新tsconfig.spec.json以包含Vitest的类型定义。
- 在package.json中添加测试脚本以运行Vitest。
- 使用npm run test命令运行所有测试文件。
- 在CI环境中运行测试时，添加test:ci脚本以避免监视模式。
- 添加代码覆盖率脚本以检查单元测试覆盖的代码量。
- 在CI环境中运行代码覆盖率时，调整test:ci脚本以包含报告选项。
- 使用@vitest/ui工具查看测试结果的用户界面。
- 总结了在Angular应用中安装和设置Vitest的过程，以及如何在Azure Devops中配置CI环境。
➡️
