Jest transformer setup for Angular project with IBM Carbon library

Question

I'm trying to implement IBM Carbon library in angular project. The implementation is working fine.

But I want to use Jest testing platform to run unit tests. Problem is that Jest don't like the way how Carbon Icon module is written.

By browsing the web and some forums found out that a transformer in Jest configuration should be set.

I'm using jest-preset-angular library and I set it up as transform option in the jest config. But problem is that the error is still popping-up.

I need help for making it work.

Here is the repo where I put a sendbox code.

https://github.com/plachy-jozef/carbon-angular-transformer-issue

The error will be up after running npm run test:w.

Thank you very much for any poking to the right direction.

Answer 1

There is Github repository which helps you to kick start your Angular project using carbon design system: https://github.com/carbon-design-system/carbon-angular-starter/tree/master

You can find moduleNameMapper in jest.config.ts file.

moduleNameMapper: {
        /**
         * Bypass icon registration error that occurs in JEST
         *
         * In CCA, we import icons from `es` directory... which is bundled as EcmaScript Modules (esm).
         * Jest has experimental support for `esm` as of now. Hence we need to bypass this error
         * by pointing to the common js equivalent.
         *
         */
        "^@carbon/icons/es/(.*)$": "@carbon/icons/lib/$1.js",
    }