为何$localize `:@@ID:`在Angular标准单元测试配置中失效？

核心原因 #

Angular测试套件默认不会自动加载本地化资源文件，也不会初始化$localize的翻译注册表，导致测试时无法解析@@Some这类key对应的翻译文本，直接返回空字符串。

无需Mock的解决方案 #

1. 在测试文件中手动注册翻译 #

如果你的翻译存储在JSON文件中，可直接导入并注册到$localize：

import { $localize } from '@angular/localize';
// 替换为你的翻译文件实际路径
import translations from './assets/i18n/messages.en.json';

// 注册翻译映射
$localize.load(translations);

2. 测试模块中配置本地化依赖 #

在TestBed配置里添加本地化相关提供者，确保测试环境初始化翻译能力：

import { TestBed } from '@angular/core/testing';
import { provideLocalization } from '@angular/localize';
import { LOCALE_ID } from '@angular/core';
import { YourService } from './your.service';

describe('YourService', () => {
  let service: YourService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        YourService,
        { provide: LOCALE_ID, useValue: 'en-US' },
        provideLocalization({
          // 直接传入翻译对象或加载文件
          translations: require('./assets/i18n/messages.en.json')
        })
      ]
    });
    service = TestBed.inject(YourService);
  });

  it('should return correct localized text', () => {
    const result = service.getInfo('param');
    expect(result).toBe('预期的本地化文本内容');
  });
});

3. 全局配置测试环境本地化 #

若多个测试文件都需要用到本地化，可在test.ts（测试入口文件）中全局注册翻译，避免重复配置：

// test.ts
import { $localize } from '@angular/localize';
import translations from './src/assets/i18n/messages.en.json';

// 全局加载翻译
$localize.load(translations);

// 保留原有测试初始化代码
import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

declare const require: {
  context(path: string, deep?: boolean, filter?: RegExp): {
    keys(): string[];
    <T>(id: string): T;
  };
};

getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting(),
);

const context = require.context('./', true, /\.spec\.ts$/);
context.keys().map(context);

注意事项 #

• 确保翻译文件格式符合$localize要求，JSON文件结构应为：{ "locale": "en-US", "translations": { "@@Some": "对应翻译文本" } }
• 若使用XLIFF格式翻译文件，需借助@angular/localize/tools工具转换为可直接加载的格式

内容的提问来源于stack exchange，提问作者carterv