From da23a8146ae1f876727715fa57c6fa51aeb3c92e Mon Sep 17 00:00:00 2001
From: Hung Viet Nguyen <nguyenviethunghl00@gmail.com>
Date: Wed, 18 May 2022 00:45:08 +0700
Subject: [PATCH] feat: add CLI to add jest.config.js

---
 cli/configCra.js                              | 38 +++++++++++++++++++
 examples/create-react-app/package.json        |  3 +-
 package.json                                  |  6 ++-
 .../index.md                                  |  2 +-
 4 files changed, 45 insertions(+), 4 deletions(-)
 create mode 100755 cli/configCra.js

diff --git a/cli/configCra.js b/cli/configCra.js
new file mode 100755
index 00000000..52d6adb4
--- /dev/null
+++ b/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
+}
diff --git a/examples/create-react-app/package.json b/examples/create-react-app/package.json
index 37e8a7ea..cc5bdcaf 100644
--- a/examples/create-react-app/package.json
+++ b/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": [
diff --git a/package.json b/package.json
index 0e916df4..f2857a32 100644
--- a/package.json
+++ b/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",
diff --git a/website/blog/2022-05-18-first-class-support-cra/index.md b/website/blog/2022-05-18-first-class-support-cra/index.md
index 4a01e299..444cda4f 100644
--- a/website/blog/2022-05-18-first-class-support-cra/index.md
+++ b/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