Skip to content

Chore update object snapshots test to use @testing-library/react #4847

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 4, 2025
+33,323 −51,852
Merged

Chore update object snapshots test to use @testing-library/react #4847

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11,593 changes: 4,474 additions & 7,119 deletions packages/antd/test/__snapshots__/Object.test.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

2,480 changes: 965 additions & 1,515 deletions packages/chakra-ui/test/__snapshots__/Object.test.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

4,379 changes: 1,964 additions & 2,415 deletions packages/core/test/__snapshots__/ObjectSnap.test.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

7,872 changes: 3,618 additions & 4,254 deletions packages/daisyui/test/__snapshots__/Object.test.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

6,448 changes: 2,848 additions & 3,600 deletions packages/fluentui-rc/test/__snapshots__/Object.test.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

19,682 changes: 5,671 additions & 14,011 deletions packages/mantine/test/__snapshots__/Object.test.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

8,347 changes: 3,404 additions & 4,943 deletions packages/mui/test/__snapshots__/Object.test.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

6,552 changes: 2,405 additions & 4,147 deletions packages/primereact/test/__snapshots__/Object.test.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

6,289 changes: 2,710 additions & 3,579 deletions packages/react-bootstrap/test/__snapshots__/Object.test.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

4,501 changes: 2,000 additions & 2,501 deletions packages/semantic-ui/test/__snapshots__/Object.test.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

6,850 changes: 3,176 additions & 3,674 deletions packages/shadcn/test/__snapshots__/Object.test.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

182 changes: 88 additions & 94 deletions packages/snapshot-tests/src/objectTests.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ComponentType } from 'react';
import renderer from 'react-test-renderer';
import { render } from '@testing-library/react';
import { FormProps } from '@rjsf/core';
import { RJSFSchema, UiSchema, bracketNameGenerator, dotNotationNameGenerator } from '@rjsf/utils';
import validator from '@rjsf/validator-ajv8';
Expand Down Expand Up @@ -40,37 +40,37 @@ const labelsOff: UiSchema = {

export function objectTests(Form: ComponentType<FormProps>) {
describe('object fields', () => {
test('object', () => {
test('object', async () => {
const schema: RJSFSchema = {
type: 'object',
properties: {
a: { type: 'string', title: 'A' },
b: { type: 'number', title: 'B' },
},
};
const tree = renderer.create(<Form schema={schema} validator={validator} />).toJSON();
expect(tree).toMatchSnapshot();
const { asFragment } = render(<Form schema={schema} validator={validator} />);
expect(asFragment()).toMatchSnapshot();
});
test('additionalProperties', () => {
test('additionalProperties', async () => {
const schema: RJSFSchema = {
type: 'object',
additionalProperties: true,
};
const tree = renderer.create(<Form schema={schema} validator={validator} formData={{ foo: 'foo' }} />).toJSON();
expect(tree).toMatchSnapshot();
const { asFragment } = render(<Form schema={schema} validator={validator} formData={{ foo: 'foo' }} />);
expect(asFragment()).toMatchSnapshot();
});
test('show add button and fields if additionalProperties is true and not an object', () => {
test('show add button and fields if additionalProperties is true and not an object', async () => {
const schema: RJSFSchema = {
additionalProperties: true,
};
const formData: any = {
additionalProperty: 'should appear',
};
const tree = renderer.create(<Form schema={schema} validator={validator} formData={formData} />).toJSON();
expect(tree).toMatchSnapshot();
const { asFragment } = render(<Form schema={schema} validator={validator} formData={formData} />);
expect(asFragment()).toMatchSnapshot();
});
describe('with title and description', () => {
test('object', () => {
test('object', async () => {
const schema: RJSFSchema = {
type: 'object',
...titleAndDesc,
Expand All @@ -79,67 +79,67 @@ export function objectTests(Form: ComponentType<FormProps>) {
b: { type: 'number', title: 'B', description: 'B description' },
},
};
const tree = renderer.create(<Form schema={schema} validator={validator} />).toJSON();
expect(tree).toMatchSnapshot();
const { asFragment } = render(<Form schema={schema} validator={validator} />);
expect(asFragment()).toMatchSnapshot();
});
test('additionalProperties', () => {
test('additionalProperties', async () => {
const schema: RJSFSchema = {
type: 'object',
...titleAndDesc,
additionalProperties: true,
};
const tree = renderer.create(<Form schema={schema} validator={validator} formData={{ foo: 'foo' }} />).toJSON();
expect(tree).toMatchSnapshot();
const { asFragment } = render(<Form schema={schema} validator={validator} formData={{ foo: 'foo' }} />);
expect(asFragment()).toMatchSnapshot();
});
test('show add button and fields if additionalProperties is true and not an object', () => {
test('show add button and fields if additionalProperties is true and not an object', async () => {
const schema: RJSFSchema = {
...titleAndDesc,
additionalProperties: true,
};
const formData: any = {
additionalProperty: 'should appear',
};
const tree = renderer.create(<Form schema={schema} validator={validator} formData={formData} />).toJSON();
expect(tree).toMatchSnapshot();
const { asFragment } = render(<Form schema={schema} validator={validator} formData={formData} />);
expect(asFragment()).toMatchSnapshot();
});
});
describe('with title and description from uiSchema', () => {
test('object', () => {
test('object', async () => {
const schema: RJSFSchema = {
type: 'object',
properties: {
a: { type: 'string', title: 'A' },
b: { type: 'number', title: 'B' },
},
};
const tree = renderer.create(<Form schema={schema} uiSchema={uiTitleAndDesc} validator={validator} />).toJSON();
expect(tree).toMatchSnapshot();
const { asFragment } = render(<Form schema={schema} uiSchema={uiTitleAndDesc} validator={validator} />);
expect(asFragment()).toMatchSnapshot();
});
test('additionalProperties', () => {
test('additionalProperties', async () => {
const schema: RJSFSchema = {
type: 'object',
additionalProperties: true,
};
const tree = renderer
.create(<Form schema={schema} uiSchema={uiTitleAndDesc} validator={validator} formData={{ foo: 'foo' }} />)
.toJSON();
expect(tree).toMatchSnapshot();
const { asFragment } = render(
<Form schema={schema} uiSchema={uiTitleAndDesc} validator={validator} formData={{ foo: 'foo' }} />,
);
expect(asFragment()).toMatchSnapshot();
});
test('show add button and fields if additionalProperties is true and not an object', () => {
test('show add button and fields if additionalProperties is true and not an object', async () => {
const schema: RJSFSchema = {
additionalProperties: true,
};
const formData: any = {
additionalProperty: 'should appear',
};
const tree = renderer
.create(<Form schema={schema} uiSchema={uiTitleAndDesc} validator={validator} formData={formData} />)
.toJSON();
expect(tree).toMatchSnapshot();
const { asFragment } = render(
<Form schema={schema} uiSchema={uiTitleAndDesc} validator={validator} formData={formData} />,
);
expect(asFragment()).toMatchSnapshot();
});
});
describe('with title and description from both', () => {
test('object', () => {
test('object', async () => {
const schema: RJSFSchema = {
type: 'object',
...titleAndDesc,
Expand All @@ -148,23 +148,23 @@ export function objectTests(Form: ComponentType<FormProps>) {
b: { type: 'number', title: 'B', description: 'B description' },
},
};
const tree = renderer.create(<Form schema={schema} uiSchema={uiTitleAndDesc} validator={validator} />).toJSON();
expect(tree).toMatchSnapshot();
const { asFragment } = render(<Form schema={schema} uiSchema={uiTitleAndDesc} validator={validator} />);
expect(asFragment()).toMatchSnapshot();
});
test('additionalProperties', () => {
test('additionalProperties', async () => {
const schema: RJSFSchema = {
type: 'object',
...titleAndDesc,
additionalProperties: true,
};
const tree = renderer
.create(<Form schema={schema} uiSchema={uiTitleAndDesc} validator={validator} formData={{ foo: 'foo' }} />)
.toJSON();
expect(tree).toMatchSnapshot();
const { asFragment } = render(
<Form schema={schema} uiSchema={uiTitleAndDesc} validator={validator} formData={{ foo: 'foo' }} />,
);
expect(asFragment()).toMatchSnapshot();
});
});
describe('with title and description with global label off', () => {
test('object', () => {
test('object', async () => {
const schema: RJSFSchema = {
type: 'object',
...titleAndDesc,
Expand All @@ -173,39 +173,39 @@ export function objectTests(Form: ComponentType<FormProps>) {
b: { type: 'number', title: 'B', description: 'B description' },
},
};
const tree = renderer.create(<Form schema={schema} uiSchema={labelsOff} validator={validator} />).toJSON();
expect(tree).toMatchSnapshot();
const { asFragment } = render(<Form schema={schema} uiSchema={labelsOff} validator={validator} />);
expect(asFragment()).toMatchSnapshot();
});
test('additionalProperties', () => {
test('additionalProperties', async () => {
const schema: RJSFSchema = {
type: 'object',
...titleAndDesc,
additionalProperties: true,
};
const tree = renderer
.create(<Form schema={schema} uiSchema={labelsOff} validator={validator} formData={{ foo: 'foo' }} />)
.toJSON();
expect(tree).toMatchSnapshot();
const { asFragment } = render(
<Form schema={schema} uiSchema={labelsOff} validator={validator} formData={{ foo: 'foo' }} />,
);
expect(asFragment()).toMatchSnapshot();
});
test('show add button and fields if additionalProperties is true and not an object', () => {
test('show add button and fields if additionalProperties is true and not an object', async () => {
const schema: RJSFSchema = {
...titleAndDesc,
additionalProperties: true,
};
const formData: any = {
additionalProperty: 'should appear',
};
const tree = renderer
.create(<Form schema={schema} uiSchema={labelsOff} validator={validator} formData={formData} />)
.toJSON();
expect(tree).toMatchSnapshot();
const { asFragment } = render(
<Form schema={schema} uiSchema={labelsOff} validator={validator} formData={formData} />,
);
expect(asFragment()).toMatchSnapshot();
});
});
});

describe('nameGenerator', () => {
describe('bracketNameGenerator', () => {
test('simple object', () => {
test('simple object', async () => {
const schema: RJSFSchema = {
type: 'object',
properties: {
Expand All @@ -214,13 +214,13 @@ export function objectTests(Form: ComponentType<FormProps>) {
age: { type: 'number' },
},
};
const tree = renderer
.create(<Form schema={schema} validator={validator} nameGenerator={bracketNameGenerator} />)
.toJSON();
expect(tree).toMatchSnapshot();
const { asFragment } = render(
<Form schema={schema} validator={validator} nameGenerator={bracketNameGenerator} />,
);
expect(asFragment()).toMatchSnapshot();
});

test('nested object', () => {
test('nested object', async () => {
const schema: RJSFSchema = {
type: 'object',
properties: {
Expand All @@ -240,13 +240,13 @@ export function objectTests(Form: ComponentType<FormProps>) {
},
},
};
const tree = renderer
.create(<Form schema={schema} validator={validator} nameGenerator={bracketNameGenerator} />)
.toJSON();
expect(tree).toMatchSnapshot();
const { asFragment } = render(
<Form schema={schema} validator={validator} nameGenerator={bracketNameGenerator} />,
);
expect(asFragment()).toMatchSnapshot();
});

test('object with additionalProperties', () => {
test('object with additionalProperties', async () => {
const schema: RJSFSchema = {
type: 'object',
properties: {
Expand All @@ -258,15 +258,13 @@ export function objectTests(Form: ComponentType<FormProps>) {
name: 'John',
customField: 'customValue',
};
const tree = renderer
.create(
<Form schema={schema} formData={formData} validator={validator} nameGenerator={bracketNameGenerator} />,
)
.toJSON();
expect(tree).toMatchSnapshot();
const { asFragment } = render(
<Form schema={schema} formData={formData} validator={validator} nameGenerator={bracketNameGenerator} />,
);
expect(asFragment()).toMatchSnapshot();
});

test('object with mixed types', () => {
test('object with mixed types', async () => {
const schema: RJSFSchema = {
type: 'object',
properties: {
Expand All @@ -285,17 +283,15 @@ export function objectTests(Form: ComponentType<FormProps>) {
active: true,
tags: ['developer', 'designer'],
};
const tree = renderer
.create(
<Form schema={schema} formData={formData} validator={validator} nameGenerator={bracketNameGenerator} />,
)
.toJSON();
expect(tree).toMatchSnapshot();
const { asFragment } = render(
<Form schema={schema} formData={formData} validator={validator} nameGenerator={bracketNameGenerator} />,
);
expect(asFragment()).toMatchSnapshot();
});
});

describe('dotNotationNameGenerator', () => {
test('simple object', () => {
test('simple object', async () => {
const schema: RJSFSchema = {
type: 'object',
properties: {
Expand All @@ -304,13 +300,13 @@ export function objectTests(Form: ComponentType<FormProps>) {
age: { type: 'number' },
},
};
const tree = renderer
.create(<Form schema={schema} validator={validator} nameGenerator={dotNotationNameGenerator} />)
.toJSON();
expect(tree).toMatchSnapshot();
const { asFragment } = render(
<Form schema={schema} validator={validator} nameGenerator={dotNotationNameGenerator} />,
);
expect(asFragment()).toMatchSnapshot();
});

test('nested object', () => {
test('nested object', async () => {
const schema: RJSFSchema = {
type: 'object',
properties: {
Expand All @@ -329,13 +325,13 @@ export function objectTests(Form: ComponentType<FormProps>) {
},
},
};
const tree = renderer
.create(<Form schema={schema} validator={validator} nameGenerator={dotNotationNameGenerator} />)
.toJSON();
expect(tree).toMatchSnapshot();
const { asFragment } = render(
<Form schema={schema} validator={validator} nameGenerator={dotNotationNameGenerator} />,
);
expect(asFragment()).toMatchSnapshot();
});

test('object with mixed types', () => {
test('object with mixed types', async () => {
const schema: RJSFSchema = {
type: 'object',
properties: {
Expand All @@ -352,12 +348,10 @@ export function objectTests(Form: ComponentType<FormProps>) {
count: 5,
items: ['a', 'b'],
};
const tree = renderer
.create(
<Form schema={schema} formData={formData} validator={validator} nameGenerator={dotNotationNameGenerator} />,
)
.toJSON();
expect(tree).toMatchSnapshot();
const { asFragment } = render(
<Form schema={schema} formData={formData} validator={validator} nameGenerator={dotNotationNameGenerator} />,
);
expect(asFragment()).toMatchSnapshot();
});
});
});
Expand Down