Angular-builders: Add Support for jest-preset-angular 8.0

[WynieCronje]

Describe the bug
Using jest-preset-angular 8.0 causes tests to fail.

• File not found: jest-preset-angular/InlineHtmlStripStylesTransformer.js

[just-jeb]

I plan to add it as part of next major release. However you shouldn't be using it directly anyway. It comes as a dependency of @angular-builders/jest and the internal builder logic relies on a specific version of this preset.
Why do you have to use the new version of jest-preset-angular?

[PhiLhoSoft]

My case: I have jest-preset-angular in my package.json probably because it was specified somewhere in the numerous articles I consulted when I migrated from Karma to Jest…
I updated the version because of a routine update of all versions.

Note: I see jest-preset-angular is mentioned in the README file, but perhaps this doc should give the above information: we don't need to explicitly put it in the package.json, it is a sub-dependency.

Oh, I think I remember now why I have put it in the config. If I remove it, I get the strange error:

> ng test
● Validation Error:

  Preset jest-preset-angular is invalid:

  The "id" argument must be of type string. Received type object
  TypeError [ERR_INVALID_ARG_TYPE]: The "id" argument must be of type string. Received type object
    at Module.require (internal/modules/cjs/loader.js:631:11)
    at require (internal/modules/cjs/helpers.js:22:18)
    at setupPreset (C:\Projects\main-app\node_modules\jest-config\build\normalize.js:230:14)
    at normalize (C:\Projects\main-app\node_modules\jest-config\build\normalize.js:554:15)
    at readConfig (C:\Projects\main-app\node_modules\jest-config\build\index.js:163:46)
    at readConfigs (C:\Projects\main-app\node_modules\jest-config\build\index.js:373:26)
    at C:\Projects\main-app\node_modules\@jest\core\build\cli\index.js:155:58
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (C:\Projects\main-app\node_modules\@jest\core\build\cli\index.js:108:24)
    at _next (C:\Projects\main-app\node_modules\@jest\core\build\cli\index.js:128:9)

Note that my jest.config.js file is in a test folder, if it is relevant.
Right now, I will just go back on the version 7.1.1 of jest-preset-angular.
(Tested, yes, it works again.)

[just-jeb]

Could you please create a reproduction repo with this error?

[PhiLhoSoft]

I made a new Angular project with angular-cli, did the steps to convert from Karma / Jasmine to Jest, ensured the configurations files were very similar… and I cannot reproduce the error in this test project (still have it in the big project).
So I have no idea where the problem comes from. (Updated the issue with the full stacktrace.)
We must have some weird stuff in the configuration files we import, or something.
Let's say the case is closed on my side.

[maxtacco]

@just-jeb Hi, we also have this issue. I created a repo for you to test: https://github.com/maxtacco/angular-builders-jest-preset
Currently, we use npm run test, but it would be really nice to make ng test work as well.

[PhiLhoSoft]

@maxtacco As said above, don't include jest-preset-angular to your package.json, or set its version to 7.1.1.
And I think the missing part to make ng test to work is "configPath": "./jest.config.js" in the "options" of the "test" entry of angular.json.

[maxtacco]

@PhiLhoSoft Hi, if I do that my jest.config.js is not going to be compatible and I will receive errors for other dependencies.

[PhiLhoSoft]

"I receive errors" is what users say, not what programmers say.
Programmers provide detailed error listing, and other elements relevant to the issue.

[maxtacco]

@PhiLhoSoft So, you basically hijacked this issue, posted your own mumblings about how you solved it on your end without contributing anything to the resolution of the original problem. I provided a link to a repo that the author of this project asked for that clearly re-produces the original issue - and that's what programmers do.

[WynieCronje]

For me the root issue:

We did some maintenance and updated all outdated node modules.

The tests started failing, only after some hours of investigation. I realized it was the jest-preset-angular version that conflicted between the normal jest command vs ng test.

In our project we have both implementations:

• jest so we can use file filter and --watch (requires custom config that also depends on jest-preset-angular)
• and ng test (uses builder and sets up config that depends on jest-preset-angular )

If there is a way to do file filter and watch with ng test then there's no need for using jest directly i suppose

[biolauri]

If I get it correctly, @WynieCronje, you're waiting for the configuration of filter and watch via this @angular-builders/jest builder. According to its schema, it already supports both in the latest version (8.3.1):

• watch (including watchAll & watchPathIgnorePatterns): https://github.com/just-jeb/angular-builders/blob/857f092d7491cceadf183f804f409a9cd18f5e01/packages/jest/src/schema.json#L453-L456
• filter (including skipFilter): https://github.com/just-jeb/angular-builders/blob/857f092d7491cceadf183f804f409a9cd18f5e01/packages/jest/src/schema.json#L135-L138

So it might do it for you already. For the watch option, I can tell you that it's working already as I'm using it in a project myself with this builder.

[DuncanFaulkner]

Hi
I'm building a new project and use Nrwl's NX workspaces this add jest-preset-angular version 8. This also shows the error File not found: jest-preset-angular/InlineHtmlStripStylesTransformer.js (after adding 'build' to the snapshotserializers). NX uses @nrwl/jest:jest rather than @angular-builders/jest builder so this may an NX issue, just thought I would add it here for reference.

Reverting back to 7.1.1 seems to work

[just-jeb]

The preset is supported in version 9 (since it's a breaking change) out of the box. No need to explicitly install it.
Since you're building a new project I'd recommend you to start with Angular 9 RC and the next version of Jest builder.
Until version 9 is officially released you can install it by running npm i @angular-builders/jest@next.