Skip to content

Commit f726039

Browse files
li-jia-nanli-jia-nan
committed
add
1 parent 6c33861 commit f726039

File tree

5 files changed

+56
-82
lines changed

5 files changed

+56
-82
lines changed

‎tests/common/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import timeout from './timeout';
44
import { Field } from '../../src';
55
import { getNamePath, matchNamePath } from '../../src/utils/valueUtil';
66

7-
export async function changeValue(wrapper, value) {
7+
export async function changeValue(wrapper: ReactWrapper, value: string | string[]) {
88
wrapper.find('input').simulate('change', { target: { value } });
99
await act(async () => {
1010
await timeout();

‎tests/context.test.tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import { mount } from 'enzyme';
33
import { render } from '@testing-library/react';
4+
import type { FormInstance } from '../src';
45
import Form, { FormProvider } from '../src';
56
import InfoField from './common/InfoField';
67
import { changeValue, matchError, getField } from './common';
@@ -78,7 +79,7 @@ describe('Form.Context', () => {
7879
it('multiple context', async () => {
7980
const onFormChange = jest.fn();
8081

81-
const Demo = changed => (
82+
const Demo: React.FC<{ changed?: boolean }> = ({ changed }) => (
8283
<FormProvider onFormChange={onFormChange}>
8384
<FormProvider>
8485
{!changed ? (
@@ -106,17 +107,12 @@ describe('Form.Context', () => {
106107

107108
it('submit', async () => {
108109
const onFormFinish = jest.fn();
109-
let form1;
110+
const form = React.createRef<FormInstance>();
110111

111112
const wrapper = mount(
112113
<div>
113114
<FormProvider onFormFinish={onFormFinish}>
114-
<Form
115-
name="form1"
116-
ref={instance => {
117-
form1 = instance;
118-
}}
119-
>
115+
<Form name="form1" ref={form}>
120116
<InfoField name="name" rules={[{ required: true }]} />
121117
</Form>
122118
<Form name="form2" />
@@ -125,12 +121,12 @@ describe('Form.Context', () => {
125121
);
126122

127123
await changeValue(getField(wrapper), '');
128-
form1.submit();
124+
form.current?.submit();
129125
await timeout();
130126
expect(onFormFinish).not.toHaveBeenCalled();
131127

132128
await changeValue(getField(wrapper), 'Light');
133-
form1.submit();
129+
form.current?.submit();
134130
await timeout();
135131
expect(onFormFinish).toHaveBeenCalled();
136132

‎tests/control.test.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,25 @@ import { mount } from 'enzyme';
33
import Form from '../src';
44
import InfoField from './common/InfoField';
55
import { changeValue, matchError } from './common';
6+
import { render } from '@testing-library/react';
67

78
describe('Form.Control', () => {
89
it('fields', () => {
9-
const wrapper = mount(
10+
const { container, rerender } = render(
1011
<Form>
1112
<InfoField name="username" />
1213
</Form>,
1314
);
14-
15-
wrapper.setProps({
16-
fields: [{ name: 'username', value: 'Bamboo' }],
17-
});
18-
wrapper.update();
19-
20-
expect(wrapper.find('input').props().value).toEqual('Bamboo');
15+
rerender(
16+
<Form fields={[{ name: 'username', value: 'Bamboo' }]}>
17+
<InfoField name="username" />
18+
</Form>,
19+
);
20+
expect(container.querySelector<HTMLInputElement>('input')?.value).toBe('Bamboo');
2121
});
2222

2323
it('fully test', async () => {
24-
const Test = () => {
24+
const Test: React.FC = () => {
2525
const [fields, setFields] = React.useState([]);
2626

2727
return (

‎tests/dependencies.test.tsx‎

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,18 @@
11
import React from 'react';
22
import { mount } from 'enzyme';
3+
import type { FormInstance } from '../src';
34
import Form, { Field } from '../src';
45
import timeout from './common/timeout';
56
import InfoField, { Input } from './common/InfoField';
67
import { changeValue, matchError, getField } from './common';
78

89
describe('Form.Dependencies', () => {
910
it('touched', async () => {
10-
let form = null;
11+
const form = React.createRef<FormInstance>();
1112

1213
const wrapper = mount(
1314
<div>
14-
<Form
15-
ref={instance => {
16-
form = instance;
17-
}}
18-
>
15+
<Form ref={form}>
1916
<InfoField name="field_1" />
2017
<InfoField name="field_2" rules={[{ required: true }]} dependencies={['field_1']} />
2118
</Form>
@@ -27,13 +24,13 @@ describe('Form.Dependencies', () => {
2724
matchError(getField(wrapper, 1), false);
2825

2926
// Trigger if touched
30-
form.setFields([{ name: 'field_2', touched: true }]);
27+
form.current?.setFields([{ name: 'field_2', touched: true }]);
3128
await changeValue(getField(wrapper, 0), '');
3229
matchError(getField(wrapper, 1), true);
3330
});
3431

3532
describe('initialValue', () => {
36-
function test(name, formProps, fieldProps = {}) {
33+
function test(name: string, formProps = {}, fieldProps = {}) {
3734
it(name, async () => {
3835
let validated = false;
3936

@@ -68,16 +65,12 @@ describe('Form.Dependencies', () => {
6865
});
6966

7067
it('nest dependencies', async () => {
71-
let form = null;
68+
const form = React.createRef<FormInstance>();
7269
let rendered = false;
7370

7471
const wrapper = mount(
7572
<div>
76-
<Form
77-
ref={instance => {
78-
form = instance;
79-
}}
80-
>
73+
<Form ref={form}>
8174
<Field name="field_1">
8275
<Input />
8376
</Field>
@@ -94,7 +87,7 @@ describe('Form.Dependencies', () => {
9487
</div>,
9588
);
9689

97-
form.setFields([
90+
form.current?.setFields([
9891
{ name: 'field_1', touched: true },
9992
{ name: 'field_2', touched: true },
10093
{ name: 'field_3', touched: true },

‎tests/index.test.tsx‎

Lines changed: 32 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { mount } from 'enzyme';
2-
import { render } from '@testing-library/react';
2+
import { fireEvent, render } from '@testing-library/react';
33
import { resetWarned } from 'rc-util/lib/warning';
44
import React from 'react';
55
import type { FormInstance } from '../src';
@@ -218,15 +218,14 @@ describe('Form.Basic', () => {
218218

219219
it('remove Field should trigger onMetaChange', () => {
220220
const onMetaChange = jest.fn();
221-
const wrapper = mount(
221+
const { unmount } = render(
222222
<Form>
223223
<Field name="username" onMetaChange={onMetaChange}>
224224
<Input />
225225
</Field>
226226
</Form>,
227227
);
228-
229-
wrapper.unmount();
228+
unmount();
230229
expect(onMetaChange).toHaveBeenCalledWith(expect.objectContaining({ destroy: true }));
231230
});
232231
});
@@ -349,7 +348,7 @@ describe('Form.Basic', () => {
349348
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
350349

351350
const form = React.createRef<FormInstance>();
352-
mount(
351+
render(
353352
<div>
354353
<Form ref={form} />
355354
</div>,
@@ -497,7 +496,7 @@ describe('Form.Basic', () => {
497496
const triggerUpdate = jest.fn();
498497
const formRef = React.createRef<FormInstance>();
499498

500-
const wrapper = mount(
499+
render(
501500
<div>
502501
<Form ref={formRef}>
503502
<Field shouldUpdate={(prev, next) => prev.value !== next.value}>
@@ -509,17 +508,17 @@ describe('Form.Basic', () => {
509508
</Form>
510509
</div>,
511510
);
512-
wrapper.update();
511+
513512
triggerUpdate.mockReset();
514513

515514
// Not trigger render
516515
formRef.current.setFields([{ name: 'others', value: 'no need to update' }]);
517-
wrapper.update();
516+
518517
expect(triggerUpdate).not.toHaveBeenCalled();
519518

520519
// Trigger render
521520
formRef.current.setFields([{ name: 'value', value: 'should update' }]);
522-
wrapper.update();
521+
523522
expect(triggerUpdate).toHaveBeenCalled();
524523
});
525524
});
@@ -528,7 +527,7 @@ describe('Form.Basic', () => {
528527
let called1 = false;
529528
let called2 = false;
530529

531-
mount(
530+
render(
532531
<Form>
533532
<Field name="Light">
534533
{(_, meta) => {
@@ -602,7 +601,7 @@ describe('Form.Basic', () => {
602601
it('warning if invalidate element', () => {
603602
resetWarned();
604603
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
605-
mount(
604+
render(
606605
<div>
607606
<Form>
608607
{/* @ts-ignore */}
@@ -624,14 +623,14 @@ describe('Form.Basic', () => {
624623
resetWarned();
625624
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
626625

627-
const Test = () => {
626+
const Test: React.FC = () => {
628627
const [form] = useForm();
629628
form.getFieldsValue();
630629

631630
return <Form />;
632631
};
633632

634-
mount(<Test />);
633+
render(<Test />);
635634

636635
jest.runAllTimers();
637636
expect(errorSpy).toHaveBeenCalledWith(
@@ -682,15 +681,15 @@ describe('Form.Basic', () => {
682681
};
683682
return <Input value={value} onChange={onInputChange} />;
684683
};
685-
const wrapper = mount(
684+
const { container } = render(
686685
<Form>
687686
<Field name="user">
688687
<CustomInput />
689688
</Field>
690689
</Form>,
691690
);
692691
expect(() => {
693-
wrapper.find('Input').simulate('change', { event: { target: { value: 'Light' } } });
692+
fireEvent.change(container.querySelector('input'), { target: { value: 'Light' } });
694693
}).not.toThrowError();
695694
});
696695

@@ -739,11 +738,10 @@ describe('Form.Basic', () => {
739738
</Form>
740739
);
741740
};
742-
743-
const wrapper = mount(<Demo />);
744-
expect(wrapper.find('input').first().getDOMNode<HTMLInputElement>().value).toBe('11');
745-
wrapper.find('.reset-btn').first().simulate('click');
746-
expect(wrapper.find('input').length).toBe(0);
741+
const { container } = render(<Demo />);
742+
expect(container.querySelector<HTMLInputElement>('input')?.value).toBe('11');
743+
fireEvent.click(container.querySelector('.reset-btn'));
744+
expect(container.querySelectorAll<HTMLInputElement>('input').length).toBe(0);
747745
});
748746

749747
it('setFieldsValue should work for multiple Select', () => {
@@ -767,8 +765,8 @@ describe('Form.Basic', () => {
767765
);
768766
};
769767

770-
const wrapper = mount(<Demo />);
771-
expect(wrapper.find('.select-div').text()).toBe('K1,K2');
768+
const { container } = render(<Demo />);
769+
expect(container.querySelector('.select-div').textContent).toBe('K1,K2');
772770
});
773771

774772
// https://github.com/ant-design/ant-design/issues/34768
@@ -793,16 +791,11 @@ describe('Form.Basic', () => {
793791
return node;
794792
};
795793

796-
const wrapper = mount(<Demo />);
794+
const { container, rerender } = render(<Demo />);
797795
refForm.setFieldsValue({ name: 'bamboo' });
798-
wrapper.update();
799-
800-
expect(wrapper.find('input').prop('value')).toEqual('bamboo');
801-
802-
wrapper.setProps({ remount: true });
803-
wrapper.update();
804-
805-
expect(wrapper.find('input').prop('value')).toEqual('bamboo');
796+
expect(container.querySelector<HTMLInputElement>('input').value).toBe('bamboo');
797+
rerender(<Demo remount />);
798+
expect(container.querySelector<HTMLInputElement>('input').value).toBe('bamboo');
806799
});
807800

808801
it('setFieldValue', () => {
@@ -813,37 +806,29 @@ describe('Form.Basic', () => {
813806
<Form.List name="list">
814807
{fields =>
815808
fields.map(field => (
816-
<Field key={field.key} {...field}>
809+
<Field {...field} key={field.key}>
817810
<Input />
818811
</Field>
819812
))
820813
}
821814
</Form.List>
822-
823815
<Field name={['nest', 'target']} initialValue="nested">
824816
<Input />
825817
</Field>
826818
</Form>
827819
);
828820

829-
const wrapper = mount(<Demo />);
830-
expect(wrapper.find('input').map(input => input.prop('value'))).toEqual([
831-
'bamboo',
832-
'little',
833-
'light',
834-
'nested',
835-
]);
821+
const { container } = render(<Demo />);
822+
expect(
823+
Array.from(container.querySelectorAll<HTMLInputElement>('input')).map(input => input?.value),
824+
).toEqual(['bamboo', 'little', 'light', 'nested']);
836825

837826
// Set
838827
formRef.current.setFieldValue(['list', 1], 'tiny');
839828
formRef.current.setFieldValue(['nest', 'target'], 'match');
840-
wrapper.update();
841829

842-
expect(wrapper.find('input').map(input => input.prop('value'))).toEqual([
843-
'bamboo',
844-
'tiny',
845-
'light',
846-
'match',
847-
]);
830+
expect(
831+
Array.from(container.querySelectorAll<HTMLInputElement>('input')).map(input => input?.value),
832+
).toEqual(['bamboo', 'tiny', 'light', 'match']);
848833
});
849834
});

0 commit comments

Comments
 (0)