[Bug]: Unexpected value 'Module' imported by the module 'DynamicTestModule'. Please add an @NgModule annotation - while Module from library present in transformIgnorePatterns

[polonmedia]

Version

13.1.1

Steps to reproduce

1. Have angular 12 repository and upgrade to 13.
2. Have angular 13 repository with "uuid": "^9.0.0" in dependencies (for example).
3. Use "uuid" it in .ts file.
4. Configure jest.config as in jest-preset-angular angular ver 13 example (both default and esm).
5. Run jest command.
6. Experience "Jest encountered an unexpected token" error from node_modules. Neither esm or default mode works.

Expected behavior

There are so much conflicting information around from previous and newer preset versions, I could not find one clear sentence on exactly what to do with these kind of errors. It should either work OOTB or at least have a clear information what to add to where, as ive tried to add transformIgnorePatterns or globals and it does nothing or produces other errors.

Actual behavior

SyntaxError: Unexpected token 'export'

with this config:

As I understand something with modules changed and I should transform or not dist files from node_modules?

Additional context

There are at least 2 big projects I need to be bumped up regarding angular version and jest, they use variety of dependencies and it is really quite problematic not to know what to do. Ive also tried bumping to ver 15 of angular but that changed nothing, same errors, same behavior. I was careful about using proper dep versions from examples. What should I do? At least a ballpark advice or clear explanation of change in mechanisms would be very welcomed.

Environment

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
  Binaries:
    Node: 16.14.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.3.1 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    jest: ^29.6.1 => 29.6.1

[polonmedia]

I tried this config

with this package.json ("@angular/core": "^13.0.0")

and still i have this shit

bro wtf, there is no winning, whatever I use in whatever sense - always an issue

[ahnpnl]

Did you check https://thymikee.github.io/jest-preset-angular/docs/guides/angular-13+?

[polonmedia]

@ahnpnl yes, I did, I started with it, but there are always the same or similiar issues, mainly comming from node_modules

[ahnpnl]

The error I can see coming from a library you are using angular-support-bot, this would mean you need to tell Jest to transform the library files via transformIgnoredPatterns. That library has a folder node_modules which Jest complains about.

[polonmedia]

No, this isnt a library, its an app that I try to use the jest in

[polonmedia]

It isnt even clear from the link u sent - should I use the jest.config.ts from here

or from example?

[ahnpnl]

It isnt even clear from the link u sent - should I use the jest.config.ts from here or from example?

This is the part if you want to use ESM mode (The title "Use ES modules" seems to be not clear enough)

In your case, js or ts config file isn't related. The problem is about Jest can't transform files from your node_modules for some reasons. The only way to fix is modifying transformIgnorePatterns.

If your project doesn't have any custom config on transforming files, perhaps you can compare your project config with example project https://github.com/thymikee/jest-preset-angular/blob/main/examples/example-app-v13/jest.config.js?

Another way is configuring moduleNameMapper to tell Jest where to load things.

[polonmedia]

I also noticed that u enable this - skipNgcc: false,
but whenever I dont turn it to true, the following happens:

can it be somehow related?

I follow the exact config as u have in example for esm modules (npm run test-esm)

[polonmedia]

If i skip it, following happens:

am i mentally challanged? something seems off whatever i try to do

[ahnpnl]

I'd recommend to keep skipNgcc: false, this ensures you are compatible with future Angular versions, in v16 they removed View Engine.

It's hard to check about this without a repo. Maybe you can somehow replicate the issue in the example-app-v13?

[polonmedia]

@ahnpnl brother, i added this to the mjs config

but i get those errors now:


could u advise me to what direction should i look for?

[ahnpnl]

I can see that you are running Jest in ESM mode. The 2nd screenshot has a lib called cytiva-cui-design-ng and the js of this lib is loaded with umd. Maybe you can use moduleNameMapper to instruct Jest to load mjs file instead?

Moving to ESM mode is a very big thing btw. Normally I make CJS mode work first before trying out ESM mode.

[polonmedia]

@ahnpnl thank u for your patience and responding to me, I managed to get past the config with your guidance and tests are almost working, I have one issue left to which I cannot comprehend and to which I cannot find a clear answer

I get this error while trying to use modules from my components library

This is how my library is in dist folder:

(I think it may be related) As I mentioned before, I have issue with running ngcc which produces following error

Could you perhaps point me to direction I should take to resolve this?

[polonmedia]

I managed to tell ngcc to ignore the lib via this config:

But didnt resolve my issue

[polonmedia]

Bumping to angular ver 14 didnt resolve nothing also

[ahnpnl]

I'm sorry I was busy. Now coming back to this I lost the context of what we've tried