FAQ for issues and solutions which can appear

[timofei-iatsenko]

I think this not a secret that "Angular + Jest" isn't a popular solution. So it's quite hard to find any information in the internet if you face any problems.
I have a quite big project, (about 30mb in mono-repo) and while migrating to Jest I faced lot of issues which not described anywhere in the internet.

So my proposal, we can create a Wiki page on this github and start gather issues with solutions. To make use of Jest + Angular delightful and painless.

I can start from some:

1. Q: ReferenceError: CSS is not defined when testing components which used Material Design lib.

   A: Material Design library has a special check whether it run in browser environment or not. This check fails in jsdom, environment, because it's emulate browser, but not for all cases.

add this to setup-jest.ts

Object.defineProperty(window, 'CSS', {value: () => ({})});

2. Q: Could not find Angular Material core theme.. or Could not find HammerJS when testing components which used Material Design lib.

   A: There few possible solutions, but most bulletproof:

add this to setup-jest.ts

const WARN_SUPPRESSING_PATTERNS = [
/Could not find Angular Material core theme/,
/Could not find HammerJS/,
];

const warn = console.warn;

Object.defineProperty(console, 'warn', {
 value: (...params: string[]) => {
   if (!WARN_SUPPRESSING_PATTERNS.some((pattern) => pattern.test(params[0]))) {
     warn(...params);
   }
 }
});

3: Q: When run with coverage get this errors

No file coverage available for: c:\projects\meteoguard\src\app\tasks\shared\index.ts
at CoverageMap.fileCoverageFor (node_modules/istanbul-lib-coverage/lib/coverage-map.js:96:15)

A: this errors appears only for index.ts files which has only import/export statements,actually I don't know why it happens (may be typescript compilation output is empty for this files), but as a workaround you can just add this index.ts files to coverage ignore pattern. Even more, this index.ts files don't have any value for coverage

package.json

 "jest": {
    "coveragePathIgnorePatterns": [
      "/node_modules/",
      "index.ts"
    ],
  },

4. Q: "Syntax Error: Invalid or unexpected token" with absolutely unhelpful stack trace.

A: Probably there is a require of file type which is not supported by Jest itself. For instance "png".
Follow jest documentation: https://facebook.github.io/jest/docs/en/webpack.html#content

[thymikee]

Awesome you share this, thank you! There is Troubleshooting section on the Readme, where we can add extra information you provided.
If you have any ideas on how to make it more discoverable, please post it here.

[timofei-iatsenko]

Probably we can create a Wiki for this project, and store all information there. I think put it into readme not a good idea.

The main thing, that this wiki page should be well prepared for google, that other developers may just copy/paste error message and find a solution.

[timofei-iatsenko]

in additional to first post

5. Using '"target": "es6"' in jest setup is not currently supported by Angular JIT compiler.

TypeError: Cannot convert undefined or null to object
at Function.getPrototypeOf ()

at getParentCtor (node_modules/@angular/core/bundles/core.umd.js:1825:47)

Issue for tracking angular/angular#15127

[damoonrashidi]

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

Solution

A possible fix is to trick angular material into thinking that the core theme is loaded by adding a selector to the JSDOM page in your setupJest.ts file

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

This is an ugly workaround and will break if future versions of angular material do theme detection differently.

[sebald]

Not an Angular developer, but rather node + TS. Still @thekip saved me a lot of headache with his 3. tip! 😍 Just here to say thank you!

[timofei-iatsenko]

Thanks for warm words. Add couple thinks which figured out after updating to Angular 5 and latest material.

Q: While testing components which used Material Design lib, you receive an error

TypeError: Cannot read property 'bind' of undefined
at new MediaMatcher (node_modules/@angular/cdk/bundles/cdk/layout.es5.js:36:30)

A: Material Design library uses matchMedia browser api, wich is not presented in JsDom we need mock it.

add this to setup-jest.ts

Object.defineProperty(window, 'matchMedia', { value: () => (
 {
   matches : false,
   addListener: () => { },
   removeListener: () => { },
 }
) });

Q: While testing components with animation in Angular 5 you receive an error:

The animation trigger "X" has failed to build due to the following errors:
The provided animation property "transform" is not a supported CSS property for animations

Object.defineProperty(document.body.style, 'transform', {
  value: () =>
    ({
      enumerable: true,
      configurable: true,
    }),
});

[bhanna1693]

The solution above no longer works (at least not for me)

[bdimir]

in you test you can set in providers this:

 {
    provide: MATERIAL_SANITY_CHECKS, 
    useValue: false
 }

[joergplewe]

Hi all!

I'm far from being a build/test expert, so I run into an issue with testing code using a WebWorker created with the ng generate web-worker CLI tool.

Running the test gives me

src/app/mydata.service.ts:147:49 - error TS1343: The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'esnext', or 'system'.

            new URL("./mydata.service.worker", import.meta.url)

I tried my best to make my way thru the docs - without success. Can somebody give me a hand?

[ahnpnl]

import meta is an ESM feature which doesn’t work with default NodeJs commonjs mode. You need to run Jest in ESM mode.

you can check our documentation how to use ESM mode with Jest.

[joergplewe]

Wow ... that was quick. I tried the following w/o success. Something more to do?

// require('jest-preset-angular/ngcc-jest-processor');

module.exports = {
  // preset: "jest-preset-angular",
  preset: "jest-preset-angular/presets/defaults-esm",
  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
  setupFiles: ["jest-canvas-mock", "jest-webgl-canvas-mock"],
  moduleNameMapper: {
    "~/(.*)": "<rootDir>/src/$1",
  },
};