-
Notifications
You must be signed in to change notification settings - Fork 309
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
jest tests keep failing after upgrade to angular 13 and following the migration guide #1413
Comments
Would you pls make a small reproducible example? You can also use https://github.com/thymikee/jest-preset-angular/tree/main/examples/example-app-v13 to make a reproduce problem which will help a lot to debug. |
@ahnpnl I have just cloned the angular 13 example app you proposed to use for a reproducable and when I try to run the tests with npm run test-esm all the tests are failing with the same error as i am experiencing in my angular 13 application. I didn' t changed anything. Just cloned and npm install and the run the tests. Kind regards, Gerry |
hmm that's strange, in GitHub action there aren't any issues. My laptop doesn't have issues either. It seems like something odd with Jest and ESM. I forgot one thing that in |
@ahnpnl ok now the tests are running in the angular 13 example app. I changed my jest version to 27.5.1 as it was in the angular 13 example app but now i am getting a different error for all my unit tests => Test suite failed to run The @googlemaps/markerclusterer package is used in an angular ui component library published via npm which was custom made by us and is installed in our angular 13 application. The ui component library itself is created within a nx repo using also angular 13 and jest for testing. Running the tests in this library from within the nx repo does not give any errors. |
I think this is the problem with |
Ok no idea how to solve that :-) we are just importing it like this => import { MarkerClusterer } from '@googlemaps/markerclusterer'; inside an angular component. There are also no issues while running or building the angular application. And the page containing the component which uses the markerclusterer also works without any issues. It's only my tests that are failing. Also what i find strange is that it is giving this same error for all my tests also all the components which are not using the angular component with the markerclusterer. |
I also found a similar issue => https://stackoverflow.com/questions/70985255/jest-es6-modules-does-not-provide-export-named |
You can try jest 28 now locally with the |
Cloned the latest version of the angular 13 example app. Ran npm install. After that try to run the tests with npm run test-esm but getting this error now => Error: Cannot find module 'ts-jest/dist/ts-jest-transformer'
|
I just updated |
Thank you error is gone. Unit tests example app are working but my unit tests in my angular app are still giving the same error => SyntaxError: The requested module '@googlemaps/markerclusterer' does not provide an export named 'MarkerClusterer' |
I think you might need to use I will try to debug to see more |
Okay thank you for the feedback. This goes a little bit above my knowledge but I will have a look :-) It's just a pity that I have to disable all my tests in all our angular 13 projects which are using our custom ui component library that implemented the @googlemaps/markerclusterer because otherwise the testing step in our build pipelines will fail :-( |
If someone found a workaround, or some solution how to change config files - please post it here. It's not a request to contributors, I'm posting it here because this page is a first in Google when searching for "angular jest 28" :) |
Would you guys pls provide a test case to how to use that library to the example app? That would help a lot. |
@innoveltec I've debugged and checked, the package
Jest will throw error. You have to use default import
I hope this helps. |
Hello guys ! I have the same problem than @innoveltec 's first post. Does someone found a solution ? Thanks. |
You should use |
@ahnpnl it is not @google/markerclusterer which we use but @googlemaps/markerclusterer which is having named exports. https://developers.google.com/maps/documentation/javascript/marker-clustering#maps_marker_clustering-typescript |
OK I found the problem. This is how it happens in several scenarios under ESM Jest mode when doing With default resolution from Jest default resolverJest will resolve In this scenario, because
With adjustment in Jest configTo tell Jest to load the ESM file of
By using Now our config is good to use the package
WorkaroundUsing default export works for me without the need of adjusting Jest config. This is the minimum Jest config
and then in the code I use default export
If you still want to use name exports, |
Hello @ahnpnl thank you for all your work and help. But there are some things that are not clear to me. So basically the 'With adjustment in Jest config' and the 'Workaround' are both 2 solutions which I can try to fix my issue? For the 'With adjustment in Jest config' solution, these changes need to be done in the jest.config.js file or should they be done in the jest-esm.config.mjs file? If the changes need to be made in the jest.config.js file which is used when running jest without esm modules then do you mean that I should be able to run my tests in my angular 13 application which uses our custom library that is using the @googlemaps/markerclusterer package without using the esm feature but just the standard jest. Also for this solution which version of jest, ts-jest and jest-preset-angular do I need to use? For the 'Workaround' solution, I suppose the minimum jest config you are talking about is the config from the jest-esm.config.mjs file? This solution will run jest in esm mode so for this solution i can just use jest v28.0.3, jest-preset-angular v12.0.0-next.1 and ts-jest is not needed. Am I correct on this? Still if I try to do something like import foo from '@googlemaps/markerclusterer' in the custom angular library which is using the markerclusterer, I am getting the error that it has no default export. Kind regards, Gerry |
Sorry it wasn’t so clear. The workaround is the solution to go. The other 2 headings were the different debugging approaches but they turned out to be not working. With the workaround, I only tested with For the case of using in an Angular library, I think your Angular library should have similar Jest config. I haven’t tried out yet but in theory it should work the same. Did you try using Another workaround (not tested)Use
Way to go forwardWe still need to do a proper fix for this by not using |
Hello @ahnpnl , Thank you for the feedback. I will try to do the workaround. The angular library which is using the markerclusterer package is in a nrwl nx repo and nx is managing the jest config by themself I think. I see they are using jest v27.2.3, ts-jest v27.0.5 and jest-preset-angular v11.1.1 It's also weird that running the tests of my library in the nx repo is not giving any errors on the markerclusterer and are all succeeding but nx probably does some custom stuff behind the scenes. No idea :-) Any ways I will try your workarounds and keep you posted on the results. Thanks, Gerry |
Hello @ahnpnl, "dependencies": { |
If i use import default in
Build Angular only accepts either name import or import star. I think for now, you should run your tests without ESM mode. I can see that |
…1455) Fixes #1413 Fixes #1437 BREAKING CHANGE Previously, we always checked file extension `.mjs` and any files from `node_modules` excluding `tslib` to be processed with `esbuild`. With the new option `processWithEsbuild`, now we put default all `.mjs` files to be processed by `esbuild`. Files like `lodash-es` default isn't processed by `esbuild`. If you wish to use `esbuild` to process such files, please configure in your Jest config like ``` // jest.config.js module.exports = { //... globals: { ngJest: { processWithEsbuild: ['**/node_modules/lodash-es/*.js], } } } ```
To fix this issue, I had to:
Thanks a lot to all the contributors ;) |
This fixed it for me as well! |
This worked for me as well! Thank you very much |
Version
11.1.1
Steps to reproduce
Hello,
Upgraded an existing angular application from v12.2.0 to 13.2.7. After the angular upgrade tests were failing so i followed the Migration steps from Angular < 13 guide and made the changes according the angular 13 example app. Using jest 28.0.0-alpha.8. When running 'node --experimental-vm-modules --no-warnings node_modules/jest/bin/jest.js -c=jest-esm.config.mjs --no-cache' all my tests keep failing with the same following error =>
Test suite failed to run
TypeError: Cannot read properties of undefined (reading 'html')
at new JSDOMEnvironment (node_modules/jest-environment-jsdom/build/index.js:72:44)
Kind regards,
Gerry
Expected behavior
Running my tests should not give any errors after the upgrade to angular 13.
Actual behavior
All my tests are failing after upgrading from angular 12 to 13. Even after making the changes like it has be done in the angular 13 example app.
Additional context
No response
Environment
The text was updated successfully, but these errors were encountered: