终极指南：如何用 ng-mocks 快速简化 Angular 测试

还在为复杂的 Angular 测试而烦恼吗？😩 今天我要向大家推荐一个超级实用的开源项目——ng-mocks，这是一个专门为 Angular 测试设计的模拟库，能够帮助你快速模拟组件、服务、指令、管道和模块，大大简化测试编写过程！

🚀 ng-mocks 是什么？

ng-mocks 是一个功能强大的 Angular 测试库，专注于模拟测试依赖，让单元测试变得更加简单高效。无论你是 Angular 新手还是资深开发者，这个工具都能让你的测试工作事半功倍！

核心优势亮点 ✨

• 全面模拟支持：组件、服务、指令、管道、模块一网打尽
• 测试速度提升：减少冗余代码，专注核心逻辑
• 智能接口保持：模拟对象保持原有接口，不影响测试逻辑

🛠️ 快速安装指南

安装 ng-mocks 非常简单，只需要一个命令：

npm install ng-mocks --save-dev

或者如果你使用 yarn：

yarn add ng-mocks --dev

📋 兼容性一览表

ng-mocks 支持广泛的 Angular 版本和测试框架：

Angular 版本	ng-mocks	Jasmine	Jest	Ivy	Standalone
20	最新版	✓	✓	✓	✓
19	最新版	✓	✓	✓	✓
18	最新版	✓	✓	✓	✓

🎯 实战示例：组件测试

让我们看看如何使用 ng-mocks 测试一个简单的用户资料组件：

describe('用户资料组件测试', () => {
  beforeEach(() => {
    // 使用 MockBuilder 配置测试环境
    return MockBuilder(ProfileComponent, ProfileModule)
      .keep(ReactiveFormsModule);
});

在这个例子中，我们保持了 ProfileComponent 和 ReactiveFormsModule 的真实实现，而其他所有依赖都会被自动模拟。

🔧 核心功能详解

MockBuilder - 智能测试配置

MockBuilder 是 ng-mocks 的核心工具，它能够：

• 自动识别需要模拟的依赖
• 保持指定的真实组件和服务
• 简化 TestBed 配置过程

MockRender - 高级组件渲染

与传统的 TestBed.createComponent 相比，MockRender 提供了更强大的功能：

• 完整的生命周期钩子支持
• 智能变更检测
• 类型安全的输入输出绑定

💡 最佳实践技巧

全局配置优化

在 src/test.ts 文件中添加全局配置：

// 自动为所有方法添加 spy
ngMocks.autoSpy('jasmine');

// 全局模拟配置
ngMocks.defaultMock(AuthService, () => ({
  isLoggedIn$: EMPTY,
  currentUser$: EMPTY,
}));

性能提升秘籍

使用 ng-mocks 的自动模拟功能，可以显著减少测试代码量，提高测试执行速度。

🎉 为什么选择 ng-mocks？

1. 学习成本低：API 设计直观易懂
2. 社区活跃：持续更新维护
3. 文档完善：详细的示例和指南

📚 学习资源推荐

项目提供了丰富的文档和示例：

• 官方文档：docs/articles/index.md
• 组件测试指南：docs/articles/guides/component.md
• 服务测试指南：docs/articles/guides/provider.md

🏆 总结

ng-mocks 是 Angular 开发者必备的测试利器！通过智能模拟依赖，它让测试编写变得简单快捷，大大提高了开发效率。无论你是要测试简单的服务还是复杂的组件，ng-mocks 都能提供完美的解决方案。

还在等什么？赶快尝试 ng-mocks，让你的 Angular 测试工作变得更加轻松愉快！🎊

提示：项目完全免费开源，支持 Angular 5-20 全系列版本！