Fix Jest tests for React 19 compatibility

Migrated tests from deprecated react-dom/test-utils to @testing-library/react.

Changes:
- Install @testing-library/react, @testing-library/dom, @testing-library/jest-dom
- Install jest-environment-jsdom (required in Jest 28+)
- Update Jest config to use jsdom test environment
- Create jestSetup.js for @testing-library/jest-dom matchers
- Update testHelper.js to export React Testing Library utilities
- Migrate Comment.spec.jsx to use React Testing Library
- Migrate CommentList.spec.jsx to use React Testing Library
- Use toHaveTextContent() instead of innerHTML checks for better test practices

The old tests used renderIntoDocument and other utilities from react-dom/test-utils
which were removed in React 18+. All tests now pass locally.

Note: During development, adding development: env.isDevelopment to swc.config.js
was tested but caused RSpec failures, so it was not included in the final changes.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: justin808

client/app/bundles/comments/components/CommentBox/CommentList/Comment/Comment.spec.jsx

@@ -1,32 +1,31 @@
-import { React, TestUtils } from '../../../../../../libs/testHelper';
+import { React, render, screen } from '../../../../../../libs/testHelper';
 
 import Comment from './Comment.jsx';
 
-const { renderIntoDocument, findRenderedDOMComponentWithClass, findRenderedDOMComponentWithTag } = TestUtils;
-
 describe('Comment', () => {
   it('renders an author and comment with proper css classes', () => {
-    const component = renderIntoDocument(<Comment author="Frank" text="Hi!" />);
+    const { container } = render(<Comment author="Frank" text="Hi!" />);
 
-    const comment = findRenderedDOMComponentWithTag(component, 'div');
-    expect(comment.className).toEqual('comment');
-    const author = findRenderedDOMComponentWithTag(component, 'h2');
-    expect(author.className).toEqual('commentAuthor js-comment-author');
-    const text = findRenderedDOMComponentWithTag(component, 'span');
-    expect(text.className).toEqual('js-comment-text');
+    const author = container.querySelector('h2.js-comment-author');
+    expect(author).toBeInTheDocument();
+    const text = container.querySelector('span.js-comment-text');
+    expect(text).toBeInTheDocument();
   });
 
   it('shows the author', () => {
-    const component = renderIntoDocument(<Comment author="Frank" text="Hi!" />);
+    render(<Comment author="Frank" text="Hi!" />);
 
-    const author = findRenderedDOMComponentWithClass(component, 'js-comment-author');
-    expect(author.textContent).toEqual('Frank');
+    const author = screen.getByText('Frank');
+    expect(author).toHaveClass('js-comment-author');
   });
 
   it('shows the comment text in markdown', () => {
-    const component = renderIntoDocument(<Comment author="Frank" text="Hi!" />);
+    const { container } = render(<Comment author="Frank" text="Hi!" />);
 
-    const comment = findRenderedDOMComponentWithClass(component, 'js-comment-text');
-    expect(comment.textContent).toEqual('Hi!\n');
+    // The text is rendered inside a span with dangerouslySetInnerHTML
+    // Using querySelector since the content is HTML from markdown
+    const comment = container.querySelector('span.js-comment-text');
+    expect(comment).toBeInTheDocument();
+    expect(comment).toHaveTextContent('Hi!');
   });
 });

client/app/bundles/comments/components/CommentBox/CommentList/CommentList.spec.jsx

@@ -1,10 +1,7 @@
 import { List, Map } from 'immutable';
-import { React, TestUtils } from '../../../../../libs/testHelper';
+import { React, render, screen } from '../../../../../libs/testHelper';
 
 import CommentList from './CommentList.jsx';
-import Comment from './Comment/Comment.jsx';
-
-const { renderIntoDocument, findRenderedDOMComponentWithTag, scryRenderedComponentsWithType } = TestUtils;
 
 const cssTransitionGroupClassNames = {
   enter: 'elementEnter',
@@ -30,25 +27,30 @@ describe('CommentList', () => {
   );
 
   it('renders a list of Comments in normal order', () => {
-    const component = renderIntoDocument(
+    render(
       <CommentList $$comments={comments} cssTransitionGroupClassNames={cssTransitionGroupClassNames} />,
     );
-    const list = scryRenderedComponentsWithType(component, Comment);
-    expect(list.length).toEqual(2);
-    expect(list[0].props.author).toEqual('Frank');
-    expect(list[1].props.author).toEqual('Furter');
+
+    // Verify both authors are rendered in order
+    expect(screen.getByText('Frank')).toBeInTheDocument();
+    expect(screen.getByText('Furter')).toBeInTheDocument();
+
+    // Verify order by checking their positions in the DOM
+    const authors = screen.getAllByRole('heading', { level: 2 });
+    expect(authors[0]).toHaveTextContent('Frank');
+    expect(authors[1]).toHaveTextContent('Furter');
   });
 
   it('renders an alert if errors', () => {
-    const component = renderIntoDocument(
+    render(
       <CommentList
         $$comments={comments}
         error="zomg"
         cssTransitionGroupClassNames={cssTransitionGroupClassNames}
       />,
     );
 
-    const alert = findRenderedDOMComponentWithTag(component, 'strong');
-    expect(alert.textContent).toEqual('Comments could not be retrieved. ');
+    const alert = screen.getByText('Comments could not be retrieved.');
+    expect(alert.tagName).toBe('STRONG');
   });
 });

client/app/libs/jestSetup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

client/app/libs/testHelper.js

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
-import TestUtils from 'react-dom/test-utils';
+import { render, screen, within } from '@testing-library/react';
 
-export { React, TestUtils };
+export { React, render, screen, within };

package.json

@@ -109,6 +109,9 @@
     "@babel/preset-react": "^7.18.6",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@tailwindcss/typography": "^0.5.10",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
     "@webpack-cli/serve": "^2.0.5",
     "babel-jest": "^29.5.0",
     "body-parser": "^1.20.2",
@@ -126,6 +129,7 @@
     "express": "^4.18.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.5.0",
+    "jest-environment-jsdom": "^30.2.0",
     "mini-css-extract-plugin": "^2.7.2",
     "preload-webpack-plugin": "^3.0.0-alpha.1",
     "prettier": "^2.2.1",
@@ -147,11 +151,12 @@
     "not IE 11"
   ],
   "jest": {
+    "testEnvironment": "jsdom",
     "moduleNameMapper": {
       "\\.scss$": "identity-obj-proxy"
     },
-    "setupFiles": [
-      "./client/app/libs/testHelper.js"
+    "setupFilesAfterEnv": [
+      "./client/app/libs/jestSetup.js"
     ],
     "testRegex": "./client/(app|__tests__)/.*.spec\\.jsx?$",
     "transform": {