AngularJS组件测试：templateUrl导致spec执行失败的解决问询

在Jest测试AngularJS组件时遇到的[$sce:insecurl]错误，本质是测试环境下Angular的SCE（Strict Contextual Escaping）安全策略阻止了本地模板URL的加载，而你尝试用$sce.trustAsResourceUrl的方式又因为Jest没有正确加载模板文件导致编译失败。以下是几个针对性的解决方案，按推荐程度排序：

方案一：预加载模板到$templateCache（最推荐） #

这是AngularJS测试中处理模板的标准做法，通过把模板内容提前存入$templateCache，组件的templateUrl会直接从缓存读取，既绕开了SCE限制，也避免了真实文件加载的问题。

实现步骤： #

1. 用Node.js的fs模块读取模板文件内容（Jest支持Node API）；
2. 在测试的模块配置阶段，把模板内容存入$templateCache。

const fs = require('fs');
// 注意路径要和你项目中模板的实际位置匹配
const templateContent = fs.readFileSync('./app/global/components/horizontal-list/horizontal-list.tpl.html', 'utf8');

beforeEach(module('app', function($templateCache) {
  $templateCache.put('app/global/components/horizontal-list/horizontal-list.tpl.html', templateContent);
}));

// 你的测试逻辑
beforeAll(function() {
  element = angular.element('<horizontal-list></horizontal-list>');
  element = $compile(element)(scope);
  scope.$apply();
});

这样组件编译时会直接使用缓存中的模板内容，不会触发任何资源加载请求，彻底解决两个问题。

方案二：配置$sceDelegateProvider放宽测试环境的安全限制 #

如果你只是想快速绕过SCE的阻止，不需要预加载模板，可以在测试模块中配置$sceDelegateProvider，允许你的模板URL路径。

beforeEach(module('app', function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist([
    'self', // 保留默认的同源允许规则
    'app/**/*.tpl.html' // 匹配你的模板文件路径
  ]);
}));

不过这个方案依赖Jest能正确访问到模板文件，如果你遇到资源找不到的编译错误，还是需要确保Jest的测试环境能读取到模板文件（比如调整路径配置），所以不如方案一稳定。

方案三：Mock组件的模板（仅测试逻辑时使用） #

如果你的测试只关注组件的业务逻辑，不关心模板渲染效果，可以直接替换组件的templateUrl为inline模板，彻底避免模板加载问题。

beforeEach(module('app', function($provide) {
  $provide.decorator('horizontalListDirective', function($delegate) {
    // 获取原指令的定义对象
    const originalDirective = $delegate[0];
    // 替换为mock模板
    originalDirective.template = '<div class="mock-horizontal-list"></div>';
    // 删除templateUrl属性，避免冲突
    delete originalDirective.templateUrl;
    return $delegate;
  });
}));

这个方案适合快速编写单元测试，专注于组件的控制器逻辑、数据绑定等，不需要渲染真实模板。

为什么你之前的临时方案会失败？ #

你尝试用templateUrl: function($sce) { return $sce.trustAsResourceUrl(...) }虽然解决了SCE的问题，但Jest测试环境默认不会像浏览器那样加载本地文件，所以Angular编译时找不到对应的模板资源，导致报错。预加载模板到缓存才是解决这个问题的核心思路。

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