port replace-react-test-rendered-import

Author: mohab-sameh

codemods/replace-react-test-renderer-import/README.md

@@ -0,0 +1,32 @@
+# replace-react-test-renderer-import
+
+Replace `react-test-renderer/shallow` module specifiers with `react-shallow-renderer`.
+
+This codemod mirrors `react/19/replace-react-test-renderer-import` from `codemod/commons`.
+
+## Usage
+
+```bash
+npx codemod @react-new/replace-react-test-renderer-import --target <path>
+```
+
+## Example
+
+### Before
+
+```tsx
+import ShallowRenderer from "react-test-renderer/shallow";
+```
+
+### After
+
+```tsx
+import ShallowRenderer from "react-shallow-renderer";
+```
+
+## Behavior
+
+- Rewrites ESM import declarations.
+- Rewrites direct CommonJS `require("react-test-renderer/shallow")` calls.
+- Also rewrites export-from declarations and dynamic `import(...)` calls that reference the same module specifier.
+- Does not rewrite arbitrary string literals or `require.resolve(...)` calls.

codemods/replace-react-test-renderer-import/codemod.yaml

@@ -0,0 +1,20 @@
+schema_version: "1.0"
+
+name: "@react-new/replace-react-test-renderer-import"
+version: "0.1.1"
+description: "Replace react-test-renderer shallow renderer imports with react-shallow-renderer"
+author: "Codemod <hello@codemod.com>"
+license: "MIT"
+workflow: "workflow.yaml"
+repository: "https://github.com/codemod/jssg-react-codemods/tree/main/codemods/replace-react-test-renderer-import"
+
+targets:
+  languages: ["tsx"]
+
+keywords: ["React", "react-test-renderer", "shallow", "migration"]
+
+registry:
+  access: "public"
+  visibility: "private"
+
+capabilities: []

codemods/replace-react-test-renderer-import/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@react-new/replace-react-test-renderer-import",
+  "version": "0.1.1",
+  "description": "Replace react-test-renderer shallow renderer imports with react-shallow-renderer",
+  "type": "module",
+  "scripts": {
+    "test": "pnpm dlx codemod@latest jssg test -l tsx ./scripts/codemod.ts",
+    "check-types": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@codemod.com/jssg-types": "latest",
+    "@types/node": "latest",
+    "typescript": "latest"
+  }
+}

codemods/replace-react-test-renderer-import/scripts/codemod.ts

@@ -0,0 +1,134 @@
+import type { Edit, SgNode, Transform } from "codemod:ast-grep";
+import type TSX from "codemod:ast-grep/langs/tsx";
+import { useMetricAtom } from "codemod:metrics";
+
+const OLD_MODULE = "react-test-renderer/shallow";
+const NEW_MODULE = "react-shallow-renderer";
+
+type ReplacementPattern = "import" | "require" | "export" | "dynamic-import";
+
+function metricFile(filename: string): string {
+  const cwd = process.cwd() + "/";
+  return filename.startsWith(cwd) ? filename.slice(cwd.length) : filename;
+}
+
+function namedChildren(node: SgNode<TSX> | null): SgNode<TSX>[] {
+  if (!node) {
+    return [];
+  }
+
+  return node.children().filter((child) => child.isNamed() && child.kind() !== "comment");
+}
+
+function literalContent(node: SgNode<TSX>): string | null {
+  if (!node.is("string")) {
+    return null;
+  }
+
+  const text = node.text();
+  if (text.length < 2) {
+    return null;
+  }
+
+  return text.slice(1, -1).replaceAll("\\/", "/");
+}
+
+function literalMatchesOldModule(node: SgNode<TSX>): boolean {
+  return literalContent(node) === OLD_MODULE;
+}
+
+function fieldMatches(parent: SgNode<TSX>, fieldName: "source", child: SgNode<TSX>): boolean {
+  return parent.field(fieldName)?.id() === child.id();
+}
+
+function nearestAncestor(node: SgNode<TSX>, kind: string): SgNode<TSX> | null {
+  return node.ancestors().find((ancestor) => ancestor.kind() === kind) ?? null;
+}
+
+function isFirstCallArgument(call: SgNode<TSX>, node: SgNode<TSX>): boolean {
+  return namedChildren(call.field("arguments"))[0]?.id() === node.id();
+}
+
+function isDirectRequireCall(call: SgNode<TSX>): boolean {
+  const callee = call.field("function");
+  return callee?.kind() === "identifier" && callee.text() === "require";
+}
+
+function isDynamicImportCall(call: SgNode<TSX>): boolean {
+  const callee = call.field("function");
+  return callee?.kind() === "import" && callee.text() === "import";
+}
+
+function replacementPatternForLiteral(node: SgNode<TSX>): ReplacementPattern | null {
+  const importStatement = nearestAncestor(node, "import_statement");
+  if (importStatement && fieldMatches(importStatement, "source", node)) {
+    return "import";
+  }
+
+  const exportStatement = nearestAncestor(node, "export_statement");
+  if (exportStatement && fieldMatches(exportStatement, "source", node)) {
+    return "export";
+  }
+
+  const callExpression = nearestAncestor(node, "call_expression");
+  if (!callExpression || !isFirstCallArgument(callExpression, node)) {
+    return null;
+  }
+
+  if (isDirectRequireCall(callExpression)) {
+    return "require";
+  }
+
+  if (isDynamicImportCall(callExpression)) {
+    return "dynamic-import";
+  }
+
+  return null;
+}
+
+function replacementEdit(node: SgNode<TSX>): Edit {
+  const fragment = node.find({
+    rule: {
+      kind: "string_fragment",
+      regex: `^${OLD_MODULE}$`,
+    },
+  });
+
+  if (fragment) {
+    return fragment.replace(NEW_MODULE);
+  }
+
+  const quote = node.text().startsWith("'") ? "'" : "\"";
+  return node.replace(`${quote}${NEW_MODULE}${quote}`);
+}
+
+const transform: Transform<TSX> = async (root) => {
+  const rootNode = root.root();
+  const metric = useMetricAtom("replace-react-test-renderer-import-replacements");
+  const edits: Edit[] = [];
+
+  const moduleLiterals = rootNode.findAll({
+    rule: {
+      kind: "string",
+      has: { kind: "string_fragment" },
+    },
+  });
+
+  for (const moduleLiteral of moduleLiterals) {
+    if (!literalMatchesOldModule(moduleLiteral)) {
+      continue;
+    }
+
+    const pattern = replacementPatternForLiteral(moduleLiteral);
+    if (!pattern) {
+      continue;
+    }
+
+    edits.push(replacementEdit(moduleLiteral));
+    metric.increment({ file: metricFile(root.filename()), pattern });
+  }
+
+  return edits.length > 0 ? rootNode.commitEdits(edits) : null;
+};
+
+export default transform;

codemods/replace-react-test-renderer-import/tests/dynamic-import/expected.tsx

@@ -0,0 +1,3 @@
+async function loadRenderer() {
+  return import("react-shallow-renderer");
+}

codemods/replace-react-test-renderer-import/tests/dynamic-import/input.tsx

@@ -0,0 +1,3 @@
+async function loadRenderer() {
+  return import("react-test-renderer/shallow");
+}

codemods/replace-react-test-renderer-import/tests/dynamic-import/metrics.json

@@ -0,0 +1,11 @@
+{
+  "replace-react-test-renderer-import-replacements": [
+    {
+      "cardinality": {
+        "file": "tests/dynamic-import/input.tsx",
+        "pattern": "dynamic-import"
+      },
+      "count": 1
+    }
+  ]
+}

codemods/replace-react-test-renderer-import/tests/export-from/expected.tsx

@@ -0,0 +1 @@
+export { default as ShallowRenderer } from "react-shallow-renderer";

codemods/replace-react-test-renderer-import/tests/export-from/input.tsx

@@ -0,0 +1 @@
+export { default as ShallowRenderer } from "react-test-renderer/shallow";

codemods/replace-react-test-renderer-import/tests/export-from/metrics.json

@@ -0,0 +1,11 @@
+{
+  "replace-react-test-renderer-import-replacements": [
+    {
+      "cardinality": {
+        "file": "tests/export-from/input.tsx",
+        "pattern": "export"
+      },
+      "count": 1
+    }
+  ]
+}