Introduce common preset for Jest test configuration

.commitlintrc.js

@@ -24,6 +24,8 @@ module.exports = {
         'exporter-js',
         'exporter-scss',
         'exporter-svg',
+        // Use when committing changes/additions/removals to exact config
+        'jest-config',
         // Use when affecting CI process
         'ci',
         // Use for anything that does not directly affect packages, ie. updating repo-wide

configs/jest-config-spirit/README.md

@@ -0,0 +1,49 @@
+# jest-config-spirit
+
+> Jest configuration and preset for Spirit Design System
+
+## Getting started
+
+This preset is part of this monorepo only and thus it is accessible for every package.
+
+To install `jest-config-spirit` in your project, you will need to run the following command using [Yarn][yarn]:
+
+```bash
+yarn add jest-config-spirit
+```
+
+## ⚙️ Configurations
+
+### `jest-preset-spirit/node`
+
+The default Jest configuration for Node.js projects.
+
+### `jest-preset-spirit/jsdom`
+
+The extension of the default preset for projects that require a browser-like (DOM) environment.
+
+## 🚀 Usage
+
+```js
+// jest.config.js
+
+const config = {
+  preset: 'jest-config-spirit/jsdom',
+};
+
+export default config;
+```
+
+## 🙌 Contributing
+
+We're always looking for contributors to help us fix bugs, build new features,
+or help us improve the project documentation. If you're interested, definitely
+check out our [Contributing Guide][contributing]! 👀
+
+## 📝 License
+
+Licensed under the [MIT][license].
+
+[yarn]: https://yarnpkg.com/en/
+[contributing]: /CONTRIBUTING.md
+[license]: /LICENSE.md

configs/jest-config-spirit/jest-preset.js

@@ -0,0 +1,4 @@
+// eslint-disable-next-line import/extensions
+import { config } from './node/index.js';
+
+export default config;

configs/jest-config-spirit/jsdom/index.js

@@ -0,0 +1,26 @@
+import { dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
+// eslint-disable-next-line import/extensions
+import { config as nodeConfig } from '../node/index.js';
+
+// eslint-disable-next-line no-underscore-dangle
+const __filename = fileURLToPath(import.meta.url);
+// eslint-disable-next-line no-underscore-dangle
+const __dirname = dirname(__filename);
+
+export const config = {
+  ...nodeConfig,
+
+  // The test environment that will be used for testing.
+  // https://jestjs.io/docs/configuration#testenvironment-string
+  testEnvironment: 'jsdom',
+
+  // A list of paths to modules that run some code to configure or set up the testing framework before each test file in the suite is executed.
+  // https://jestjs.io/docs/configuration#setupfilesafterenv-array
+  setupFilesAfterEnv: [resolve(__dirname, './setup/setupAfterEnv.js')],
+
+  // This line is because of polyfill for useResizeHook
+  // An array of regexp pattern strings that are matched against all source file paths before transformation.
+  // https://jestjs.io/docs/configuration#transformignorepatterns-arraystring
+  transformIgnorePatterns: ['<rootDir>/../../node_modules/@juggle/resize-observer'],
+};

configs/jest-config-spirit/jsdom/jest-preset.js

@@ -0,0 +1,4 @@
+// eslint-disable-next-line import/extensions
+import { config } from './index.js';
+
+export default config;

configs/jest-config-spirit/jsdom/setup/setupAfterEnv.js

@@ -0,0 +1,20 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import '@testing-library/jest-dom';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import ResizeObserverPolyfill from 'resize-observer-polyfill';
+
+/**
+ * Maybe we can just mock the ResizeObserver
+ *
+ * @see { link https://github.com/carbon-design-system/carbon/blob/main/config/jest-config-carbon/setup/setup.js#L38-L46 }
+ */
+global.ResizeObserver = ResizeObserverPolyfill;
+
+/**
+ * @todo Place here the content of the `packages/web-react/config/jest/setupTestingLibrary.ts`
+ * @see { @link https://github.com/lmc-eu/spirit-design-system/issues/1413 }
+ *
+ * Here should be the setup of the general mocks like one for console.log, etc.
+ * Also consider better patching of the Console.
+ * @see { @link https://github.com/carbon-design-system/carbon/blob/main/config/jest-config-carbon/setup/setupAfterEnv.js }
+ */

packages/common/config/jest/config.ts → configs/jest-config-spirit/node/index.js

@@ -1,7 +1,9 @@
-const config = {
+import { resolve } from 'path';
+
+export const config = {
   // The root directory that Jest should scan for tests and modules within.
   // https://jestjs.io/docs/configuration#rootdir-string
-  rootDir: '../../',
+  rootDir: resolve('./'),
 
   // This option tells Jest that all imported modules in your tests should be mocked automatically.
   // https://jestjs.io/docs/configuration#automock-boolean
@@ -14,12 +16,13 @@ const config = {
   // A map from regular expressions to paths to transformers
   // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
   transform: {
-    '^.+\\.(t|j)sx?$': ['<rootDir>/../../node_modules/@swc/jest'],
+    '^.+\\.(t|j)sx?$': [resolve('./../../node_modules/@swc/jest')],
   },
 
-  // The test environment that will be used for testing.
-  // https://jestjs.io/docs/configuration#testenvironment-string
-  testEnvironment: 'jsdom',
+  // This line is because of polyfill for useResizeHook
+  // An array of regexp pattern strings that are matched against all source file paths before transformation.
+  // https://jestjs.io/docs/configuration#transformignorepatterns-arraystring
+  transformIgnorePatterns: ['<rootDir>/../../node_modules/zx'],
 
   // An array of regexp pattern strings that are matched against all test paths before executing the test
   // https://jestjs.io/docs/configuration#testpathignorepatterns-arraystring
@@ -35,15 +38,13 @@ const config = {
 
   // An array of regexp pattern strings that are matched against all file paths before executing the test.
   // https://jestjs.io/docs/configuration#coveragepathignorepatterns-arraystring
-  coveragePathIgnorePatterns: ['__fixtures__', '.*.stories.*', '/stories/.*', '/demo/.*'],
+  coveragePathIgnorePatterns: ['__fixtures__', '.*.stories.*', '/stories/.*', '/demo/.*', 'bin'],
 
   // A list of reporter names that Jest uses when writing coverage reports. Any istanbul reporter can be used.
   // https://jestjs.io/docs/configuration#coveragereporters-arraystring--string-options
-  coverageReporters: ['text', 'text-summary', ['lcov', { projectRoot: '../../' }]],
+  coverageReporters: ['text', 'text-summary', ['lcov', { projectRoot: '<rootDir>/../../' }]],
 
   // An array of regexp pattern strings that are matched against all module paths before those paths are 'visible' to the loader.
   // https://jestjs.io/docs/configuration#modulepathignorepatterns-arraystring
   modulePathIgnorePatterns: ['<rootDir>/dist'],
 };
-
-module.exports = config;

configs/jest-config-spirit/node/jest-preset.js

@@ -0,0 +1,4 @@
+// eslint-disable-next-line import/extensions
+import { config } from './index.js';
+
+export default config;

configs/jest-config-spirit/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "jest-config-spirit",
+  "private": true,
+  "description": "Jest configuration and preset for Spirit Design System",
+  "version": "0.0.0",
+  "license": "MIT",
+  "keywords": [
+    "lmc-eu",
+    "spirit",
+    "spirit-design-system",
+    "config",
+    "jest",
+    "preset"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lmc-eu/spirit-design-system.git",
+    "directory": "configs/jest-config-spirit"
+  },
+  "type": "module",
+  "module": "./index.js",
+  "dependencies": {
+    "@swc/core": "1.5.0",
+    "@swc/jest": "0.2.36",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@types/jest": "29.5.12",
+    "jest": "29.7.0",
+    "jest-cli": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "jest-environment-node-single-context": "29.4.0",
+    "resize-observer-polyfill": "^1.5.1"
+  }
+}

package.json

@@ -13,6 +13,7 @@
     "node": ">=16"
   },
   "workspaces": [
+    "configs/*",
     "packages/*",
     "exporters/*",
     "apps/demo",

packages/analytics/jest.config.ts

@@ -0,0 +1,5 @@
+const config = {
+  preset: 'jest-config-spirit',
+};
+
+export default config;

packages/analytics/package.json

@@ -41,7 +41,7 @@
     "lint": "eslint ./",
     "lint:fix": "yarn lint --fix",
     "test": "npm-run-all --serial lint test:unit:coverage types",
-    "test:unit": "jest --config ./config/jest.config.js",
+    "test:unit": "jest",
     "test:unit:watch": "yarn test:unit --watchAll",
     "test:unit:coverage": "yarn test:unit --coverage"
   },

packages/codemods/jest.config.ts

@@ -0,0 +1,5 @@
+const config = {
+  preset: 'jest-config-spirit',
+};
+
+export default config;

packages/codemods/package.json

@@ -39,7 +39,7 @@
     "lint": "eslint ./",
     "lint:fix": "yarn lint --fix",
     "test": "npm-run-all --serial lint test:unit:coverage types",
-    "test:unit": "jest --passWithNoTests --config ./config/jest.config.js",
+    "test:unit": "jest --passWithNoTests",
     "test:unit:watch": "yarn test:unit --watchAll",
     "test:unit:coverage": "yarn test:unit --coverage"
   },

packages/common/jest.config.ts

@@ -0,0 +1,5 @@
+const config = {
+  preset: 'jest-config-spirit',
+};
+
+export default config;

packages/common/package.json

@@ -19,7 +19,7 @@
     "lint": "eslint ./",
     "lint:fix": "yarn lint --fix",
     "test": "npm-run-all --serial lint types test:unit:coverage",
-    "test:unit": "jest --config ./config/jest/config.ts",
+    "test:unit": "jest",
     "test:unit:watch": "yarn test:unit --watchAll",
     "test:unit:coverage": "yarn test:unit --coverage",
     "types": "tsc"