-
Notifications
You must be signed in to change notification settings - Fork 308
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Unable to use services exported under a namespace w/ Jest 27 + Ng12 #963
Comments
Does the same setup work in Angular v11 with same jest/ts-jest/jest-preset-angular versions? |
I debugged and saw that the compiled output of |
The bug should occur to Angular 11 too as we use the same transformer. One unknown thing is why Karma + Jasmine works. The most suspicious point would be module resolution doesn’t work correctly which makes WorkaroundFor now pls avoid using export/import namespace but following what Angular library does, e.g.
|
I'm facing exactly the same issue! (And it took me a few days to trace it down!). The issue only happens with Jest (not with Jasmine/Karma) and only if using namespace imports, ie In my case the issue is that I'm using some code generated by a 3rd party code generator that contains namespace imports, and there's no way to tweak the code generator's behavior |
And btw, if you run
And I'm using Angular 12, not sure if same happens with Angular 11 |
Here's a simplified reproduction repo: https://github.com/Maximaximum/jest-angular-namespace-import-bug |
I've just checked and the issue is reproducible with Angular v11 as well. @thymikee @ahnpnl @wtho Is there anything I could do to help resolve this issue? The suggested workaround is not usable for me, so this bug is blocking me from adding unit tests to my app. If this can't be fixed soon, I'll probably have to switch back to Jasmine+Karma. |
the only workaround is don't use import namespace for now but you should import directly from the file as well as avoiding barrel file because that won't work unfortunately. We don't reuse the way how Angular CLI compiles codes therefore some efforts need to check. One thing I haven't tested is: import namespace into a dummy file and rexport whatever comes from that namespace to import into component. The error occurs because import namespace is used directly in a file which contains Angular decorators. |
@ahnpnl do you know why this importing is a problem? Is it related to ts-jest, jest or node? |
It is I think this might be fixed if the The ideal way is: we follow completely the way like Angular CLI does. We would need to have a single place where the compilation is done, not at Jest transformer level. |
@ahnpnl As I have mentioned above, in some cases the workaround is not an option at all |
There is still one more workaround is: use Unfortunately we don't have a quick fix now so those 2 workarounds are the ones I can think of. |
Hi, Thanks for the help! |
You can configure where Jest should look for the files by using You have to use |
Fwiw, in the title of this issue "exported" should be replaced with "imported", because it's not the export syntax, but the import syntax that causes the issue |
FWIW I'm now trying to use the 2nd workaround suggested by @ahnpnl. But what drastically complicates things even more is that I'm having an Looks like I'm stuck with adding any unit tests to my project right now. Neither applying a workaround for jest, nor reverting back to using karma seems to be an easy thing to do. |
|
I can't find documentation about configuring the output folder here https://angular.io/guide/angular-compiler-options. Does |
IIRC After producing build outputs, you would need to configure Jest to run on output folder yes. |
Hi all, I found an easy workaround for this issue. You can configure Jest
There are 2 more possible workarounds:
|
@ahnpnl I don't know about the exact use cases of the other folks here, but in my specific case I have dozens of auto-generated files containing namespaced imports. Adding an entry to Creating a custom resolver might be an option, but I'm totally new to Jest, so it might be quite an overwhelming task for me. As per using |
ye the downside of About custom Jest resolver, you can check https://github.com/nrwl/nx/blob/master/packages/jest/plugins/resolver.ts In general, it's about module resolution in Jest is different from the way how webpack and Angular internal do. |
@ahnpnl I'm currently trying to implement a custom Jest resolver, but it seems like a customer resolver won't be able to fix the issue. Let's take a As far as I can see, a Jest resolver only deals with resolving |
And I'm not entirely sure, but it looks like the Looks like there has been a misunderstanding here? The issue is caused whenever a namespaced import is used, like |
It’s about module resolution happens in Jest and partially related to how ts is compiled to js with When compiling, the import namespace is converted into js which Jest will read and perform module resolution to load the necessary files. With Angular compiler, they alter AST which will modify the import namespace to the precise import file. That is not the case here when we use So, the 2 suggestions:
Ideal solution: use Angular compiler to compile all codes before running Jest. We want to go for this ofc, but will need some time to investigate how it would play well with Jest architecture. |
I'm sorry @ahnpnl but I still genuinely don't get it regarding a custom Jest resolver. Considering |
If that is the case, only modify AST is the only choice left, or using the ideal solution. The resolver solution won't work all the time, especially in the case you import a compiled js like 2 suggestions are just workarounds, won't fit for all scenarios. |
I'm trying to write an ast trasnformer that would convert |
I was finally able to create a workaround that seems to solve the issue (at least for me) and lets angular+jest unit tests with namespace imports actually run: https://www.npmjs.com/package/jest-namespace-imports-transformer I still hope that the |
I guess all the logic to desugar namespace syntax lies here https://github.com/Maximaximum/jest-namespace-imports-transformer/blob/main/src/transform-script.ts#L88 ? We are happy to add it as a custom AST transformer to internal codes |
@ahnpnl Yes, that would be great! I can't guarantee my workaround works nicely for all cases and scenarios (I'm a total newbie with regards to |
For me , when adding the transformer:
I did however, migrate to angular 13 |
@Maximaximum I just found a new workaround that you can adjust your
at least it fixed the issue with the sample repo. The problem I think is similar to #1199 is that: Angular doesn't support transpile |
@ahnpnl Any news regarding properly fixing this issue within |
This doesn't seam to work with nx repos and graphql codegen 😞 |
I am using generated code from
with
in Currently using [email protected] |
This workaround works for me, with the (possibly trivial) caveat that, if you're importing namespaced symbols from another library in your same workspace (e.g. when using Nx Workspaces), the |
any solution for this? the solutions found here did not work for me. |
Hey friends, chiming in real quick to say that the change to tsconfig.spec.json: "include": ["src/**/*.ts"] solved 1/3 of my issue. Changing my service and spec file name (yes, really) from: hyphenated-name.sandbox.spec.ts to hyphenated-name-sandbox.service.spec.ts fixed another third of my issue. After that, I started getting more specific Apollo errors, about "invariant" something this and "no provider for _Apollo" that. I solved those by including a defaultOptions object into my Apollo client setup that I use exclusively for unit tests, where before I only used the link and cache object keys. This is essentially a module (read: via static method) that sets the APOLLO_OPTIONS token with some fake values to be used in test. Finally, optionally, for anyone using Nx and MSW who may be overlooking this, make sure your library's project.json test configuration has your mockServiceWorker.js file in its assets array, and that you setup your MSW server inside of your test-setup.ts file within your library's src folder. |
🐛 Bug Report
Attempting to test components that inject a service imported from a namespace fails in Jest 27 / Angular 12.
To Reproduce
ng new my-app
private myService: Services.MyService
to the constructor of app-componentnpx jest
Expected behavior
Tests run successfully
Link to repo (highly encouraged)
https://github.com/AgentEnder/ng-jest-issue-6097
Error log:
envinfo
The text was updated successfully, but these errors were encountered: