i am currently attempting to upgrade an existing Angular app which uses VMware Clarity.
I already managed to upgrade from 8.x to 10.x following the Angular update guidelines.
However beyond that the jest configuration breaks, as the newer Clarity versions and Angular 13 use esm.
So i tried to build a minimal working example to investigate the needed configurations.
Starting from the jest-preset-angular example app at https://github.com/thymikee/jest-preset-angular/tree/main/examples/example-app-v13 , i added Clarity as described in https://github.com/vmware-clarity/ng-clarity/blob/main/docs/INSTALLATION.md#installing-clarity-angular-
The example app’s
test-esm run configurations in
package.json work without problems.
But as soon as i add
ClarityModule to the
app.module.ts imports and run the
test-esmconfiguration, the test suites for
app.component.router.spec.ts fail with the same error:
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down. From src/app/app.component.spec.ts. at async Promise.all (index 0) FAIL src/app/app.component.spec.ts ● Test suite failed to run ENOENT: no such file or directory, open 'C:\Users\NAME\IdeaProjects\example-app-13_test\node_modules\@cds\core\index.jsicon\shapes\times.js' at Runtime.readFile (node_modules/jest-runtime/build/index.js:2552:21) at async Promise.all (index 3)
The error happens immediately after adding
ClarityModule to the
app.module.ts without adding any Clarity elements to the example app’s html.
To me the ENOENT part seems rather weird, as it looks like two paths for legitimate Clarity .js-files were intersected.
I tried various different combinations of adding jest.useFakeTimers, transformIgnorePatterns and other advice i found for similar problems, but these either did nothing or led to more errors. Since i am also quite inexperienced with configuring jest, I might also have used them wrong.
Could you please give me advice what might fix the above error?
The environment i am running this in is:
Angular CLI: 13.3.6 Node: 16.14.0 Package Manager: npm 8.7.0 OS: win32 x64
The versions of the Clarity packages are:
"@cds/core": "^6.0.0", "@clr/angular": "^13.3.1", "@clr/ui": "^13.3.1",
After some more debugging I found out, that Jest seems to have trouble resolving
ClarityIcons while processing
So i tried adding various mappings to parts of
@cds/core to the
jest-esm.config.mjs and finally succeeded in running the tests of the
jest-preset-angular example app without errors. After eliminating the paths one by one it seems that adding the following mapping is sufficient for the tests to work:
Answered By – MObermeier
Answer Checked By – Katrina (AngularFixing Volunteer)