build: switch from next/jest.js to standalone Jest config

packages/components-react/jest.config.ts

@@ -0,0 +1,27 @@
+import type { Config } from 'jest';
+
+const config: Config = {
+  coverageDirectory: '../coverage/',
+  coverageProvider: 'v8',
+  extensionsToTreatAsEsm: ['.ts', '.tsx'],
+  moduleDirectories: ['node_modules', '<rootDir>/'],
+  moduleNameMapper: {
+    '^@utrecht/(.*)$': '<rootDir>/../../components-react/$1/src/',
+  },
+  rootDir: './src/',
+  setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
+  testEnvironment: 'jest-environment-jsdom',
+  testPathIgnorePatterns: ['/dist/'],
+  transform: {
+    '^.+\\.(ts|tsx)?$': [
+      'ts-jest',
+      {
+        useESM: true,
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules'],
+  verbose: true,
+};
+
+export default config;

packages/components-react/package.json

@@ -21,10 +21,10 @@
     "prebuild": "npm run clean",
     "build": "npm-run-all build:**",
     "build:components": "vite build",
-    "clean": "rimraf dist/ pages/",
+    "clean": "rimraf dist/",
     "lint": "tsc --project ./tsconfig.json --noEmit && tsc --noEmit --project ./tsconfig.test.json",
-    "test": "mkdir -p pages && NODE_OPTIONS=--experimental-vm-modules jest --verbose",
-    "watch:test": "NODE_OPTIONS=--experimental-vm-modules jest --verbose --watch"
+    "test": "jest --verbose",
+    "watch:test": "jest --verbose --watch"
   },
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -45,22 +45,19 @@
     "@babel/preset-typescript": "7.26.0",
     "@babel/runtime": "7.26.0",
     "@gemeente-rotterdam/components-css": "workspace:*",
+    "@jest/globals": "29.7.0",
     "@rollup/plugin-babel": "6.0.4",
     "@rollup/plugin-commonjs": "28.0.2",
     "@rollup/plugin-node-resolve": "16.0.0",
-    "@jest/globals": "29.7.0",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.1.0",
-    "@testing-library/user-event": "14.5.2",
     "@types/jest": "29.5.14",
     "@types/lodash.chunk": "4.2.9",
     "@types/react": "18.3.18",
-    "@types/testing-library__jest-dom": "6.0.0",
     "@vitejs/plugin-react": "4.3.4",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "next": "15.1.3",
     "npm-run-all": "4.1.5",
     "react": "18.3.1",
     "react-dom": "18.3.1",
@@ -73,6 +70,8 @@
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-typescript2": "0.36.0",
     "sass": "1.83.0",
+    "ts-jest": "29.2.5",
+    "ts-node": "10.9.2",
     "tslib": "2.8.1",
     "typescript": "5.7.2",
     "vite": "6.0.6",

packages/components-react/src/Button.test.tsx

@@ -2,7 +2,6 @@ import { describe, expect, it } from '@jest/globals';
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
 import { Button } from './Button';
-import '@testing-library/jest-dom';
 
 describe('Button', () => {
   it('renders a button role element', () => {

packages/components-react/src/Button.tsx

@@ -1,6 +1,5 @@
 import clsx from 'clsx';
 import { ButtonHTMLAttributes, ForwardedRef, forwardRef, PropsWithChildren } from 'react';
-import '@gemeente-rotterdam/components-css/button/index.scss';
 
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
 

packages/components-react/src/css-module/Button.ts

@@ -0,0 +1,3 @@
+import '@gemeente-rotterdam/components-css/button/index.scss';
+
+export * from '../Button';

packages/components-react/src/css-module/index.ts

@@ -0,0 +1 @@
+export * from './Button';

packages/components-react/src/jest-setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/jest-globals';

packages/components-react/tsconfig.test.json

@@ -3,11 +3,6 @@
   "compilerOptions": {
     "noEmit": true
   },
-  "include": [
-    "next-env.d.ts",
-    "src/**/*.test.ts",
-    "src/**/*.test.tsx",
-    "../../node_modules/.pnpm/@[email protected]/node_modules/@types/jest/index.d.ts"
-  ],
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["**/node_modules/*"]
 }

packages/components-react/vite.config.ts

@@ -8,7 +8,7 @@ export default defineConfig({
     lib: {
       name: 'Components React',
       // Could also be a dictionary or array of multiple entry points
-      entry: resolve(__dirname, 'src/index.ts'),
+      entry: resolve(__dirname, 'src/css-module/index.ts'),
       // the proper extensions will be added
       fileName: 'components-react',
     },