Closed ngfelixl closed 1 year ago
Hi @ngfelixl,
Take a look at the discussion and the solution here -> https://github.com/vmware/clarity/issues/6310
Let us know if the solution didn't work and what happened so we can investigate it.
Hi @bbogdanov,
thanks for the suggestion. However when I change the transformIgnorePatterns
in the example repository in /apps/app/jest.config.ts to
transformIgnorePatterns: [
'node_modules/(?!(@cds|@lit|lit|ramda|.*\\.mjs$))'
],
I receive a different output. But still not working. When I run the testing command it says:
> npx nx run-many --target=test --all --skip-nx-cache
✖ nx run app:test
FAIL app apps/app/src/app/app.component.spec.ts
● Test suite failed to run
ENOENT: no such file or directory, open 'PATHTO/clarity-jest-test/node_modules/@cds/core/index.jsicon/shapes/angle.js'
at Runtime.readFile (../../node_modules/jest-runtime/build/index.js:2574:21)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 0.965 s
Ran all test suites.
NX sets up the repository with the Jest types as suggested in the linked thread. I've found several threads for this issue so far and all say that it's related to the transformIgnorePatterns
, however none solved it for Clarity+Angular+NX+Jest for me so far.
Happy new year everyone! Unfortunately, I could not find any solutions. @bbogdanov do you have any additional ideas? Thank you!
I met the same issue.
@ngfelixl I think I found a solution. You can take a look at https://github.com/wghglory/nx-vmware/blob/main/apps/seed/jest.config.ts. The key thing is to map @cds/core/icon
. Please let me know.
moduleNameMapper: {
'@cds/core/icon/(.*)$': '<rootDir>/../../node_modules/@cds/core/icon/index.js',
}
Hey @wghglory thank you! Unfortunately, the repository seems to be private. Only with the moduleNameMapper
in the jest.config.ts it does not work. What did you do with the transformIgnorePatterns
?
@ngfelixl I just changed it to public. Yes, only moduleNameMapper
won't work. The transformIgnorePatterns
code is below:
transformIgnorePatterns: ['node_modules/(?!(@cds|@lit|lit|ramda|.*\\.mjs$))'],
My workspace doesn't install @cds/angular
, but since @clr/angular
now also uses @cds/core/icon
, I feel the solution is similar.
Heyhey,
the solution works with Jest 28. In the demo repository we've used Jest 28, however in our real repo we've used Jest 27. So the combination of
transformIgnorePatterns: ['node_modules/(?!(@cds|@lit|lit|ramda|.*\\.mjs$))']
moduleNameMapper: { '@cds/core/icon/(.*)$': '<rootDir>/../../node_modules/@cds/core/icon/index.js' }
works. Still one remark: The transformIgnorePattern might be wrong as the "or" includes any mjs files (see |.*
).
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.
Describe the bug
When working with Angular in an NX workspace and writing unit tests with Jest I can not import Clarity components without braking the tests.
How to reproduce
I am using an NX workspace with Angular preset and install @cds packages.
Then, if a clarity component is part of a Jest unit test, for example:
It is throwing:
Here is a demo repository https://github.com/ngfelixl/clarity-jest-test
Expected behavior
I would expect that the components can be used and imported in Jest unit tests.
Versions
Clarity project:
Clarity version:
Framework:
Framework version:
Device: