Get rid of "Could not find angular material core theme" warning when using with angular-material

[damoonrashidi]

When running tests with jest + jest-preset-angular in a non angular-cli app you get a

console.warn node_modules/@angular/material/bundles/material.umd.js:191
      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.angular.io/guide/theming

warning for each of your components that contain an angular material component. Since there is no way of actually loading the theme in a non angular-cli app test you have to disable the warning by injecting some css in the JSDOM page to trick angular material that the page has loaded the css.

This can be done by modifying the setupJest.ts file to look like this

declare var global: any;

const style = global['document'].createElement('style');
style.innerHTML = `
  .mat-theme-loaded-marker {
    display: none;
}`;
global['document'].head.appendChild(style);

Maybe this can be added to the README.md? Unless of course I'm mistaken and there is an actual "proper" way of doing it.

[thymikee]

Thanks for your input! I'm fine with adding this to readme or better – to FAQ: #79
Would you be interested in starting a Wiki page with this tip?

We could go with the format:

FAQ

Here you'll find answers to frequently asked questions alongside with some common errors and how to fix them

Errors

Could not find Angular Material core theme

Full error message:

console.warn node_modules/@angular/material/bundles/material.umd.js:191
      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.angular.io/guide/theming

-- your answer here --

[damoonrashidi]

Sure I'll add it to the FAQ. It's kind of an ugly solution and it'll break if they change the css selector but so far I haven't found a proper way of loading the angular material theme into jest at runtime.

[thymikee]

Yea, we can point out that this is just a workaround, and better solution is appreciated :D

[timofei-iatsenko]

Actually better solution is provide MATERIAL_SANITY_CHECKS token with false value, to disable this checks.

See this PR angular/components#4178

But as far as I understand we need to pass this token in every test where we use Material components. For me is too verbose, so I prefer either method described in this issue or solution proposed by me (it also disables hammerjs warning)

[ahnpnl]

Close in favor of #79

[rossmawd]

Actually better solution is provide MATERIAL_SANITY_CHECKS token with false value, to disable this checks.

See this PR angular/components#4178

But as far as I understand we need to pass this token in every test where we use Material components. For me is too verbose, so I prefer either method described in this issue or solution proposed by me (it also disables hammerjs warning)

For anyone interested, the solution linked by @thekip above, will look something like this (I'm using the Angular testing library):