Clarity v5 fails to run Jest tests in ESM

[MalteJoe]

Describe the bug

We are in the progress of upgrading from the apparently not supported but supported Clarity v4 (according to https://clarity.design/get-started/support/) to v5. We are using Jest with jest-preset-angular
I stumbled upon issue #5672 and have the same problem. I tried both of the suggested solutions but I am still getting errors from Clarity code when trying to run unit tests with Jest.

When trying to use the experimental support for VM Modules, I get this error:

$ yarn test-esm
yarn run v1.22.11
$ node --experimental-vm-modules node_modules/jest/bin/jest.js
(node:411404) ExperimentalWarning: VM Modules is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
 FAIL  src/app/app.component.spec.ts
  ● Test suite failed to run

    Must use import to load ES Module: <rootDir>/jest-preset-angular/examples/example-app-v12/node_modules/@cds/core/icon/index.js

      at Runtime.requireModule (node_modules/jest-runtime/build/index.js:829:21)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        5.048 s
Ran all test suites.
error Command failed with exit code 1.

I tried using the transformIgnorePatterns option with no success as well.

How to reproduce

Reproduction Repository: https://github.com/MalteJoe/jest-preset-angular
Specifically this commit: MalteJoe/jest-preset-angular@8e96c1f

• Fork off the jest-preset-angular Repo
• Use the examples/example-app-v12
• add Clarity ng add @clr/angular
• import the ClarityModule in the TestBed (in our real app we import it to mock it with ng-mocks)
• follow the steps mentioned in the Jest documentation: https://jestjs.io/docs/ecmascript-modules
• follow the steps mentioned in the jest-preset-angular documentation: https://thymikee.github.io/jest-preset-angular/docs/guides/esm-support

Steps to reproduce the behavior:

1. yarn install
2. yarn test-esm

Expected behavior

The unit tests should pass.

Versions

Clarity project:

• Clarity Core
• Clarity Angular/UI

Clarity version:

• v3.x
• v4.x
• v5.x

Framework:

• Angular
• React
• Vue
• Other:

Framework version:
Angular 12
Jest 27
Node v14.17.6

[MalteJoe]

Any update on this? We are still sitting on Clarity v4 and have a big test base we can't simply convert to Karma tests. I'm glad to help with investigating, as I currently don't see any other way forward with clarity.

[mathisscott]

Given this is v5, it may or may not be related to the issues listed in #5672

Most folks have solved this by updating/customizing their Jest config to not try to transform the Clarity Core ESM modules into Jest's custom CommonJS modules.

This is not something we will have the cycles to investigate deeply in the immediate future. So if you are willing to dig deeper, we would appreciate it.

[EndzeitBegins]

For anyone else stumbling on this issue or #5672, I just quickly want to note what worked for me.

On a brand new Angular 13 application, I've got tests running with Jest (using @angular-builders/jest) and testing a component using a component from cds/angular with the following setup.

# set up a new Angular application
npx @angular/cli@13 new

# replace Karma with Jest, following the steps from https://www.npmjs.com/package/@angular-builders/jest
npm remove karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter
rm ./karma.conf.js ./src/test.ts
npm i -D jest @types/jest @angular-builders/jest

In the ts.config.spec.json I've replaced jasmine in the types array with jest and added "emitDecoratorMetadata": true to the compilerOptions, resulting in:

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "esModuleInterop": true,
    "outDir": "./out-tsc/spec",
    "types": [
      "jest"
    ],
    "emitDecoratorMetadata": true
  },
  "files": [
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}

I had to adjust the transformIgnorePatterns inside jest.config.js to take into account for Clarity and some of its dependencies.

/** @type {import("@jest/types").Config.InitialOptions} */
module.exports = {
  transformIgnorePatterns: ["node_modules/(?!(@cds|@lit|lit|ramda|.*\\.mjs$))"],
};

Before running the tests, ensure ngcc ran once! I've added it as an postinstall step, as seen below.
With these adjustments I've got my tests to run.

I've got a "ClarityModule", which is imported both in my AppModule and the test module, looking as follows:

import { NgModule } from "@angular/core";
import { CdsModule } from "@cds/angular";

import "@cds/core/checkbox/register.js";

@NgModule({
  imports: [CdsModule],
  exports: [CdsModule],
})
export class ClarityModule {}

These are the contents of my package.json:

{
  "name": "todo-frontend",
  "version": "0.0.0",
  "scripts": {
    "postinstall": "ngcc",
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "test:cov": "ng test --coverage",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.2.0",
    "@angular/common": "~13.2.0",
    "@angular/compiler": "~13.2.0",
    "@angular/core": "~13.2.0",
    "@angular/forms": "~13.2.0",
    "@angular/platform-browser": "~13.2.0",
    "@angular/platform-browser-dynamic": "~13.2.0",
    "@angular/router": "~13.2.0",
    "@cds/angular": "^5.6.4",
    "@cds/city": "^1.1.0",
    "@cds/core": "^5.1.1",
    "modern-normalize": "^1.1.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-builders/jest": "^13.0.3",
    "@angular-devkit/build-angular": "~13.2.6",
    "@angular-eslint/builder": "13.1.0",
    "@angular-eslint/eslint-plugin": "13.1.0",
    "@angular-eslint/eslint-plugin-template": "13.1.0",
    "@angular-eslint/schematics": "13.1.0",
    "@angular-eslint/template-parser": "13.1.0",
    "@angular/cli": "~13.2.6",
    "@angular/compiler-cli": "~13.2.0",
    "@types/jasmine": "~3.10.0",
    "@types/jest": "^27.4.1",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "5.11.0",
    "@typescript-eslint/parser": "5.11.0",
    "eslint": "^8.2.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.0.0",
    "jasmine-core": "~4.0.0",
    "jest": "^27.5.1",
    "karma-coverage": "~2.1.0",
    "ng-mocks": "^13.1.1",
    "prettier": "^2.5.1",
    "prettier-eslint": "^13.0.0",
    "typescript": "~4.5.2"
  }
}

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.