单元测试组件时显示 Angular Material 警告答案

【问题标题】：Angular Material warnings shown when unit testing component单元测试组件时显示 Angular Material 警告
【发布时间】：2018-01-01 04:22:47
【问题描述】：

我目前正在为一些使用Angular Material 的Angular 组件编写一些单元测试。我现在遇到的问题是在运行单元测试时不断收到以下警告。

console.warn node_modules\@angular\material\bundles\material.umd.js:183
Current document does not have a doctype. This may cause some Angular Material components not to behave as expected.

console.warn node_modules\@angular\material\bundles\material.umd.js:196
Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.ang
ular.io/guide/theming

console.warn node_modules\@angular\material\bundles\material.umd.js:3327
Could not find HammerJS. Certain Angular Material components may not work correctly.

看到这些警告是否正常？关于如何抑制这些警告的任何想法，因为我认为它们与单元测试并不真正相关？

【问题讨论】：

标签： angular unit-testing angular-material jestjs

【解决方案1】：

发现了一种抑制警告的技巧。在 Jest 配置中，可以选择设置可以配置 Jest 测试框架的脚本文件。

"jest": {
    "setupTestFrameworkScriptFile": "<rootDir>/src/setup.ts",
  }

请参阅 Jest API 文档中的 setupTestFrameworkScriptFile 选项

运行一些代码来配置或设置的模块的路径每次测试之前的测试框架。由于 setupFiles 之前执行测试框架安装在环境中，这个脚本文件为您提供了在之后立即运行一些代码的机会测试框架已安装在环境中。

然后在setup.ts 中，我们执行以下操作来抑制所有警告。

console.warn = function() {};

可能不是最理想的方式，但确实成功了。

【讨论】：

【解决方案2】：

我已经能够通过将以下行添加到 karma.config.js 中的 files 数组来解决此问题

 files: [
            {pattern: './src/test.ts', watched: false},
            {
                pattern: './node_modules/@angular/material/prebuilt-themes/indigo-pink.css',
                included: true,
                watched: true
            }
        ],

【讨论】：