feat: Make CRA use jest.config.js + add babelCRA

examples/create-react-app/jest.config.js

@@ -0,0 +1,48 @@
+module.exports = {
+  roots: ['<rootDir>/src'],
+  collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts'],
+  setupFiles: ['react-app-polyfill/jsdom'],
+  // Use `setupTests.js` if you use javascript
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+  testMatch: [
+    '<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
+    '<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}',
+  ],
+  testEnvironment: 'jsdom',
+  testRunner: 'jest-circus/runner.js',
+  transform: {
+    '^.+\\.(js|jsx|mjs|cjs|ts|tsx)$': 'jest-preview/transforms/babelCRA',
+    // Update the regex to support css and sass
+    '^.+\\.(css|scss|sass)$': 'jest-preview/transforms/css',
+    '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)':
+      'jest-preview/transforms/fileCRA',
+  },
+  transformIgnorePatterns: [
+    '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$',
+    // Remove to support CSS Modules
+    // '^.+\\.module\\.(css|sass|scss)$',
+  ],
+  modulePaths: [],
+  moduleNameMapper: {
+    '^react-native$': 'react-native-web',
+    // Remove to support CSS Modules
+    // '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
+  },
+  moduleFileExtensions: [
+    'web.js',
+    'js',
+    'web.ts',
+    'ts',
+    'web.tsx',
+    'tsx',
+    'json',
+    'web.jsx',
+    'jsx',
+    'node',
+  ],
+  watchPlugins: [
+    'jest-watch-typeahead/filename',
+    'jest-watch-typeahead/testname',
+  ],
+  resetMocks: true,
+};

examples/create-react-app/package.json

@@ -19,7 +19,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "react-scripts test -- --config=jest.config.js",
     "test:nc": "npm run test -- --no-cache",
     "eject": "react-scripts eject",
     "jest-preview": "jest-preview",
@@ -46,11 +46,5 @@
   "devDependencies": {
     "jest-preview": "file:../..",
     "npm-run-all": "^4.1.5"
-  },
-  "jest": {
-    "transform": {
-      "^.+\\.css$": "jest-preview/transforms/css",
-      "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "jest-preview/transforms/fileCRA"
-    }
   }
 }

examples/create-react-app/src/App.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { ReactComponent as Logo } from './logo.svg';
 import logo from './logo.svg';
 import logo2 from './assets/images/logo.svg';
+import styles from './style.module.css';
 
 import './App.css';
 import './assets/css/App.css';
@@ -15,6 +16,7 @@ function App() {
         <img src={logo} className="App-logo" alt="logo" />
         <img src={logo2} className="logo2" alt="logo2" />
         <p>Create React App example</p>
+        <p className={styles.textOrange}>Styled by CSS Modules</p>
         <button
           data-testid="increase"
           type="button"

examples/create-react-app/src/style.module.css

@@ -0,0 +1,3 @@
+.textOrange {
+  color: orange;
+}

rollup.config.js

@@ -22,4 +22,8 @@ export default defineConfig([
     filePath: 'src/preconfigTransform/fileCRA.ts',
     dir: 'transforms',
   }),
+  makeBundle({
+    filePath: 'src/preconfigTransform/babelCRA.ts',
+    dir: 'transforms',
+  }),
 ]);

src/preconfigTransform/babelCRA.ts

@@ -0,0 +1,31 @@
+'use strict';
+const babelJest = require('babel-jest').default || require('babel-jest');
+
+const hasJsxRuntime = (() => {
+  if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
+    return false;
+  }
+
+  try {
+    require.resolve('react/jsx-runtime');
+    return true;
+  } catch (e) {
+    return false;
+  }
+})();
+
+export default babelJest.createTransformer({
+  presets: [
+    [
+      require.resolve('babel-preset-react-app', {
+        // Find `babel-preset-react-app` in user's node_modules
+        paths: [process.cwd()],
+      }),
+      {
+        runtime: hasJsxRuntime ? 'automatic' : 'classic',
+      },
+    ],
+  ],
+  babelrc: false,
+  configFile: false,
+});