Chore: Convert some core tests to typescript using jest

For consistency and to support react 19 conversion, upgraded a set of tests in core to typescript and jest
- In `@rjsf/core`, added a typescript version of `test_utils.js` named `testUtils.tsx`
  - Renamed the `setup-jest-env.js` file to `.ts` updating it in the `jest.config.json`
  - Renamed the following test files to `.tsx`, converting to using `jest` and `@testing-library` constructs and matchers:
    - `ArrayFieldTemplate`, `FieldTemplate`, `FormContext`, `NullField`, `NumberField`, `ObjectFieldTemplate`, `allOf`, `const`, `ifthenelse` and `withTheme`
  - The `DescriptionField` and `TitleField` tests changed enough so that they appear as a delete/new rather than rename
- Updated the `CHANGELOG.md` accordingly

Author: heath-freenome

CHANGELOG.md

@@ -23,6 +23,9 @@ should change the heading of the (upcoming) version to include a major version b
 - Fixed issue with default value not being prefilled when object with if/then is nested inside another object, fixing [#4222](https://github.com/rjsf-team/react-jsonschema-form/issues/4222)
 - Fixed issue with schema array with nested dependent fixed-length, fixing [#3754](https://github.com/rjsf-team/react-jsonschema-form/issues/3754)
 
+## Dev / docs / playground
+
+- Updated unit tests for `@rjsf/core` to convert them to typescript and jest
 
 # 6.1.2
 

packages/core/jest.config.json

@@ -1,7 +1,7 @@
 {
   "verbose": true,
   "testEnvironment": "jsdom",
-  "setupFilesAfterEnv": ["./test/setup-jest-env.js", "../../testing/testSetup.ts"],
+  "setupFilesAfterEnv": ["./test/setup-jest-env.ts", "../../testing/testSetup.ts"],
   "testMatch": ["**/test/**/*.test.[jt]s?(x)"],
   "transformIgnorePatterns": ["/node_modules/(?!(@x0k/json-schema-merge|deep-freeze-es6))"]
 }

packages/core/test/ArrayFieldTemplate.test.jsx renamed to packages/core/test/ArrayFieldTemplate.test.tsx

@@ -1,25 +1,14 @@
 import { PureComponent } from 'react';
-import { expect } from 'chai';
-import { Simulate } from 'react-dom/test-utils';
-import { getUiOptions } from '@rjsf/utils';
+import { ArrayFieldTemplateProps, ArrayFieldItemTemplateProps, RJSFSchema, getUiOptions } from '@rjsf/utils';
+import { fireEvent } from '@testing-library/react';
 
-import { createFormComponent, createSandbox } from './test_utils';
+import { createFormComponent } from './testUtils';
 
-describe('ArrayFieldTemplate', () => {
-  let sandbox;
-
-  const formData = ['one', 'two', 'three'];
-
-  beforeEach(() => {
-    sandbox = createSandbox();
-  });
-
-  afterEach(() => {
-    sandbox.restore();
-  });
+const formData = ['one', 'two', 'three'];
 
+describe('ArrayFieldTemplate', () => {
   describe('Custom ArrayFieldTemplate of string array', () => {
-    function ArrayFieldTemplate(props) {
+    function ArrayFieldTemplate(props: ArrayFieldTemplateProps) {
       const { classNames } = getUiOptions(props.uiSchema);
       return (
         <div className={classNames}>
@@ -28,7 +17,7 @@ describe('ArrayFieldTemplate', () => {
         </div>
       );
     }
-    function ArrayFieldItemTemplate(props) {
+    function ArrayFieldItemTemplate(props: ArrayFieldItemTemplateProps) {
       return (
         <div className='custom-array-item'>
           {props.buttonsProps.hasMoveUp && <button className='custom-array-item-move-up' />}
@@ -40,13 +29,13 @@ describe('ArrayFieldTemplate', () => {
     }
 
     describe('Stateful ArrayFieldTemplate', () => {
-      class ArrayFieldTemplate extends PureComponent {
+      class ArrayFieldTemplate extends PureComponent<ArrayFieldTemplateProps> {
         render() {
           return <div className='field-content'>{this.props.items}</div>;
         }
       }
 
-      class ArrayFieldItemTemplate extends PureComponent {
+      class ArrayFieldItemTemplate extends PureComponent<ArrayFieldItemTemplateProps> {
         render() {
           return <div>this.props.children</div>;
         }
@@ -60,7 +49,7 @@ describe('ArrayFieldTemplate', () => {
             templates: { ArrayFieldTemplate, ArrayFieldItemTemplate },
           });
 
-          expect(node.querySelectorAll('.rjsf-field-array .field-content div')).to.have.length.of(3);
+          expect(node.querySelectorAll('.rjsf-field-array .field-content div')).toHaveLength(3);
         });
       });
       describe('with template configured in ui:ArrayFieldTemplate', () => {
@@ -74,7 +63,7 @@ describe('ArrayFieldTemplate', () => {
             },
           });
 
-          expect(node.querySelectorAll('.rjsf-field-array .field-content div')).to.have.length.of(3);
+          expect(node.querySelectorAll('.rjsf-field-array .field-content div')).toHaveLength(3);
         });
       });
       describe('with template configured globally being overriden in ui:ArrayFieldTemplate', () => {
@@ -90,20 +79,20 @@ describe('ArrayFieldTemplate', () => {
             templates: { ArrayFieldTemplate: () => <div /> },
           });
 
-          expect(node.querySelectorAll('.rjsf-field-array .field-content div')).to.have.length.of(3);
+          expect(node.querySelectorAll('.rjsf-field-array .field-content div')).toHaveLength(3);
         });
       });
     });
 
     describe('not fixed items', () => {
-      const schema = {
+      const schema: RJSFSchema = {
         type: 'array',
         title: 'my list',
         description: 'my description',
         items: { type: 'string' },
       };
 
-      let node;
+      let node: Element;
 
       describe('with template globally configured', () => {
         const uiSchema = {
@@ -157,42 +146,42 @@ describe('ArrayFieldTemplate', () => {
       });
       function sharedIts() {
         it('should render one root element for the array', () => {
-          expect(node.querySelectorAll('.custom-array')).to.have.length.of(1);
+          expect(node.querySelectorAll('.custom-array')).toHaveLength(1);
         });
 
         it('should render one add button', () => {
-          expect(node.querySelectorAll('.custom-array-add')).to.have.length.of(1);
+          expect(node.querySelectorAll('.custom-array-add')).toHaveLength(1);
         });
 
         it('should render one child for each array item', () => {
-          expect(node.querySelectorAll('.custom-array-item')).to.have.length.of(formData.length);
+          expect(node.querySelectorAll('.custom-array-item')).toHaveLength(formData.length);
         });
 
         it('should render text input for each array item', () => {
-          expect(node.querySelectorAll('.custom-array-item .rjsf-field input[type=text]')).to.have.length.of(
+          expect(node.querySelectorAll('.custom-array-item .rjsf-field input[type=text]')).toHaveLength(
             formData.length,
           );
         });
 
         it('should render move up button for all but one array items', () => {
-          expect(node.querySelectorAll('.custom-array-item-move-up')).to.have.length.of(formData.length - 1);
+          expect(node.querySelectorAll('.custom-array-item-move-up')).toHaveLength(formData.length - 1);
         });
 
         it('should render move down button for all but one array items', () => {
-          expect(node.querySelectorAll('.custom-array-item-move-down')).to.have.length.of(formData.length - 1);
+          expect(node.querySelectorAll('.custom-array-item-move-down')).toHaveLength(formData.length - 1);
         });
       }
     });
 
     describe('fixed items', () => {
-      const schema = {
+      const schema: RJSFSchema = {
         type: 'array',
         title: 'my list',
         description: 'my description',
         items: [{ type: 'string' }, { type: 'string' }, { type: 'string' }],
       };
 
-      let node;
+      let node: Element;
 
       describe('with template globally configured', () => {
         const uiSchema = {
@@ -243,42 +232,42 @@ describe('ArrayFieldTemplate', () => {
       });
       function sharedIts() {
         it('should render one root element for the array', () => {
-          expect(node.querySelectorAll('.custom-array')).to.have.length.of(1);
+          expect(node.querySelectorAll('.custom-array')).toHaveLength(1);
         });
 
         it('should not render an add button', () => {
-          expect(node.querySelectorAll('.custom-array-add')).to.have.length.of(0);
+          expect(node.querySelectorAll('.custom-array-add')).toHaveLength(0);
         });
 
         it('should render one child for each array item', () => {
-          expect(node.querySelectorAll('.custom-array-item')).to.have.length.of(formData.length);
+          expect(node.querySelectorAll('.custom-array-item')).toHaveLength(formData.length);
         });
 
         it('should render text input for each array item', () => {
-          expect(node.querySelectorAll('.custom-array-item .rjsf-field input[type=text]')).to.have.length.of(
+          expect(node.querySelectorAll('.custom-array-item .rjsf-field input[type=text]')).toHaveLength(
             formData.length,
           );
         });
 
         it('should not render any move up buttons', () => {
-          expect(node.querySelectorAll('.custom-array-item-move-up')).to.have.length.of(0);
+          expect(node.querySelectorAll('.custom-array-item-move-up')).toHaveLength(0);
         });
 
         it('should not render any move down buttons', () => {
-          expect(node.querySelectorAll('.custom-array-item-move-down')).to.have.length.of(0);
+          expect(node.querySelectorAll('.custom-array-item-move-down')).toHaveLength(0);
         });
       }
     });
   });
 
   describe('Stateful ArrayFieldTemplate', () => {
-    class ArrayFieldTemplate extends PureComponent {
+    class ArrayFieldTemplate extends PureComponent<ArrayFieldTemplateProps> {
       render() {
         return <div className='field-content'>{this.props.items}</div>;
       }
     }
 
-    class ArrayFieldItemTemplate extends PureComponent {
+    class ArrayFieldItemTemplate extends PureComponent<ArrayFieldItemTemplateProps> {
       render() {
         return <div>this.props.children</div>;
       }
@@ -290,13 +279,13 @@ describe('ArrayFieldTemplate', () => {
         formData,
         templates: { ArrayFieldTemplate, ArrayFieldItemTemplate },
       });
-      expect(node.querySelectorAll('.rjsf-field-array .field-content div')).to.have.length.of(3);
+      expect(node.querySelectorAll('.rjsf-field-array .field-content div')).toHaveLength(3);
     });
   });
 
   describe('pass right props to ArrayFieldTemplate', () => {
     it('should pass registry prop', () => {
-      const ArrayFieldTemplate = ({ registry }) => {
+      const ArrayFieldTemplate = ({ registry }: ArrayFieldTemplateProps) => {
         if (!registry) {
           throw 'Error';
         }
@@ -310,13 +299,13 @@ describe('ArrayFieldTemplate', () => {
     });
 
     it('should pass formData so it is in sync with items', () => {
-      const ArrayFieldTemplate = ({ formData, items, onAddClick }) => {
+      const ArrayFieldTemplate = ({ formData, items, onAddClick }: ArrayFieldTemplateProps) => {
         if (formData.length !== items.length) {
           throw 'Error';
         }
         return (
           <div>
-            {items.map((item, i) => (
+            {items.map((_, i) => (
               <span key={i}>value: {formData[i]}</span>
             ))}
             <button className='rjsf-array-item-add' onClick={onAddClick} />
@@ -328,7 +317,9 @@ describe('ArrayFieldTemplate', () => {
         formData,
         templates: { ArrayFieldTemplate },
       });
-      Simulate.click(node.querySelector('.rjsf-array-item-add'));
+      const button = node.querySelector('.rjsf-array-item-add');
+      expect(button).toBeInTheDocument();
+      fireEvent.click(button!);
     });
   });
 });

packages/core/test/DescriptionField.test.jsx

@@ -0,0 +1,29 @@
+import { render } from '@testing-library/react';
+import { DescriptionFieldProps } from '@rjsf/utils';
+
+import DescriptionField from '../src/components/templates/DescriptionField';
+import { getTestRegistry } from '../src';
+
+const registry = getTestRegistry({});
+
+describe('DescriptionField', () => {
+  let node: Element;
+  let props: DescriptionFieldProps;
+  beforeAll(() => {
+    props = {
+      id: 'sample_id',
+      description: 'Field description',
+      schema: {},
+      registry,
+    };
+    const { container } = render(<DescriptionField {...props} />);
+    node = container.firstElementChild!;
+  });
+  it('should return a div for a custom component', () => {
+    expect(node.tagName).toEqual('DIV');
+  });
+
+  it('should have the expected id', () => {
+    expect(node).toHaveAttribute('id', 'sample_id');
+  });
+});