feat: add CLI to add jest.config.js

cli/configCra.js

@@ -0,0 +1,38 @@
+#!/usr/bin/env node
+// TODO: To revamp the CLI name (currently: config-cra. A proposal: `jest-preview config-cra`)
+const path = require('path');
+const fs = require('fs');
+// Append current node_modules to the module search path, so require('react-scripts') can work.
+module.paths.push(path.resolve(process.cwd(), './node_modules'));
+
+const createJestConfig = require('react-scripts/scripts/utils/createJestConfig.js');
+const jestConfig = createJestConfig(
+  (filePath) => path.posix.join('<rootDir>', filePath),
+  null,
+  true,
+);
+jestConfig.transform = {
+  '^.+\\.(js|jsx|mjs|cjs|ts|tsx)$':
+    'react-scripts/config/jest/babelTransform.js',
+  '^.+\\.(css|scss|sass)$': 'jest-preview/transforms/css',
+  '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)':
+    'jest-preview/transforms/fileCRA',
+};
+jestConfig.transformIgnorePatterns = jestConfig.transformIgnorePatterns.filter(
+  (pattern) => pattern !== '^.+\\.module\\.(css|sass|scss)$',
+);
+delete jestConfig.moduleNameMapper['^.+\\.module\\.(css|sass|scss)$'];
+const jestConfigFileContent = `module.exports = ${JSON.stringify(
+  jestConfig,
+  null,
+  2,
+)}\n`;
+fs.writeFileSync('jest.config.js', jestConfigFileContent);
+
+// Try to prettier `jest.config.js`
+const execSync = require('child_process').execSync;
+try {
+  execSync('prettier jest.config.js --write');
+} catch (error) {
+  // Just ignore if user doesn't have prettier installed
+}

examples/create-react-app/package.json

@@ -23,7 +23,8 @@
     "test:nc": "npm run test -- --no-cache",
     "eject": "react-scripts eject",
     "jest-preview": "jest-preview",
-    "test:debug": "npm-run-all -p test jest-preview"
+    "test:debug": "npm-run-all -p test jest-preview",
+    "config-cra": "config-cra"
   },
   "eslintConfig": {
     "extends": [

package.json

@@ -19,12 +19,14 @@
   "author": "nvh95",
   "main": "dist/index.js",
   "bin": {
-    "jest-preview": "./server/previewServer.js"
+    "jest-preview": "./server/previewServer.js",
+    "config-cra": "./cli/configCra.js"
   },
   "files": [
     "dist",
     "server",
-    "transforms"
+    "transforms",
+    "cli"
   ],
   "scripts": {
     "docs": "cd website && npm run start -- --port 3001",

website/blog/2022-05-18-first-class-support-cra/index.md

@@ -11,7 +11,7 @@ CRA is well known for bootstrapping a React App. It hides the complexity of bund
 
 Option 1: Use codemod:
 
-- Run this CLI `jest-preview config-cra-test`
+- Run this CLI `jest-preview config-cra`
 
 Option 2: Configure manually