Using Jest with Angular 13 + Clarity

Question

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 and 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.spec.ts and 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",

Answer 1

After some more debugging I found out, that Jest seems to have trouble resolving ClarityIcons while processing node_modules\@cds\core\internal-components\close-button\register.js.

So i tried adding various mappings to parts of @cds/core to the moduleNameMapper in 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:

"@cds/core/icon": '<rootDir>/node_modules/@cds/core/icon/index.js'

Answer 2

As it's failing your test and Angular with version 13 has by default ModuleTeardown options enabled, I assume then disabling the teardown option in your test.ts could help.

getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting(),
  { teardown: { destroyAfterEach: false } },
);