[Bug]: Problem with Web Components (Clarity) in Angular Unit Tests

[ngfelixl]

Version

28.1.1

Steps to reproduce

1. Clone my repository https://github.com/ngfelixl/clarity-jest-test
2. npm install
3. npm run test
4. You should see the error as described in "Actual behavior" upcoming

Expected behavior

I would expect the test to succeed.

Actual behavior

The test fails with the following output

felixlemke@Felixs-MacBook-Pro clarity-jest-test % npm run test

> clarity-jest-test@0.0.0 test
> nx test


> nx run app:test

 FAIL   app  apps/app/src/app/app.component.spec.ts
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /PATHTO/clarity-jest-test/node_modules/@cds/core/accordion/register.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import{registerElementSafely as o,ClarityMotion as r,AnimationAccordionPanelOpenName as c,AnimationAccordionPanelOpenConfig as e}from"@cds/core/internal";import{CdsAccordion as n}from"./accordion.element.js";import{CdsAccordionPanel as d}from"./accordion-panel.element.js";import{CdsAccordionContent as t}from"./accordion-content.element.js";import{CdsAccordionHeader as i}from"./accordion-header.element.js";import"@cds/core/icon/register.js";import"@cds/core/button-expand/register.js";o("cds-accordion",n),o("cds-accordion-panel",d),o("cds-accordion-content",t),o("cds-accordion-header",i),r.add(c,e);
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (../../node_modules/jest-runtime/build/index.js:1796:14)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.291 s
Ran all test suites.

 —————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 >  NX   Ran target test for project app (3s)
 
    ✖    1/1 failed
    ✔    0/1 succeeded [0 read from cache]

Additional context

Jest runs in an NX workspace with Angular and Clarity Components. It seems that the test fails due to the fact that the clarity components export JS files which get transformed by jest-preset-angular. Several solutions I found and recommendations I got said that I should add

transformIgnorePatterns: [
  'node_modules/(?!(@cds|@lit|lit|ramda|.*\\.mjs$))'
],

or

moduleNameMapper: {
  '@cds/core/icon/(.*)$': '<rootDir>/../../node_modules/@cds/core/icon/index.js',
}

to the Jest config, but at least I can not make it work. I've asked in SO, Discord and in the Clarity repository already. Hope it's ok to create this issue here and thanks in advance!

Environment

System:
  OS: macOS 12.3
  CPU: (8) arm64 Apple M1 Pro
Binaries:
  Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
  npm: 8.16.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
npmPackages:
  jest: 28.1.1 => 28.1.1

[SimenB]

You ignore pattern has .mjs ending while the path that fails is /PATHTO/clarity-jest-test/node_modules/@cds/core/accordion/register.js. You've also messed up your alternatives.

2c2
<   'node_modules/(?!(@cds|@lit|lit|ramda|.*\\.mjs$))'
---
>   'node_modules/(?!((@cds|@lit|lit|ramda).*\\.js$))'

(you probably want to just do (js|mjs) or ditch the period).

https://regex101.com/ is a great tool to test regexes 🙂

---

Please note this issue tracker is not a help forum. I know you've asked on SO already, but I think you'll have to wait for an answer there. We're just out of the holidays, so trying to ask again on discord might help 🙂

[github-actions]

Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.