add replace-act codemod and update configs

.circleci/config.yml

@@ -501,6 +501,9 @@ workflows:
                 - "-r=www-modern --env=development --variant=true"
                 - "-r=www-modern --env=production --variant=true"
 
+                # Codemods
+                - "--project=codemods -r=experimental"
+
                 # TODO: Test more persistent configurations?
                 - '-r=stable --env=development --persistent'
                 - '-r=experimental --env=development --persistent'

codemods/replace-act-import/.codemodrc.json

@@ -0,0 +1,12 @@
+{
+	"version": "1.0.0",
+	"name": "react/19/replace-act-import",
+	"private": false,
+	"engine": "jscodeshift",
+	"meta": {
+		"tags": ["react", "migration"]
+	},
+	"applicability": {
+		"from": [["react", "<=", "18"]]
+	}
+}

codemods/replace-act-import/README.md

@@ -0,0 +1,42 @@
+# Replace react dom test utils with react
+
+## Description
+
+This codemod will replace the usages of `TestUtils.act()` to use `React.act()`, introduced in React v19.
+
+## Examples
+
+### Before
+
+```ts
+import { act } from 'react-dom/test-utils';
+
+act();
+```
+
+### After
+
+```ts
+import { act } from "react";
+
+act();
+```
+
+
+
+### Before
+
+```ts
+import * as ReactDOMTestUtils from 'react-dom/test-utils';
+
+ReactDOMTestUtils.act();
+```
+
+### After
+
+```ts
+import * as React from "react";
+
+React.act();
+```
+

codemods/replace-act-import/__testfixtures__/fixture1.input.js

@@ -0,0 +1,2 @@
+import {act} from 'react-dom/test-utils';
+act();

codemods/replace-act-import/__testfixtures__/fixture1.output.js

@@ -0,0 +1,2 @@
+import {act} from 'react';
+act();

codemods/replace-act-import/__testfixtures__/fixture2.input.js

@@ -0,0 +1,2 @@
+import ReactTestUtils from 'react-dom/test-utils';
+ReactTestUtils.act();

codemods/replace-act-import/__testfixtures__/fixture2.output.js

@@ -0,0 +1,2 @@
+import React from 'react';
+React.act();

codemods/replace-act-import/__testfixtures__/fixture3.input.js

@@ -0,0 +1,2 @@
+import * as ReactTestUtils from 'react-dom/test-utils';
+ReactTestUtils.act();

codemods/replace-act-import/__testfixtures__/fixture3.output.js

@@ -0,0 +1,2 @@
+import * as React from 'react';
+React.act();

codemods/replace-act-import/__testfixtures__/fixture4.input.js

@@ -0,0 +1,2 @@
+import {other} from 'react-dom/test-utils';
+other.thing();

codemods/replace-act-import/__testfixtures__/fixture4.output.js

@@ -0,0 +1,2 @@
+import {other} from 'react-dom/test-utils';
+other.thing();

codemods/replace-act-import/__testfixtures__/fixture5.input.js

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import * as ReactTestUtils from 'react-dom/test-utils';
+
+ReactTestUtils.act();

codemods/replace-act-import/__testfixtures__/fixture5.output.js

@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+React.act();

codemods/replace-act-import/__testfixtures__/fixture6.input.js

@@ -0,0 +1,3 @@
+import {FC} from 'react';
+import {act} from 'react-dom/test-utils';
+act();

codemods/replace-act-import/__testfixtures__/fixture6.output.js

@@ -0,0 +1,2 @@
+import {FC, act} from 'react';
+act();

codemods/replace-act-import/__tests__/test.ts

@@ -0,0 +1,174 @@
+import assert from 'node:assert/strict';
+import {readFile} from 'node:fs/promises';
+import {join} from 'node:path';
+import jscodeshift, {type API, type FileInfo} from 'jscodeshift';
+import transform from '../src/index.ts';
+
+export const buildApi = (parser: string | undefined): API => ({
+  j: parser ? jscodeshift.withParser(parser) : jscodeshift,
+  jscodeshift: parser ? jscodeshift.withParser(parser) : jscodeshift,
+  stats: () => {
+    console.error(
+      'The stats function was called, which is not supported on purpose'
+    );
+  },
+  report: () => {
+    console.error(
+      'The report function was called, which is not supported on purpose'
+    );
+  },
+});
+
+describe('react/19/replace-act-import: TestUtils.act -> React.act', () => {
+  describe('javascript code', () => {
+    it('should replace direct import with import from react', async () => {
+      const INPUT = await readFile(
+        join(__dirname, '..', '__testfixtures__/fixture1.input.js'),
+        'utf-8'
+      );
+      const OUTPUT = await readFile(
+        join(__dirname, '..', '__testfixtures__/fixture1.output.js'),
+        'utf-8'
+      );
+
+      const fileInfo: FileInfo = {
+        path: 'index.ts',
+        source: INPUT,
+      };
+
+      const actualOutput = transform(fileInfo, buildApi('js'), {
+        quote: 'single',
+      });
+
+      assert.deepEqual(
+        actualOutput?.replace(/\W/gm, ''),
+        OUTPUT.replace(/\W/gm, '')
+      );
+    });
+
+    it('should replace TestUtils.act with React.act', async () => {
+      const INPUT = await readFile(
+        join(__dirname, '..', '__testfixtures__/fixture2.input.js'),
+        'utf-8'
+      );
+      const OUTPUT = await readFile(
+        join(__dirname, '..', '__testfixtures__/fixture2.output.js'),
+        'utf-8'
+      );
+
+      const fileInfo: FileInfo = {
+        path: 'index.ts',
+        source: INPUT,
+      };
+
+      const actualOutput = transform(fileInfo, buildApi('js'), {
+        quote: 'single',
+      });
+
+      assert.deepEqual(
+        actualOutput?.replace(/\W/gm, ''),
+        OUTPUT.replace(/\W/gm, '')
+      );
+    });
+
+    it('should properly replace star import', async () => {
+      const INPUT = await readFile(
+        join(__dirname, '..', '__testfixtures__/fixture3.input.js'),
+        'utf-8'
+      );
+      const OUTPUT = await readFile(
+        join(__dirname, '..', '__testfixtures__/fixture3.output.js'),
+        'utf-8'
+      );
+
+      const fileInfo: FileInfo = {
+        path: 'index.ts',
+        source: INPUT,
+      };
+
+      const actualOutput = transform(fileInfo, buildApi('js'), {
+        quote: 'single',
+      });
+
+      assert.deepEqual(
+        actualOutput?.replace(/\W/gm, ''),
+        OUTPUT.replace(/\W/gm, '')
+      );
+    });
+
+    it('should not replace other imports from test utils', async () => {
+      const INPUT = await readFile(
+        join(__dirname, '..', '__testfixtures__/fixture4.input.js'),
+        'utf-8'
+      );
+      const OUTPUT = await readFile(
+        join(__dirname, '..', '__testfixtures__/fixture4.output.js'),
+        'utf-8'
+      );
+
+      const fileInfo: FileInfo = {
+        path: 'index.ts',
+        source: INPUT,
+      };
+
+      const actualOutput = transform(fileInfo, buildApi('js'), {
+        quote: 'single',
+      });
+
+      assert.deepEqual(
+        actualOutput?.replace(/\W/gm, ''),
+        OUTPUT.replace(/\W/gm, '')
+      );
+    });
+
+    it('should not add react import if one is already present', async () => {
+      const INPUT = await readFile(
+        join(__dirname, '..', '__testfixtures__/fixture5.input.js'),
+        'utf-8'
+      );
+      const OUTPUT = await readFile(
+        join(__dirname, '..', '__testfixtures__/fixture5.output.js'),
+        'utf-8'
+      );
+
+      const fileInfo: FileInfo = {
+        path: 'index.ts',
+        source: INPUT,
+      };
+
+      const actualOutput = transform(fileInfo, buildApi('js'), {
+        quote: 'single',
+      });
+
+      assert.deepEqual(
+        actualOutput?.replace(/\W/gm, ''),
+        OUTPUT.replace(/\W/gm, '')
+      );
+    });
+
+    it('should add import specifier to existing import if it exists', async () => {
+      const INPUT = await readFile(
+        join(__dirname, '..', '__testfixtures__/fixture6.input.js'),
+        'utf-8'
+      );
+      const OUTPUT = await readFile(
+        join(__dirname, '..', '__testfixtures__/fixture6.output.js'),
+        'utf-8'
+      );
+
+      const fileInfo: FileInfo = {
+        path: 'index.ts',
+        source: INPUT,
+      };
+
+      const actualOutput = transform(fileInfo, buildApi('js'), {
+        quote: 'single',
+      });
+
+      assert.deepEqual(
+        actualOutput?.replace(/\W/gm, ''),
+        OUTPUT.replace(/\W/gm, '')
+      );
+    });
+  });
+});

codemods/replace-act-import/package.json

@@ -0,0 +1,17 @@
+{
+	"name": "replace-act-import",
+  "version": "1.0.0",
+	"dependencies": {},
+	"devDependencies": {
+    "@types/node": "^20.12.3",
+		"@types/jscodeshift": "^0.11.10",
+		"jscodeshift": "^0.15.1",
+		"typescript": "^5.2.2"
+	},
+	"files": [
+		"./README.md",
+		"./.codemodrc.json",
+		"./dist/index.cjs"
+	],
+	"type": "module"
+}