开玩笑 Angular svg 模板

Question

我的 Angular 9 应用程序中有几个组件，它们的模板在 svg 文件中定义，例如templateUrl: './eye.component.svg'.

\n

当我运行测试时出现错误

\n

\n

语法错误：意外的标记“<”

\n

Jest 遇到意外令牌

\n

这通常意味着您正在尝试导入 Jest 无法解析的文件，例如它不是纯 JavaScript。

\n

默认情况下，如果 Jest 看到 Babel 配置，它将使用它来转换您的文件，忽略“node_modules”。

\n

您可以执行以下操作：

\n

\xe2\x80\xa2 To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.\n\xe2\x80\xa2 If you need a custom transformation specify a "transform" option in your config.\n\xe2\x80\xa2 If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.\n

\n

\n

这应该如何解决？它仍然是我需要测试的模板，但现在我什至无法开始这些测试。

\n

Answer 1

事实证明，我只需要扩展jest.config.js transformand moduleFileExtentionswith svg，现在它就可以正常工作了。

这是配置更改后的样子

module.exports = {
  testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],
  transform: {
    '^.+\\.(ts|js|html|svg)$': 'ts-jest'
  },
  resolver: '@nrwl/jest/plugins/resolver',
  moduleFileExtensions: ['ts', 'js', 'html', 'svg'],
  coverageReporters: ['html']
};