Configure Babel with Browserslist

Author: colinrotherham

.browserslistrc

@@ -0,0 +1,5 @@
+[javascripts]
+supports es6-module
+
+[node]
+node 22

babel.config.js

@@ -0,0 +1,43 @@
+const { NODE_ENV } = process.env;
+
+/**
+ * Babel config
+ *
+ * @type {TransformOptions}
+ */
+module.exports = {
+  browserslistEnv: 'javascripts',
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        // Apply bug fixes to avoid transforms
+        bugfixes: true,
+
+        // Apply smaller "loose" transforms for browsers
+        loose: true,
+
+        // Apply ES module transforms for Jest
+        // https://jestjs.io/docs/ecmascript-modules
+        modules: NODE_ENV === 'test' ? 'auto' : false,
+      },
+    ],
+    [
+      '@babel/preset-react',
+      {
+        development: NODE_ENV === 'development',
+        useBuiltIns: true,
+      },
+    ],
+    '@babel/preset-typescript',
+  ],
+  env: {
+    test: {
+      browserslistEnv: 'node',
+    },
+  },
+};
+
+/**
+ * @import { TransformOptions } from '@babel/core'
+ */

jest.config.js

@@ -1,24 +1,18 @@
-const { pathsToModuleNameMapper } = require('ts-jest');
-const { compilerOptions } = require('./tsconfig.base.json');
-
-const jestConfig = {
-  testEnvironment: 'jsdom',
-  rootDir: './',
+/**
+ * Jest config
+ *
+ * @type {Config}
+ */
+module.exports = {
+  collectCoverageFrom: ['<rootDir>/src/**/*.{js,mjs,ts,tsx}'],
+  extensionsToTreatAsEsm: ['.jsx', '.ts', '.tsx'],
   setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
-  collectCoverageFrom: ['<rootDir>/src/**/*.{ts,tsx}'],
-  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, {
-    prefix: '<rootDir>',
-  }),
+  testEnvironment: 'jsdom',
   transform: {
-    '^.+\\.(t|j)sx?$': [
-      'ts-jest',
-      {
-        babelConfig: {
-          plugins: ['@babel/plugin-transform-modules-commonjs'],
-        },
-      },
-    ],
+    '^.+\\.(js|mjs|ts|tsx)$': ['babel-jest', { rootMode: 'upward' }],
   },
 };
 
-module.exports = jestConfig;
+/**
+ * @import { Config } from 'jest'
+ */

package.json

@@ -28,7 +28,7 @@
   "types": "dist/esm/index.d.ts",
   "scripts": {
     "cleanup": "rm -rf dist/ > /dev/null && rm -rf lib/ > /dev/null",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "NODE_ENV=development storybook dev -p 6006",
     "build": "yarn cleanup && rollup -c",
     "test": "jest",
     "test:watch": "jest --watch",
@@ -41,8 +41,10 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.24.1",
-    "@babel/plugin-transform-modules-commonjs": "^7.23.3",
+    "@babel/core": "^7.28.4",
+    "@babel/preset-env": "^7.28.3",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "^12.1.4",
@@ -88,7 +90,6 @@
     "rollup": "^4.52.4",
     "sass": "^1.53.0",
     "storybook": "^8.0.5",
-    "ts-jest": "^29.1.2",
     "typescript": "5.3.3",
     "vite": "^4.5.3",
     "vite-tsconfig-paths": "^4.3.2"

src/__tests__/index.test.ts

@@ -5,6 +5,7 @@ describe('Index', () => {
     const sortedIndex = Object.keys(index).sort((a, b) => a.localeCompare(b));
 
     expect(sortedIndex).toEqual([
+      '__esModule', // Synthetic default export
       'ActionLink',
       'ArrowLeftIcon',
       'ArrowRightCircleIcon',

src/components/content-presentation/icons/__tests__/Icons.test.tsx

@@ -4,7 +4,9 @@ import * as Icons from '../';
 
 describe('Icons', () => {
   it('all icons match snapshots', () => {
-    for (const [name, Icon] of Object.entries(Icons)) {
+    for (const [name, Icon] of Object.entries(Icons).filter(
+      ([, Icon]) => Icon instanceof Function,
+    )) {
       const { container } = render(<Icon />);
       expect(container).toMatchSnapshot(name);
     }