jest-preset-angular v8 has breaking changes

[sroettering]

Please make sure you have read the submission guidelines before posting an issue

Prerequisites

Please answer the following questions for yourself before submitting an issue.
YOU MAY DELETE THE PREREQUISITES SECTION.

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed
• I'm reporting the issue to the correct repository (not related to Angular, AngularCLI or any dependency)

Expected Behavior

Running jest tests does not fail

Current Behavior

Jest tests fail with the following error message:

Module jest-preset-angular/AngularSnapshotSerializer.js in the snapshotSerializers option was not found.

Steps to Reproduce

1. update jest-preset-angular to 8.0.0
2. run jest tests

Other

I looked into jest-preset-angular and it seems that they introduced a build folder with v8 thus the path is not correct anymore.

[skorunka]

Hi, I have the same problem after upgrading to latest jest-preset-angular(8.0.0). It seems the files are now in /build folder of jest-preset-angular plugin.
Try this in your apps/.../jest.config.js file:

snapshotSerializers: [
    'jest-preset-angular/build/AngularSnapshotSerializer.js',
    'jest-preset-angular/build/HTMLCommentSerializer.js'
  ]

Now the tests are found and being executed, but unfortunately I got some other error:

$ ng test
 FAIL  apps/portal/src/app/app.component.spec.ts
  ● Test suite failed to run

    File not found: jest-preset-angular/InlineHtmlStripStylesTransformer (resolved as: C:\_\TS\eleg\fe\eleg\jest-preset-angular\InlineHtmlStripStylesTransformer)

      at ConfigSet.resolvePath (../../node_modules/ts-jest/dist/config/config-set.js:712:19)
      at ../../node_modules/ts-jest/dist/config/config-set.js:225:98
          at Array.map (<anonymous>)
      at ConfigSet.get (../../node_modules/ts-jest/dist/config/config-set.js:225:64)
      at ConfigSet.tsJest (../../node_modules/ts-jest/dist/util/memoize.js:43:24)
      at ConfigSet.get (../../node_modules/ts-jest/dist/config/config-set.js:297:41)
      at ConfigSet.versions (../../node_modules/ts-jest/dist/util/memoize.js:43:24)
      at ConfigSet.get (../../node_modules/ts-jest/dist/config/config-set.js:583:32)
      at ConfigSet.jsonValue (../../node_modules/ts-jest/dist/util/memoize.js:43:24)
      at ConfigSet.get [as cacheKey] (../../node_modules/ts-jest/dist/config/config-set.js:598:25)

[skorunka]

node_modules\@nrwl\jest\src\builders\jest\jest.impl.js
If you update astTransformers from:
['jest-preset-angular/InlineHtmlStripStylesTransformer']
TO
['jest-preset-angular/build/InlineFilesTransformer', 'jest-preset-angular/build/StripStylesTransformer']
The File not found error is gone, but there is a new problem:

Uncaught (in promise): Failed to load app.component.html plus few more.

It looks, NX is not compatible with the "jest-preset-angular": "8.0.0".

[skorunka]

https://github.com/thymikee/jest-preset-angular/blob/master/CHANGELOG.md#migration-guide

[vsavkin]

Thank you folks!

Are you interested in submitting a PR updating Nx to work with the new version of jest-preset-angular? We are happy to help.

[JoshMentzer]

I'll take a pass at it

[ronnyek]

Nice, I feel like upgrade to jest-angular-preset will help with problems I have. Cant wait until this is there

[skorunka]

How does it look guys? Any plans?

[Maus3rVonDutch]

Hi, I am trying to update my nrwl workspace and any other referenced packages to the latest versions (see attached package.json), but I countered a lot of problems and spent the better part of the week debugging and trying to fix my jest tests.
package.json.txt

It seems the trouble has started with a change in the @nrwl/jest package, to be precise, this version 8.5.1 and this commit 5de142f.
In that commit this code is removed:

 diagnostics: {
      warnOnly: true
    }

It seems that was done because of a change in jest 24. Ok fair enough, let's tackle this. First I tried to by-pass that configuration by providing my own in the corresponding jest.config.js of the specific projects like so:

 globals: {
    'ts-jest': {
      diagnostics: {
        warnOnly: true
      }
    }
  }  

Sadly this was not working. I tracked it down to the implementation of jest.impl.js, which is simply overwriting the complete ts-jest property with code defined there. So you do not have the option to customize the ts-jest section at all (for instance excluding some specific TS errors). This is not implemented as an open-closed principle, so maybe you could open it open it up by turning the implementation around: providing a default tsJestConfig (with jest-angular-preset and ts-jest section) and then doing a DEEP merge (so don't use Object.assign) whith the module jest.config.js.
NB this is also necessary when upgrading to the latest jest-preset-angular, because the asTransformers references have changed (as already stated in the current issue)

  astTransformers: [
                'jest-preset-angular/build/InlineFilesTransformer',
                'jest-preset-angular/build/StripStylesTransformer'
            ],

Right, that out of the way, lets tackle the root cause of the problem: fixing the issues that causes the problems in the first place.

In my case I am using a custom type definition to be able to use some functions from a third-party lib (ramda-extensions) that does not have a *.d.ts implementation, and although my code is peforming fine on runtime (with my root customized tsconfig.json settings), the tests where still failing however. This is the relevant root tsconfig.json section to fix the error:

{
 "compilerOptions": {
	 "files": [
		"./typings/ramda-extension.d.ts"
	  ],
 }
}

However, when running my tests I get still get a TS error (TS7016: Could not find a declaration file for module 'ramda-extension').
The only way to fix this is to add the file to the specific project tsconfig.spec.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    ...
  },
  "files": [
    "src/test-setup.ts",
    "../../../typings/ramda-extension.d.ts"
  ]  
}

An now the test is running, but although this fixes this issue, it doesn't seem that scalable to me, because this is a core utility that is referenced by almost every module, I have to add this to the tsconfig.spec.json of EVERY module.

So maybe I'm missing something here, but to me it seems this isn't the way to go, but I'm not sure whether this works as intended or is just the result of a bug or faulty implementation. In any case I find it somewhat misleading that there is an extends sections in the tsconfig.spec.json of the library module, that is extending the tsconfig.json from the module, which in return is extending from my root tsconfig.json, but I doesn't seem to extending at all (or maybe just some parts and not the files section).

Ok, finally got that working, but sadly the next problem arose, and I think this is the thoughest problem of them all:
Now when I try to run all of my test with a CLEAN jest cache (so delete all entries prior to running the tests, on windows you can find it here: %USERPROFILE%\AppData\Local\Temp\jest), some tests are failing randomly. When I try to run them a second time, they all run fine. Maybe this is caused by invalid metadata reflection, but I haven't got arround this issue yet.

After a lot of google searches I finally ended up here: thymikee/jest-preset-angular#288 (which is not the same issue, but might be a clue) and finally in this current issue: #1979

So it seems the current version of your library is not compatible with the latest versions of angular, jest and jest-preset-angular.

Our project is not publicly available, but I can provide you with more research information, but I first wanted to get some attention, then maybe we can have a more detailed and narrowed down discussion than simple giving you all my findings.

Hope to hear something from any core contributors any time soon, because I'm stuck at the moment.

[Maus3rVonDutch]

FYI here is an example of such errors that occur:

The strange thing is however, when I inspect the junit.xml I don't see any failing tests.

This is what is reported when all tests have completed:

[ashokshetty1970]

in your module, you may have the file jest.config.js with the following content.

module.exports = {
    name: 'name',
    preset: '../../jest.config.js',
    coverageDirectory: '../../coverage/libs/common',
    snapshotSerializers: [
        'jest-preset-angular/AngularSnapshotSerializer.js',
        'jest-preset-angular/HTMLCommentSerializer.js'
    ],
    setupFilesAfterEnv: ["./src/test-setup.ts"]
};

comment or remove the member "snapshotSerializers". It is not needed. Worked for me,
The resulting should be

module.exports = {
    name: 'name',
    preset: '../../jest.config.js',
    coverageDirectory: '../../coverage/libs/common',
   
    setupFilesAfterEnv: ["./src/test-setup.ts"]
};

[draylegend]

@ashokshetty1970 didn't work for me.

File not found: jest-preset-angular/InlineHtmlStripStylesTransformer (resolved as: D:\dev\web\apps\aha\jest-preset-angular\InlineHtmlStripStylesTransformer)

      at ConfigSet.resolvePath (../../node_modules/ts-jest/dist/config/config-set.js:712:19)
      at ../../node_modules/ts-jest/dist/config/config-set.js:225:98
          at Array.map (<anonymous>)
      at ConfigSet.get (../../node_modules/ts-jest/dist/config/config-set.js:225:64)
      at ConfigSet.tsJest (../../node_modules/ts-jest/dist/util/memoize.js:43:24)
      at ConfigSet.get (../../node_modules/ts-jest/dist/config/config-set.js:297:41)
      at ConfigSet.versions (../../node_modules/ts-jest/dist/util/memoize.js:43:24)
      at ConfigSet.get (../../node_modules/ts-jest/dist/config/config-set.js:583:32)
      at ConfigSet.jsonValue (../../node_modules/ts-jest/dist/util/memoize.js:43:24)
      at ConfigSet.get [as cacheKey] (../../node_modules/ts-jest/dist/config/config-set.js:598:25)

[anthony-telljohann]

I was able to get this to work locally by doing the following:

• follow the jest-preset-angular v8 migration guide
• commet out or remove the following lines in @nrwl/jest/src/builders/jest/jest.impl.js:

// try {
//   require.resolve('jest-preset-angular');
//     Object.assign(tsJestConfig, {
//         stringifyContentPathRegex: '\\.(html|svg)$',
//         astTransformers: ['jest-preset-angular/InlineHtmlStripStylesTransformer']
//     });
// }
// catch (e) { }

Going forward, I believe there are a few things we should consider:

• intentionally (tightly) couple jest-preset-angular to nrwl/jest by adding jest-preset-angular as a peerDependency of nrwl/jest
• decouple jest-preset-angular from nrwl/jest by removing the jest.config.js override of ts-jest globals.

[leon]

Any updates on this?
I updated my nx repo to jest 25 and now it's complaining about jest-preset-angular not supporting jest 25

What is needed to get this merged into the next release?

[whimzyLive]

@leon I managed to fix it by changing
jest-preset-angular/AngularSnapshotSerializer.js to jest-preset-angular/build/AngularSnapshotSerializer.js
and
jest-preset-angular/HTMLCommentSerializer.js to jest-preset-angular/build/HTMLCommentSerializer.js.

Since in latest version of jest they have been moved under /build directory.
REF: https://github.com/thymikee/jest-preset-angular/releases/tag/v8.0.0

[jrpool]

With jest 24.9.0 and jest-preset-angular 8.0.0 as dev dependencies, I found in jest.config.js the entry module.exports.globals.ts-jest.astTransformers with an array value, containing the item
require.resolve('jest-preset-angular/InlineHtmlStripStylesTransformer')
This references a file with the wrong name in the wrong place. I commented this item out, and then the error
Cannot find module 'jest-preset-angular/InlineHtmlStripStylesTransformer'
stopped occurring on ng test.

[daditangs]

i literally checked node_modules/jest-preset-angular/build folder and the files, InlineFilesTransformer, StripStylesTransformer, HTMLCommentSerializer and AngularSnapshotSerializer are nowhere to be foung. any idea what's causing this issue?
I'm running my test on my Angular 10 app. here are some of my project details:

    "@angular-builders/jest": "^12.1.0",
    "@types/jest": "^26.0.24",
    "jest": "^27.0.6",
    "jest-preset-angular": "^9.0.4",
}```
node version: 12.22.1
most of my configurations are based on this documentation: https://www.npmjs.com/package/jest-preset-angular/v/9.0.0-next.1

[controladad]

Same here, when I run npm run test this error occurs:

> nx run angular-store:test 
● Validation Error:

  Module jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js in the snapshotSerializers option was not found.
         <rootDir> is: D:\Projects\CAC\WebSite\Burger House\burgerhouse_frontend\apps\angular-store

  Configuration Documentation:
  https://jestjs.io/docs/configuration

My package dependecies:

"dependencies": {
    "@angular/animations": "12.1.0",
    "@angular/cdk": "^12.1.0",
    "@angular/common": "12.1.0",
    "@angular/compiler": "12.1.0",
    "@angular/core": "12.1.0",
    "@angular/forms": "12.1.0",
    "@angular/platform-browser": "12.1.0",
    "@angular/platform-browser-dynamic": "12.1.0",
    "@angular/platform-server": "12.1.0",
    "@angular/router": "12.1.0",
    "@angular/service-worker": "12.1.0",
    "@ngneat/tailwind": "^7.0.3",
    "@nguniversal/express-engine": "^12.1.0",
    "@nrwl/angular": "12.5.8",
    "express": "^4.15.2",
    "ngx-device-detector": "^2.1.1",
    "ngx-owl-carousel-o": "^6.0.0",
    "ngx-stars": "^1.5.1",
    "rxjs": "~6.5.5",
    "tailwindcss": "^2.2.4",
    "tslib": "^2.0.0",
    "zone.js": "0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "12.1.0",
    "@angular-eslint/eslint-plugin": "12.0.0",
    "@angular-eslint/eslint-plugin-template": "12.0.0",
    "@angular-eslint/template-parser": "12.0.0",
    "@angular/cli": "12.1.0",
    "@angular/compiler-cli": "12.1.0",
    "@angular/language-service": "12.1.0",
    "@nguniversal/builders": "^12.1.0",
    "@nrwl/cli": "12.5.8",
    "@nrwl/cypress": "12.5.8",
    "@nrwl/eslint-plugin-nx": "12.5.8",
    "@nrwl/jest": "12.5.8",
    "@nrwl/tao": "12.5.8",
    "@nrwl/workspace": "12.5.8",
    "@tailwindcss/aspect-ratio": "0.2.1",
    "@tailwindcss/line-clamp": "0.2.1",
    "@tailwindcss/typography": "0.4.1",
    "@types/express": "^4.17.0",
    "@types/jest": "26.0.8",
    "@types/node": "14.14.33",
    "@typescript-eslint/eslint-plugin": "4.19.0",
    "@typescript-eslint/parser": "4.19.0",
    "codelyzer": "^6.0.0",
    "cypress": "^6.0.1",
    "dotenv": "8.2.0",
    "eslint": "7.22.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-cypress": "^2.10.3",
    "jest": "27.0.3",
    "jest-preset-angular": "9.0.3",
    "prettier": "2.3.1",
    "tailwindcss": "2.2.4",
    "ts-jest": "27.0.3",
    "ts-node": "~9.1.1",
    "tslint": "~6.1.0",
    "typescript": "4.2.4"
  }

[jdnichollsc]

i literally checked node_modules/jest-preset-angular/build folder and the files, InlineFilesTransformer, StripStylesTransformer, HTMLCommentSerializer and AngularSnapshotSerializer are nowhere to be foung. any idea what's causing this issue?
I'm running my test on my Angular 10 app. here are some of my project details:

    "@angular-builders/jest": "^12.1.0",
    "@types/jest": "^26.0.24",
    "jest": "^27.0.6",
    "jest-preset-angular": "^9.0.4",
}```
node version: 12.22.1
most of my configurations are based on this documentation: https://www.npmjs.com/package/jest-preset-angular/v/9.0.0-next.1

Please check the BREAKING CHANGES here https://github.com/thymikee/jest-preset-angular/blob/cf3874b8d856a0977e9ee5b24a12eadf940481a5/CHANGELOG.md#breaking-changes

SOLUTION:

const jestPresetAngularSerializers = require('jest-preset-angular/build/serializers')

module.exports = {
  ...
  snapshotSerializers: jestPresetAngularSerializers,
};

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.