Make RSC tests await act (#1734)

* Remove act from render

* Add eslint-plugin-testing-library

* Remove more packages in convert script

---------

Co-authored-by: Alexey Romanov <alexey.v.romanov@gmail.com>

Author: alexeyr-ci2

eslint.config.ts

@@ -2,6 +2,7 @@ import path from 'node:path';
 import { globalIgnores } from 'eslint/config';
 import jest from 'eslint-plugin-jest';
 import prettierRecommended from 'eslint-plugin-prettier/recommended';
+import testingLibrary from 'eslint-plugin-testing-library';
 import globals from 'globals';
 import tsEslint from 'typescript-eslint';
 import { includeIgnoreFile } from '@eslint/compat';
@@ -198,11 +199,17 @@ const config = tsEslint.config([
   {
     files: ['node_package/tests/**', '**/*.test.{js,jsx,ts,tsx}'],
 
-    extends: [jest.configs['flat/recommended'], jest.configs['flat/style']],
+    extends: [
+      jest.configs['flat/recommended'],
+      jest.configs['flat/style'],
+      testingLibrary.configs['flat/dom'],
+    ],
 
     rules: {
       // Allows Jest mocks before import
       'import/first': 'off',
+      // Avoiding these methods complicates tests and isn't useful for our purposes
+      'testing-library/no-node-access': 'off',
     },
   },
   // must be the last config in the array

node_package/tests/SuspenseHydration.test.tsx

@@ -167,17 +167,15 @@ async function renderAndHydrate() {
       hydrate();
       await writeFirstChunk();
     });
-    await waitFor(() => {
-      expect(screen.queryByText('Loading...')).toBeInTheDocument();
-    });
+    expect(await screen.findByText('Loading...')).toBeInTheDocument();
     expect(onContainerHydrated).toHaveBeenCalled();
 
     // The async component is not hydrated until the second chunk is written to the document
     await new Promise((resolve) => {
       setTimeout(resolve, 1000);
     });
     expect(onAsyncComponentHydrated).not.toHaveBeenCalled();
-    expect(screen.queryByText('Loading...')).toBeInTheDocument();
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
     expect(screen.queryByText('Hello World')).not.toBeInTheDocument();
   });
 
@@ -189,18 +187,16 @@ async function renderAndHydrate() {
       hydrate();
       await writeFirstChunk();
     });
-    await waitFor(() => {
-      expect(screen.queryByText('Loading...')).toBeInTheDocument();
-    });
+    expect(await screen.findByText('Loading...')).toBeInTheDocument();
 
     await act(async () => {
       const secondChunk = await writeSecondChunk();
       expect(secondChunk).toContain('script');
     });
     await waitFor(() => {
       expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
-      expect(screen.queryByText('Hello World')).toBeInTheDocument();
     });
+    expect(screen.getByText('Hello World')).toBeInTheDocument();
 
     expect(onContainerHydrated).toHaveBeenCalled();
     expect(onAsyncComponentHydrated).toHaveBeenCalled();

node_package/tests/registerServerComponent.client.test.jsx

@@ -17,7 +17,7 @@ import { clear as clearComponentRegistry } from '../src/ComponentRegistry.ts';
 enableFetchMocks();
 
 // React Server Components tests require React 19 and only run with Node version 18 (`newest` in our CI matrix)
-(getNodeVersion() >= 18 ? describe : describe.skip)('RSCClientRoot', () => {
+(getNodeVersion() >= 18 ? describe : describe.skip)('registerServerComponent', () => {
   let container;
   const mockDomNodeId = 'test-container';
 
@@ -70,11 +70,10 @@ enableFetchMocks();
     };
 
     // Execute the render
-    const render = () =>
-      act(async () => {
-        const Component = ReactOnRails.getComponent('TestComponent');
-        await Component.component({}, railsContext, mockDomNodeId);
-      });
+    const render = async () => {
+      const Component = ReactOnRails.getComponent('TestComponent');
+      await Component.component({}, railsContext, mockDomNodeId);
+    };
 
     return {
       render,
@@ -92,7 +91,7 @@ enableFetchMocks();
 
     await act(async () => {
       pushFirstChunk();
-      render();
+      await render();
     });
     expect(window.fetch).toHaveBeenCalledWith('/rsc-render/TestComponent?props=%7B%7D');
     expect(window.fetch).toHaveBeenCalledTimes(1);
@@ -113,7 +112,7 @@ enableFetchMocks();
     const { render, pushFirstChunk, pushSecondChunk, endStream } = await mockRSCRequest();
 
     await act(async () => {
-      render();
+      await render();
       pushFirstChunk();
     });
     expect(consoleSpy).toHaveBeenCalledWith(
@@ -143,7 +142,7 @@ enableFetchMocks();
     const { render, pushFirstChunk, pushSecondChunk, endStream } = await mockRSCRequest('/rsc-render/');
 
     await act(async () => {
-      render();
+      await render();
       pushFirstChunk();
       pushSecondChunk();
       endStream();

package.json

@@ -55,6 +55,7 @@
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-testing-library": "^7.5.3",
     "globals": "^16.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -71,7 +72,7 @@
     "redux": "^4.2.1",
     "ts-jest": "^29.2.5",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.29.1"
+    "typescript-eslint": "^8.35.0"
   },
   "peerDependencies": {
     "react": ">= 16",

script/convert

@@ -21,16 +21,12 @@ gsub_file_content("../Gemfile.development_dependencies", /gem "shakapacker", "[^
 gsub_file_content("../spec/dummy/package.json", /"shakapacker": "[^"]*",/, '"shakapacker": "6.6.0",')
 
 # The below packages don't work on the oldest supported Node version and aren't needed there anyway
-gsub_file_content("../package.json", /"eslint": "[^"]*",/, "")
-gsub_file_content("../package.json", /"eslint-plugin-jest": "[^"]*",/, "")
+gsub_file_content("../package.json", /"[^"]*eslint[^"]*": "[^"]*",?/, "")
 gsub_file_content("../package.json", /"globals": "[^"]*",/, "")
 gsub_file_content("../package.json", /"knip": "[^"]*",/, "")
 gsub_file_content("../package.json", /"publint": "[^"]*",/, "")
-gsub_file_content("../package.json", /"typescript-eslint": "[^"]*",?/, "")
 gsub_file_content("../package.json", %r{"@arethetypeswrong/cli": "[^"]*",}, "")
-gsub_file_content("../package.json", %r{"@eslint/compat": "[^"]*",}, "")
-gsub_file_content("../package.json", %r{"@testing-library/dom": "[^"]*",}, "")
-gsub_file_content("../package.json", %r{"@testing-library/react": "[^"]*",}, "")
+gsub_file_content("../package.json", %r{"@testing-library/[^"]*": "[^"]*",}, "")
 
 # Clean up any trailing commas before closing braces
 gsub_file_content("../package.json", /,(\s*})/, "\\1")