Skip to content

Commit ff855d7

Browse files
heath-freenomeheath-freenome
authored
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`
1 parent cd3638f commit ff855d7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+53436
-53055
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ should change the heading of the (upcoming) version to include a major version b
6060
## @rjsf/shadcn
6161

6262
- Updated `FieldTemplate` to skip label and description rendering for checkbox widgets, fixing ([#4742](https://github.com/rjsf-team/react-jsonschema-form/issues/4742))
63+
- Updated the `Command` component to properly handle `forwardRef`
6364

6465
## @rjsf/utils
6566

@@ -68,6 +69,7 @@ should change the heading of the (upcoming) version to include a major version b
6869
## Dev / docs / playground
6970

7071
- Updated the `OptionsDrawer` of the playground to add `idPrefix` and `idSeparator` fields
72+
- Updated test files to switch to using the React Testing library instead of `react-test-renderer`, updating all snapshots accordingly
7173

7274
# 6.0.1
7375

‎package-lock.json‎

Lines changed: 3 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/antd/jest.config.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"verbose": true,
3+
"setupFilesAfterEnv": ["../../testing/testSetup.ts"],
34
"testEnvironment": "jsdom",
45
"testEnvironmentOptions": {
56
"browsers": ["chrome", "firefox", "safari"]

‎packages/antd/test/Form.test.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import renderer from 'react-test-renderer';
21
import validator from '@rjsf/validator-ajv8';
32
import { RJSFSchema } from '@rjsf/utils';
43
import { formTests } from '@rjsf/snapshot-tests';
4+
import { render } from '@testing-library/react';
55

66
import '../__mocks__/matchMedia.mock';
77
import Form from '../src';
@@ -21,7 +21,7 @@ describe('antd specific tests', () => {
2121
},
2222
};
2323
const formContext = { descriptionLocation: 'tooltip' };
24-
const tree = renderer.create(<Form schema={schema} validator={validator} formContext={formContext} />).toJSON();
25-
expect(tree).toMatchSnapshot();
24+
const { asFragment } = render(<Form schema={schema} validator={validator} formContext={formContext} />);
25+
expect(asFragment()).toMatchSnapshot();
2626
});
2727
});

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

Lines changed: 84 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -1,180 +1,134 @@
11
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
22

33
exports[`antd specific tests descriptionLocation tooltip in formContext 1`] = `
4-
<form
5-
className="rjsf"
6-
noValidate={false}
7-
onSubmit={[Function]}
8-
>
9-
<div
10-
className="rjsf-field rjsf-field-object"
4+
<DocumentFragment>
5+
<form
6+
class="rjsf"
117
>
128
<div
13-
className="ant-form-item css-dev-only-do-not-override-ac2jek ant-form-item-horizontal"
9+
class="rjsf-field rjsf-field-object"
1410
>
1511
<div
16-
className="ant-row ant-form-item-row css-dev-only-do-not-override-ac2jek"
17-
style={
18-
{
19-
"rowGap": undefined,
20-
}
21-
}
12+
class="ant-form-item css-dev-only-do-not-override-ac2jek ant-form-item-horizontal"
2213
>
2314
<div
24-
className="ant-col ant-col-24 ant-form-item-control css-dev-only-do-not-override-ac2jek"
25-
style={{}}
15+
class="ant-row ant-form-item-row css-dev-only-do-not-override-ac2jek"
2616
>
2717
<div
28-
className="ant-form-item-control-input"
18+
class="ant-col ant-col-24 ant-form-item-control css-dev-only-do-not-override-ac2jek"
2919
>
3020
<div
31-
className="ant-form-item-control-input-content"
21+
class="ant-form-item-control-input"
3222
>
33-
<fieldset
34-
id="root"
23+
<div
24+
class="ant-form-item-control-input-content"
3525
>
36-
<div
37-
className="ant-row css-dev-only-do-not-override-ac2jek"
38-
style={
39-
{
40-
"marginLeft": -12,
41-
"marginRight": -12,
42-
"rowGap": undefined,
43-
}
44-
}
26+
<fieldset
27+
id="root"
4528
>
4629
<div
47-
className="ant-col ant-col-24 css-dev-only-do-not-override-ac2jek"
48-
style={
49-
{
50-
"paddingLeft": 12,
51-
"paddingRight": 12,
52-
}
53-
}
30+
class="ant-row css-dev-only-do-not-override-ac2jek"
31+
style="margin-left: -12px; margin-right: -12px;"
5432
>
5533
<div
56-
className="rjsf-field rjsf-field-string"
34+
class="ant-col ant-col-24 css-dev-only-do-not-override-ac2jek"
35+
style="padding-left: 12px; padding-right: 12px;"
5736
>
5837
<div
59-
className="ant-form-item css-dev-only-do-not-override-ac2jek ant-form-item-horizontal"
38+
class="rjsf-field rjsf-field-string"
6039
>
6140
<div
62-
className="ant-row ant-form-item-row css-dev-only-do-not-override-ac2jek"
63-
style={
64-
{
65-
"rowGap": undefined,
66-
}
67-
}
41+
class="ant-form-item css-dev-only-do-not-override-ac2jek ant-form-item-horizontal"
6842
>
6943
<div
70-
className="ant-col ant-col-24 ant-form-item-label css-dev-only-do-not-override-ac2jek"
71-
style={{}}
44+
class="ant-row ant-form-item-row css-dev-only-do-not-override-ac2jek"
7245
>
73-
<label
74-
className=""
75-
htmlFor="root_my-field"
76-
title="my-field"
46+
<div
47+
class="ant-col ant-col-24 ant-form-item-label css-dev-only-do-not-override-ac2jek"
7748
>
78-
my-field
79-
<span
80-
aria-describedby="test-id"
81-
aria-label="question-circle"
82-
className="anticon anticon-question-circle ant-form-item-tooltip"
83-
onClick={[Function]}
84-
onMouseEnter={[Function]}
85-
onMouseLeave={[Function]}
86-
onPointerEnter={[Function]}
87-
onPointerLeave={[Function]}
88-
role="img"
89-
tabIndex={null}
90-
title=""
49+
<label
50+
class=""
51+
for="root_my-field"
52+
title="my-field"
9153
>
92-
<svg
93-
aria-hidden="true"
94-
data-icon="question-circle"
95-
fill="currentColor"
96-
focusable="false"
97-
height="1em"
98-
viewBox="64 64 896 896"
99-
width="1em"
54+
my-field
55+
<span
56+
aria-describedby="test-id"
57+
aria-label="question-circle"
58+
class="anticon anticon-question-circle ant-form-item-tooltip"
59+
role="img"
60+
title=""
10061
>
101-
<path
102-
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"
103-
/>
104-
<path
105-
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"
106-
/>
107-
</svg>
108-
</span>
109-
</label>
110-
</div>
111-
<div
112-
className="ant-col ant-col-24 ant-form-item-control css-dev-only-do-not-override-ac2jek"
113-
style={{}}
114-
>
62+
<svg
63+
aria-hidden="true"
64+
data-icon="question-circle"
65+
fill="currentColor"
66+
focusable="false"
67+
height="1em"
68+
viewBox="64 64 896 896"
69+
width="1em"
70+
>
71+
<path
72+
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"
73+
/>
74+
<path
75+
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"
76+
/>
77+
</svg>
78+
</span>
79+
</label>
80+
</div>
11581
<div
116-
className="ant-form-item-control-input"
82+
class="ant-col ant-col-24 ant-form-item-control css-dev-only-do-not-override-ac2jek"
11783
>
11884
<div
119-
className="ant-form-item-control-input-content"
85+
class="ant-form-item-control-input"
12086
>
121-
<span
122-
className="ant-input-affix-wrapper css-dev-only-do-not-override-ac2jek ant-input-outlined"
123-
onClick={[Function]}
124-
style={
125-
{
126-
"width": "100%",
127-
}
128-
}
87+
<div
88+
class="ant-form-item-control-input-content"
12989
>
130-
<input
131-
aria-describedby="root_my-field__error root_my-field__description root_my-field__help"
132-
className="ant-input css-dev-only-do-not-override-ac2jek"
133-
disabled={false}
134-
id="root_my-field"
135-
name="root_my-field"
136-
onBlur={[Function]}
137-
onChange={[Function]}
138-
onCompositionEnd={[Function]}
139-
onCompositionStart={[Function]}
140-
onFocus={[Function]}
141-
onKeyDown={[Function]}
142-
onKeyUp={[Function]}
143-
placeholder=""
144-
type="text"
145-
value=""
146-
/>
14790
<span
148-
className="ant-input-suffix"
149-
/>
150-
</span>
91+
class="ant-input-affix-wrapper css-dev-only-do-not-override-ac2jek ant-input-outlined"
92+
style="width: 100%;"
93+
>
94+
<input
95+
aria-describedby="root_my-field__error root_my-field__description root_my-field__help"
96+
class="ant-input css-dev-only-do-not-override-ac2jek"
97+
id="root_my-field"
98+
name="root_my-field"
99+
placeholder=""
100+
type="text"
101+
value=""
102+
/>
103+
<span
104+
class="ant-input-suffix"
105+
/>
106+
</span>
107+
</div>
151108
</div>
152109
</div>
153110
</div>
154111
</div>
155112
</div>
156113
</div>
157114
</div>
158-
</div>
159-
</fieldset>
115+
</fieldset>
116+
</div>
160117
</div>
161118
</div>
162119
</div>
163120
</div>
164121
</div>
165-
</div>
166-
<button
167-
className="ant-btn css-dev-only-do-not-override-ac2jek ant-btn-submit"
168-
disabled={false}
169-
onClick={[Function]}
170-
style={{}}
171-
type="submit"
172-
>
173-
<span>
174-
Submit
175-
</span>
176-
</button>
177-
</form>
122+
<button
123+
class="ant-btn css-dev-only-do-not-override-ac2jek ant-btn-submit"
124+
type="submit"
125+
>
126+
<span>
127+
Submit
128+
</span>
129+
</button>
130+
</form>
131+
</DocumentFragment>
178132
`;
179133

180134
exports[`nameGenerator bracketNameGenerator array of objects 1`] = `

‎packages/chakra-ui/jest.config.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@
44
"testEnvironmentOptions": {
55
"browsers": ["chrome", "firefox", "safari"]
66
},
7-
"setupFilesAfterEnv": ["./test/setup-jest-env.js"],
7+
"setupFilesAfterEnv": ["./test/setup-jest-env.js", "../../testing/testSetup.ts"],
88
"transformIgnorePatterns": ["/node_modules/(?!deep-freeze-es6)"]
99
}

‎packages/chakra-ui/test/WrappedForm.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
1-
import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
1+
import { ChakraProvider, defaultSystem, EnvironmentProvider } from '@chakra-ui/react';
22
import { FormProps } from '@rjsf/core';
33

44
import Form from '../src';
55

66
export default function WrappedForm(props: FormProps) {
77
return (
8-
<ChakraProvider value={defaultSystem}>
9-
<Form {...props} />
10-
</ChakraProvider>
8+
<EnvironmentProvider environment={{ document, window }}>
9+
<ChakraProvider value={defaultSystem}>
10+
<Form {...props} />
11+
</ChakraProvider>
12+
</EnvironmentProvider>
1113
);
1214
}

0 commit comments

Comments
 (0)