Migration Guide from Clarity 4 to 5 for testing with jest

[aavelyn]

I recently attempted to update our app from clarity 4 to 5 and encountered the issue that jest doesn't recognize ESM. A previous submitted issue has been closed here on github #5672 but the answer wasn't detailed enough for me to fix it.

Did anyone solve it already?

I've tried using the transformIgnorePatterns in the jest.config but it didn't work

module.exports = {
	name: 'web-app',
	preset: '../../jest.config.js',
	coverageDirectory: '../../documentation/coverage/web-app',
	snapshotSerializers: [
		'jest-preset-angular/build/serializers/no-ng-attributes',
		'jest-preset-angular/build/serializers/ng-snapshot',
		'jest-preset-angular/build/serializers/html-comment',
	],
	coverageReporters: ['html'],
	transformIgnorePatterns: ['node_modules/(?!@cds)'],
	testEnvironment: 'jsdom',
};

And I've also tried the jest-preset-angular/presets/default-esm

I'm using the @nrwl/jest packages in angular.json

"test": {
	"builder": "@nrwl/jest:jest",
	"options": {
		"jestConfig": "apps/web-app/jest.config.js",
		"tsConfig": "apps/web-app/tsconfig.spec.json",
		"passWithNoTests": true,
		"setupFile": "apps/web-app/src/test-setup.ts",
		"stylePreprocessorOptions": {
			"includePaths": ["node_modules/sass-mediaqueries"]
		},
		"assets": ["apps/web-app/src/favicon.ico", "apps/web-app/src/assets"],
		"styles": [
			"node_modules/@clr/icons/clr-icons.min.css",
			"node_modules/@clr/ui/clr-ui-dark.min.css",
			"apps/web-app/src/styles.scss"
		],
		"scripts": [
			"node_modules/@webcomponents/custom-elements/custom-elements.min.js",
			"node_modules/@clr/icons/clr-icons.min.js"
		]
	}
},

[bbogdanov]

Hi @aavelyn,

I would advice you to take a look at https://github.com/vmware/clarity/blob/next/packages/react/jest.config.js

I believe your transformIgnorePatterns array value covers only small part of what should be ignored because of ESM usage.