Angular 1.X Jasmine测试：编译模板/指令/组件中使用翻译器

架构老林

2026-5-19

解决Angular测试中translate过滤器显示实际文本的问题

我之前在测试带translate过滤器的Angular组件模板时，遇到过类似的困扰——比如模板里写的是<h1>{{home.title | translate}}</h1>，测试编译后没法直接看到实际的翻译文本，总带着过滤器语法，完全没法验证渲染效果。折腾了不少方法后，终于找到一个靠谱的手动配置方案，亲测有效！

核心思路

直接在测试代码里用$translateProvider.translations()方法手动注入我们需要的翻译键值对，让测试环境拥有对应的翻译映射，这样组件编译后就能正确渲染出实际文本，和生产环境的表现一致。

示例代码

// 首先在测试的模块配置阶段添加翻译
beforeEach(module('yourAppModule', function($translateProvider) {
  // 手动配置目标语言的翻译内容，这里以英文为例
  $translateProvider.translations('en', {
    'home.title': 'Home Page'
  });
  // 设置测试环境的默认语言
  $translateProvider.preferredLanguage('en');
}));

// 然后编译组件并验证结果
beforeEach(inject(function($compile, $rootScope) {
  var scope = $rootScope.$new();
  // 给scope赋值对应的翻译键
  scope.home = { title: 'home.title' };
  // 编译模板
  var element = $compile('<h1>{{home.title | translate}}</h1>')(scope);
  // 触发脏检查，让翻译生效
  scope.$digest();
  
  // 此时就能拿到实际的翻译文本了
  console.log(element.text().trim()); // 输出: Home Page
}));