Chore replaced react-test-renderer with @testing-library/react (#4844)

* Chore replaced react-test-renderer with @testing-library/react
In order to prep for React 19, began conversion from `react-test-renderer` to `@testing-library/react`
- Added new `testing/testSetup.ts` to import `@testing-library/dom`
 - Updated all of the `jest.config.json` files to add this to the `setupFilesAfterEnv` for all packages that have snapshots
- Updated all tests NOT in the `snapshot-tests` directory to switch from `react-test-renderer` to `@testing-library/react`
 - Updated snapshots accordingly
- Updated `mantine` theme to refactor the `WrappedForm` into its own file
- Updated `shadcn` to properly add `forwardRef` to the `Command` component to avoid an error detected by the `@testing-library/react`
- Updated `getWidget()` test to switch them to snapshot tests

* - Missed a few changes

* - Added mocking for `mantine` and `shadcn` needed for `@testing-library/react`

Author: heath-freenome

CHANGELOG.md

@@ -60,6 +60,7 @@ should change the heading of the (upcoming) version to include a major version b
 ## @rjsf/shadcn
 
 - Updated `FieldTemplate` to skip label and description rendering for checkbox widgets, fixing ([#4742](https://github.com/rjsf-team/react-jsonschema-form/issues/4742))
+- Updated the `Command` component to properly handle `forwardRef`
 
 ## @rjsf/utils
 
@@ -68,6 +69,7 @@ should change the heading of the (upcoming) version to include a major version b
 ## Dev / docs / playground
 
 - Updated the `OptionsDrawer` of the playground to add `idPrefix` and `idSeparator` fields
+- Updated test files to switch to using the React Testing library instead of `react-test-renderer`, updating all snapshots accordingly
 
 # 6.0.1
 

package-lock.json

@@ -1,5 +1,6 @@
 {
   "verbose": true,
+  "setupFilesAfterEnv": ["../../testing/testSetup.ts"],
   "testEnvironment": "jsdom",
   "testEnvironmentOptions": {
     "browsers": ["chrome", "firefox", "safari"]

packages/antd/jest.config.json

@@ -1,7 +1,7 @@
-import renderer from 'react-test-renderer';
 import validator from '@rjsf/validator-ajv8';
 import { RJSFSchema } from '@rjsf/utils';
 import { formTests } from '@rjsf/snapshot-tests';
+import { render } from '@testing-library/react';
 
 import '../__mocks__/matchMedia.mock';
 import Form from '../src';
@@ -21,7 +21,7 @@ describe('antd specific tests', () => {
       },
     };
     const formContext = { descriptionLocation: 'tooltip' };
-    const tree = renderer.create(<Form schema={schema} validator={validator} formContext={formContext} />).toJSON();
-    expect(tree).toMatchSnapshot();
+    const { asFragment } = render(<Form schema={schema} validator={validator} formContext={formContext} />);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

packages/antd/test/Form.test.tsx

@@ -1,180 +1,134 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`antd specific tests descriptionLocation tooltip in formContext 1`] = `
-<form
-  className="rjsf"
-  noValidate={false}
-  onSubmit={[Function]}
->
-  <div
-    className="rjsf-field rjsf-field-object"
+<DocumentFragment>
+  <form
+    class="rjsf"
   >
     <div
-      className="ant-form-item css-dev-only-do-not-override-ac2jek ant-form-item-horizontal"
+      class="rjsf-field rjsf-field-object"
     >
       <div
-        className="ant-row ant-form-item-row css-dev-only-do-not-override-ac2jek"
-        style={
-          {
-            "rowGap": undefined,
-          }
-        }
+        class="ant-form-item css-dev-only-do-not-override-ac2jek ant-form-item-horizontal"
       >
         <div
-          className="ant-col ant-col-24 ant-form-item-control css-dev-only-do-not-override-ac2jek"
-          style={{}}
+          class="ant-row ant-form-item-row css-dev-only-do-not-override-ac2jek"
         >
           <div
-            className="ant-form-item-control-input"
+            class="ant-col ant-col-24 ant-form-item-control css-dev-only-do-not-override-ac2jek"
           >
             <div
-              className="ant-form-item-control-input-content"
+              class="ant-form-item-control-input"
             >
-              <fieldset
-                id="root"
+              <div
+                class="ant-form-item-control-input-content"
               >
-                <div
-                  className="ant-row css-dev-only-do-not-override-ac2jek"
-                  style={
-                    {
-                      "marginLeft": -12,
-                      "marginRight": -12,
-                      "rowGap": undefined,
-                    }
-                  }
+                <fieldset
+                  id="root"
                 >
                   <div
-                    className="ant-col ant-col-24 css-dev-only-do-not-override-ac2jek"
-                    style={
-                      {
-                        "paddingLeft": 12,
-                        "paddingRight": 12,
-                      }
-                    }
+                    class="ant-row css-dev-only-do-not-override-ac2jek"
+                    style="margin-left: -12px; margin-right: -12px;"
                   >
                     <div
-                      className="rjsf-field rjsf-field-string"
+                      class="ant-col ant-col-24 css-dev-only-do-not-override-ac2jek"
+                      style="padding-left: 12px; padding-right: 12px;"
                     >
                       <div
-                        className="ant-form-item css-dev-only-do-not-override-ac2jek ant-form-item-horizontal"
+                        class="rjsf-field rjsf-field-string"
                       >
                         <div
-                          className="ant-row ant-form-item-row css-dev-only-do-not-override-ac2jek"
-                          style={
-                            {
-                              "rowGap": undefined,
-                            }
-                          }
+                          class="ant-form-item css-dev-only-do-not-override-ac2jek ant-form-item-horizontal"
                         >
                           <div
-                            className="ant-col ant-col-24 ant-form-item-label css-dev-only-do-not-override-ac2jek"
-                            style={{}}
+                            class="ant-row ant-form-item-row css-dev-only-do-not-override-ac2jek"
                           >
-                            <label
-                              className=""
-                              htmlFor="root_my-field"
-                              title="my-field"
+                            <div
+                              class="ant-col ant-col-24 ant-form-item-label css-dev-only-do-not-override-ac2jek"
                             >
-                              my-field
-                              <span
-                                aria-describedby="test-id"
-                                aria-label="question-circle"
-                                className="anticon anticon-question-circle ant-form-item-tooltip"
-                                onClick={[Function]}
-                                onMouseEnter={[Function]}
-                                onMouseLeave={[Function]}
-                                onPointerEnter={[Function]}
-                                onPointerLeave={[Function]}
-                                role="img"
-                                tabIndex={null}
-                                title=""
+                              <label
+                                class=""
+                                for="root_my-field"
+                                title="my-field"
                               >
-                                <svg
-                                  aria-hidden="true"
-                                  data-icon="question-circle"
-                                  fill="currentColor"
-                                  focusable="false"
-                                  height="1em"
-                                  viewBox="64 64 896 896"
-                                  width="1em"
+                                my-field
+                                <span
+                                  aria-describedby="test-id"
+                                  aria-label="question-circle"
+                                  class="anticon anticon-question-circle ant-form-item-tooltip"
+                                  role="img"
+                                  title=""
                                 >
-                                  <path
-                                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                                  />
-                                  <path
-                                    d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"
-                                  />
-                                </svg>
-                              </span>
-                            </label>
-                          </div>
-                          <div
-                            className="ant-col ant-col-24 ant-form-item-control css-dev-only-do-not-override-ac2jek"
-                            style={{}}
-                          >
+                                  <svg
+                                    aria-hidden="true"
+                                    data-icon="question-circle"
+                                    fill="currentColor"
+                                    focusable="false"
+                                    height="1em"
+                                    viewBox="64 64 896 896"
+                                    width="1em"
+                                  >
+                                    <path
+                                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+                                    />
+                                    <path
+                                      d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"
+                                    />
+                                  </svg>
+                                </span>
+                              </label>
+                            </div>
                             <div
-                              className="ant-form-item-control-input"
+                              class="ant-col ant-col-24 ant-form-item-control css-dev-only-do-not-override-ac2jek"
                             >
                               <div
-                                className="ant-form-item-control-input-content"
+                                class="ant-form-item-control-input"
                               >
-                                <span
-                                  className="ant-input-affix-wrapper css-dev-only-do-not-override-ac2jek ant-input-outlined"
-                                  onClick={[Function]}
-                                  style={
-                                    {
-                                      "width": "100%",
-                                    }
-                                  }
+                                <div
+                                  class="ant-form-item-control-input-content"
                                 >
-                                  <input
-                                    aria-describedby="root_my-field__error root_my-field__description root_my-field__help"
-                                    className="ant-input css-dev-only-do-not-override-ac2jek"
-                                    disabled={false}
-                                    id="root_my-field"
-                                    name="root_my-field"
-                                    onBlur={[Function]}
-                                    onChange={[Function]}
-                                    onCompositionEnd={[Function]}
-                                    onCompositionStart={[Function]}
-                                    onFocus={[Function]}
-                                    onKeyDown={[Function]}
-                                    onKeyUp={[Function]}
-                                    placeholder=""
-                                    type="text"
-                                    value=""
-                                  />
                                   <span
-                                    className="ant-input-suffix"
-                                  />
-                                </span>
+                                    class="ant-input-affix-wrapper css-dev-only-do-not-override-ac2jek ant-input-outlined"
+                                    style="width: 100%;"
+                                  >
+                                    <input
+                                      aria-describedby="root_my-field__error root_my-field__description root_my-field__help"
+                                      class="ant-input css-dev-only-do-not-override-ac2jek"
+                                      id="root_my-field"
+                                      name="root_my-field"
+                                      placeholder=""
+                                      type="text"
+                                      value=""
+                                    />
+                                    <span
+                                      class="ant-input-suffix"
+                                    />
+                                  </span>
+                                </div>
                               </div>
                             </div>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </div>
-              </fieldset>
+                </fieldset>
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <button
-    className="ant-btn css-dev-only-do-not-override-ac2jek ant-btn-submit"
-    disabled={false}
-    onClick={[Function]}
-    style={{}}
-    type="submit"
-  >
-    <span>
-      Submit
-    </span>
-  </button>
-</form>
+    <button
+      class="ant-btn css-dev-only-do-not-override-ac2jek ant-btn-submit"
+      type="submit"
+    >
+      <span>
+        Submit
+      </span>
+    </button>
+  </form>
+</DocumentFragment>
 `;
 
 exports[`nameGenerator bracketNameGenerator array of objects 1`] = `

packages/antd/test/__snapshots__/Form.test.tsx.snap

@@ -4,6 +4,6 @@
   "testEnvironmentOptions": {
     "browsers": ["chrome", "firefox", "safari"]
   },
-  "setupFilesAfterEnv": ["./test/setup-jest-env.js"],
+  "setupFilesAfterEnv": ["./test/setup-jest-env.js", "../../testing/testSetup.ts"],
   "transformIgnorePatterns": ["/node_modules/(?!deep-freeze-es6)"]
 }

packages/chakra-ui/jest.config.json

@@ -1,12 +1,14 @@
-import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
+import { ChakraProvider, defaultSystem, EnvironmentProvider } from '@chakra-ui/react';
 import { FormProps } from '@rjsf/core';
 
 import Form from '../src';
 
 export default function WrappedForm(props: FormProps) {
   return (
-    <ChakraProvider value={defaultSystem}>
-      <Form {...props} />
-    </ChakraProvider>
+    <EnvironmentProvider environment={{ document, window }}>
+      <ChakraProvider value={defaultSystem}>
+        <Form {...props} />
+      </ChakraProvider>
+    </EnvironmentProvider>
   );
 }