Angular 12下使用Jest如何mock CustomTranslateService测试工具函数？

你不需要实例化完整的CustomTranslateService，也不需要处理它的构造函数依赖，被测函数仅调用了该服务的get方法，直接构造仅包含所需方法的mock对象即可，以下是两种可直接使用的实现方式：

方案1：最简手动mock（最推荐，冗余度最低） #

直接构造符合入参类型要求的对象，仅实现被测逻辑用到的get方法即可：

// 测试用例内构造mock对象
const mockTranslateService = {
  get: jest.fn((key: string) => {
    // 可根据测试场景自定义不同key对应的返回值
    return key === 'something' ? '测试翻译文本' : key;
  })
// 用类型断言跳过TS校验，只要你确保mock的方法符合被测逻辑调用要求即可
} as unknown as CustomTranslateService;

调用被测函数时直接传入该mock对象即可，同时你可以直接用Jest的mock方法对get的调用行为做断言：

// 示例测试断言
expect(mockTranslateService.get).toHaveBeenCalledTimes(1);
expect(mockTranslateService.get).toHaveBeenCalledWith('something');

方案2：Jest自动mock类（适合多测试用例复用场景） #

如果你在多个测试用例中都需要用到该服务的mock，可以用Jest自动mock整个类：

// 在测试文件顶部引入CustomTranslateService后添加以下代码
jest.mock('你的CustomTranslateService文件路径', () => ({
  CustomTranslateService: jest.fn().mockImplementation(() => ({
    get: jest.fn((key) => key) // 默认返回key，可在单个测试用例中覆盖返回值
  }))
}));

// 测试用例内使用示例
const mockTranslateService = new CustomTranslateService() as jest.Mocked<CustomTranslateService>;
// 单个用例自定义返回值
mockTranslateService.get.mockReturnValue('自定义翻译内容');

你使用的jest-preset-angular已经内置了ts-jest的能力，不需要额外安装ts-jest依赖，只要jest配置中预设正确即可正常编译TypeScript测试代码。

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