Angular Material warnings shown when unit testing component

2
votes

I am currently writing some units test for some Angular components that make use of Angular Material. The issue I am having now is I keep getting the following warnings when running the unit tests.

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.

Is it normal to see these warnings? Any ideas on how to suppress these warnings as I don't see them really relevant to unit testing?

2
angularunit-testingangular-materialjestjs

2 Answers

1
votes

Found a hack of suppressing the warnings. In Jest configuration, there's an option to set up script files that can configure Jest testing framework.

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

See setupTestFrameworkScriptFile option from Jest API doc

The path to a module that runs some code to configure or set up the testing framework before each test. Since setupFiles executes before the test framework is installed in the environment, this script file presents you the opportunity of running some code immediately after the test framework has been installed in the environment.

Then in setup.ts, we do the following to suppress all warnings.

console.warn = function() {};

Probably not the most ideal way, but did do the trick.

0
votes

I have been able to resolve this by adding the following line to the files array in karma.config.js

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