@@ -3506,7 +3501,6 @@ exports[`object fields with title and description with global label off show add
className="chakra-form-control emotion-0"
role="group"
>
-
diff --git a/packages/core/package.json b/packages/core/package.json
index 2864230b7b..2b00322720 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -60,9 +60,9 @@
"@rjsf/validator-ajv8": "^5.18.2",
"@types/jest": "^29.5.12",
"@types/lodash": "^4.14.202",
- "@types/react": "^17.0.75",
- "@types/react-dom": "^17.0.25",
- "@types/react-test-renderer": "^17.0.9",
+ "@types/react": "^18.2.58",
+ "@types/react-dom": "^18.2.19",
+ "@types/react-test-renderer": "^18.0.7",
"ajv": "^8.12.0",
"atob": "^2.1.2",
"babel-jest": "^29.7.0",
@@ -74,10 +74,10 @@
"jest-environment-jsdom": "^29.7.0",
"jsdom": "^20.0.3",
"mocha": "^10.2.0",
- "react": "^17.0.2",
- "react-dom": "^17.0.2",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
"react-portal": "^4.2.2",
- "react-test-renderer": "^17.0.2",
+ "react-test-renderer": "^18.2.0",
"rimraf": "^5.0.5",
"rollup": "^3.29.4",
"sinon": "^9.2.4",
diff --git a/packages/core/test/ArrayField.test.jsx b/packages/core/test/ArrayField.test.jsx
index 5174d72be1..5e36a22ed3 100644
--- a/packages/core/test/ArrayField.test.jsx
+++ b/packages/core/test/ArrayField.test.jsx
@@ -1,5 +1,6 @@
import { expect } from 'chai';
-import { Simulate, act } from 'react-dom/test-utils';
+import { Simulate } from 'react-dom/test-utils';
+import { fireEvent, act } from '@testing-library/react';
import sinon from 'sinon';
import { createFormComponent, createSandbox, submitForm } from './test_utils';
@@ -402,7 +403,9 @@ describe('ArrayField', () => {
it('should add a new field when clicking the add button', () => {
const { node } = createFormComponent({ schema });
- Simulate.click(node.querySelector('.array-item-add button'));
+ act(() => {
+ fireEvent.click(node.querySelector('.array-item-add button'));
+ });
expect(node.querySelectorAll('.field-string')).to.have.length.of(1);
});
@@ -413,7 +416,9 @@ describe('ArrayField', () => {
templates: { ArrayFieldTemplate: ExposedArrayKeyTemplate },
});
- Simulate.click(node.querySelector('.array-item-add button'));
+ act(() => {
+ fireEvent.click(node.querySelector('.array-item-add button'));
+ });
expect(node.querySelector('.array-item').hasAttribute(ArrayKeyDataAttr)).to.be.true;
});
@@ -424,7 +429,9 @@ describe('ArrayField', () => {
templates: { ArrayFieldTemplate: CustomOnAddClickTemplate },
});
- Simulate.click(node.querySelector('.array-item-add button'));
+ act(() => {
+ fireEvent.click(node.querySelector('.array-item-add button'));
+ });
expect(node.querySelector('.array-item')).not.to.be.null;
});
@@ -458,7 +465,9 @@ describe('ArrayField', () => {
const startRow1_key = startRows[0].getAttribute(ArrayKeyDataAttr);
const startRow2_key = startRows[1] ? startRows[1].getAttribute(ArrayKeyDataAttr) : undefined;
- Simulate.click(node.querySelector('.array-item-add button'));
+ act(() => {
+ fireEvent.click(node.querySelector('.array-item-add button'));
+ });
const endRows = node.querySelectorAll('.array-item');
const endRow1_key = endRows[0].getAttribute(ArrayKeyDataAttr);
@@ -524,8 +533,13 @@ describe('ArrayField', () => {
const startRow2_key = startRows[1].getAttribute(ArrayKeyDataAttr);
const startRow3_key = startRows[2].getAttribute(ArrayKeyDataAttr);
- Simulate.click(addBeforeButtons[0]);
- Simulate.click(addAfterButtons[0]);
+ act(() => {
+ fireEvent.click(addBeforeButtons[0]);
+ });
+
+ act(() => {
+ fireEvent.click(addAfterButtons[0]);
+ });
const endRows = node.querySelectorAll('.array-item');
const endRow2_key = endRows[1].getAttribute(ArrayKeyDataAttr);
@@ -574,7 +588,9 @@ describe('ArrayField', () => {
it('should mark a non-null array item widget as required', () => {
const { node } = createFormComponent({ schema });
- Simulate.click(node.querySelector('.array-item-add button'));
+ act(() => {
+ fireEvent.click(node.querySelector('.array-item-add button'));
+ });
expect(node.querySelector('.field-string input[type=text]').required).eql(true);
});
@@ -615,7 +631,9 @@ describe('ArrayField', () => {
});
const moveDownBtns = node.querySelectorAll('.array-item-move-down');
- Simulate.click(moveDownBtns[0]);
+ act(() => {
+ fireEvent.click(moveDownBtns[0]);
+ });
const inputs = node.querySelectorAll('.field-string input[type=text]');
expect(inputs).to.have.length.of(3);
@@ -631,7 +649,9 @@ describe('ArrayField', () => {
});
const moveUpBtns = node.querySelectorAll('.array-item-move-up');
- Simulate.click(moveUpBtns[2]);
+ act(() => {
+ fireEvent.click(moveUpBtns[2]);
+ });
const inputs = node.querySelectorAll('.field-string input[type=text]');
expect(inputs).to.have.length.of(3);
@@ -652,7 +672,9 @@ describe('ArrayField', () => {
const startRow2_key = startRows[1].getAttribute(ArrayKeyDataAttr);
const startRow3_key = startRows[2].getAttribute(ArrayKeyDataAttr);
- Simulate.click(moveDownBtns[0]);
+ act(() => {
+ fireEvent.click(moveDownBtns[0]);
+ });
const endRows = node.querySelectorAll('.array-item');
const endRow1_key = endRows[0].getAttribute(ArrayKeyDataAttr);
@@ -680,7 +702,9 @@ describe('ArrayField', () => {
const startRow2_key = startRows[1].getAttribute(ArrayKeyDataAttr);
const startRow3_key = startRows[2].getAttribute(ArrayKeyDataAttr);
- Simulate.click(moveUpBtns[2]);
+ act(() => {
+ fireEvent.click(moveUpBtns[2]);
+ });
const endRows = node.querySelectorAll('.array-item');
const endRow1_key = endRows[0].getAttribute(ArrayKeyDataAttr);
@@ -730,7 +754,9 @@ describe('ArrayField', () => {
const startRow3_key = startRows[2].getAttribute(ArrayKeyDataAttr);
const button = node.querySelector('.item-0 .array-item-move-to-2');
- Simulate.click(button);
+ act(() => {
+ fireEvent.click(button);
+ });
const inputs = node.querySelectorAll('.field-string input[type=text]');
expect(inputs[0].value).eql('bar');
@@ -811,7 +837,9 @@ describe('ArrayField', () => {
});
const dropBtns = node.querySelectorAll('.array-item-remove');
- Simulate.click(dropBtns[0]);
+ act(() => {
+ fireEvent.click(dropBtns[0]);
+ });
const inputs = node.querySelectorAll('.field-string input[type=text]');
expect(inputs).to.have.length.of(1);
@@ -825,11 +853,16 @@ describe('ArrayField', () => {
});
const deleteBtns = node.querySelectorAll('.array-item-remove');
- Simulate.click(deleteBtns[0]);
+ act(() => {
+ fireEvent.click(deleteBtns[0]);
+ });
const inputs = node.querySelectorAll('.field-string input[type=text]');
- Simulate.change(inputs[0], { target: { value: 'fuzz' } });
+ act(() => {
+ fireEvent.change(inputs[0], { target: { value: 'fuzz' } });
+ });
+
expect(inputs).to.have.length.of(2);
expect(inputs[0].value).eql('fuzz');
expect(inputs[1].value).eql('baz');
@@ -846,7 +879,9 @@ describe('ArrayField', () => {
const startRow2_key = startRows[1].getAttribute(ArrayKeyDataAttr);
const dropBtns = node.querySelectorAll('.array-item-remove');
- Simulate.click(dropBtns[0]);
+ act(() => {
+ fireEvent.click(dropBtns[0]);
+ });
const endRows = node.querySelectorAll('.array-item');
const endRow1_key = endRows[0].getAttribute(ArrayKeyDataAttr);
@@ -899,7 +934,9 @@ describe('ArrayField', () => {
});
try {
- Simulate.submit(node);
+ act(() => {
+ fireEvent.submit(node);
+ });
} catch (e) {
// Silencing error thrown as failure is expected here
}
@@ -908,7 +945,9 @@ describe('ArrayField', () => {
const dropBtns = node.querySelectorAll('.array-item-remove');
- Simulate.click(dropBtns[0]);
+ act(() => {
+ fireEvent.click(dropBtns[0]);
+ });
expect(node.querySelectorAll('.has-error .error-detail')).to.have.length.of(0);
});
@@ -964,7 +1003,9 @@ describe('ArrayField', () => {
});
const copyBtns = node.querySelectorAll('.array-item-copy');
- Simulate.click(copyBtns[0]);
+ act(() => {
+ fireEvent.click(copyBtns[0]);
+ });
const inputs = node.querySelectorAll('.field-string input[type=text]');
expect(inputs).to.have.length.of(3);
@@ -985,8 +1026,10 @@ describe('ArrayField', () => {
formData,
});
- Simulate.change(node.querySelector('#root_1'), {
- target: { value: '' },
+ act(() => {
+ fireEvent.change(node.querySelector('#root_1'), {
+ target: { value: '' },
+ });
});
sinon.assert.calledWithMatch(
@@ -1294,14 +1337,16 @@ describe('ArrayField', () => {
it('should handle a change event', () => {
const { node, onChange } = createFormComponent({ schema });
- Simulate.change(node.querySelector('.field select'), {
- target: {
- options: [
- { selected: true, value: 0 }, // use index
- { selected: true, value: 1 }, // use index
- { selected: false, value: 2 }, // use index
- ],
- },
+ act(() => {
+ Simulate.change(node.querySelector('.field select'), {
+ target: {
+ options: [
+ { selected: true, value: 0 }, // use index
+ { selected: true, value: 1 }, // use index
+ { selected: false, value: 2 }, // use index
+ ],
+ },
+ });
});
sinon.assert.calledWithMatch(
@@ -1433,11 +1478,11 @@ describe('ArrayField', () => {
uiSchema,
});
- Simulate.change(node.querySelectorAll('[type=checkbox]')[0], {
- target: { checked: true },
+ act(() => {
+ fireEvent.click(node.querySelectorAll('[type=checkbox]')[0]);
});
- Simulate.change(node.querySelectorAll('[type=checkbox]')[2], {
- target: { checked: true },
+ act(() => {
+ fireEvent.click(node.querySelectorAll('[type=checkbox]')[2]);
});
sinon.assert.calledWithMatch(
@@ -1459,8 +1504,8 @@ describe('ArrayField', () => {
let labels = [].map.call(node.querySelectorAll('[type=checkbox]'), (node) => node.checked);
expect(labels).eql([true, false, false]);
- Simulate.change(node.querySelectorAll('[type=checkbox]')[2], {
- target: { checked: true },
+ act(() => {
+ fireEvent.click(node.querySelectorAll('[type=checkbox]')[2]);
});
sinon.assert.calledWithMatch(
@@ -1594,13 +1639,17 @@ describe('ArrayField', () => {
const { node, onChange } = createFormComponent({ schema });
- Simulate.change(node.querySelector('.field input[type=file]'), {
- target: {
- files: [{ name: 'file1.txt', size: 1, type: 'type' }],
- },
+ act(() => {
+ fireEvent.change(node.querySelector('.field input[type=file]'), {
+ target: {
+ files: [{ name: 'file1.txt', size: 1, type: 'type' }],
+ },
+ });
});
- await new Promise(setImmediate);
+ await act(() => {
+ new Promise(setImmediate);
+ });
sinon.assert.calledWithMatch(
onChange.lastCall,
@@ -1610,13 +1659,17 @@ describe('ArrayField', () => {
'root'
);
- Simulate.change(node.querySelector('.field input[type=file]'), {
- target: {
- files: [{ name: 'file2.txt', size: 2, type: 'type' }],
- },
+ act(() => {
+ fireEvent.change(node.querySelector('.field input[type=file]'), {
+ target: {
+ files: [{ name: 'file2.txt', size: 2, type: 'type' }],
+ },
+ });
});
- await new Promise(setImmediate);
+ await act(() => {
+ new Promise(setImmediate);
+ });
sinon.assert.calledWithMatch(
onChange.lastCall,
@@ -1726,7 +1779,9 @@ describe('ArrayField', () => {
const { node } = createFormComponent({ schema });
expect(node.querySelectorAll('fieldset fieldset')).to.be.empty;
- Simulate.click(node.querySelector('.array-item-add button'));
+ act(() => {
+ fireEvent.click(node.querySelector('.array-item-add button'));
+ });
expect(node.querySelectorAll('fieldset fieldset')).to.have.length.of(1);
});
@@ -1850,8 +1905,13 @@ describe('ArrayField', () => {
const strInput = node.querySelector('fieldset .field-string input[type=text]');
const numInput = node.querySelector('fieldset .field-number input[type=number]');
- Simulate.change(strInput, { target: { value: 'bar' } });
- Simulate.change(numInput, { target: { value: '101' } });
+ act(() => {
+ fireEvent.change(strInput, { target: { value: 'bar' } });
+ });
+
+ act(() => {
+ fireEvent.change(numInput, { target: { value: '101' } });
+ });
sinon.assert.calledWithMatch(
onChange.lastCall,
@@ -2009,22 +2069,18 @@ describe('ArrayField', () => {
});
describe('operations for additional items', () => {
- const { node, onChange } = createFormComponent({
- schema: schemaAdditional,
- formData: [1, 2, 'foo'],
- templates: { ArrayFieldTemplate: ExposedArrayKeyTemplate },
- });
-
- const startRows = node.querySelectorAll('.array-item');
- const startRow1_key = startRows[0].getAttribute(ArrayKeyDataAttr);
- const startRow2_key = startRows[1].getAttribute(ArrayKeyDataAttr);
- const startRow3_key = startRows[2].getAttribute(ArrayKeyDataAttr);
- const startRow4_key = startRows[3] ? startRows[3].getAttribute(ArrayKeyDataAttr) : undefined;
-
it('should add a field when clicking add button', () => {
+ const { node, onChange } = createFormComponent({
+ schema: schemaAdditional,
+ formData: [1, 2, 'foo'],
+ templates: { ArrayFieldTemplate: ExposedArrayKeyTemplate },
+ });
+
const addBtn = node.querySelector('.array-item-add button');
- Simulate.click(addBtn);
+ act(() => {
+ fireEvent.click(addBtn);
+ });
expect(node.querySelectorAll('.field-string')).to.have.length.of(2);
@@ -2038,6 +2094,24 @@ describe('ArrayField', () => {
});
it('should retain existing row keys/ids when adding additional items', () => {
+ const { node } = createFormComponent({
+ schema: schemaAdditional,
+ formData: [1, 2, 'foo'],
+ templates: { ArrayFieldTemplate: ExposedArrayKeyTemplate },
+ });
+
+ const startRows = node.querySelectorAll('.array-item');
+ const startRow1_key = startRows[0].getAttribute(ArrayKeyDataAttr);
+ const startRow2_key = startRows[1].getAttribute(ArrayKeyDataAttr);
+ const startRow3_key = startRows[2].getAttribute(ArrayKeyDataAttr);
+ const startRow4_key = startRows[3] ? startRows[3].getAttribute(ArrayKeyDataAttr) : undefined;
+
+ const addBtn = node.querySelector('.array-item-add button');
+
+ act(() => {
+ fireEvent.click(addBtn);
+ });
+
const endRows = node.querySelectorAll('.array-item');
const endRow1_key = endRows[0].getAttribute(ArrayKeyDataAttr);
const endRow2_key = endRows[1].getAttribute(ArrayKeyDataAttr);
@@ -2057,10 +2131,27 @@ describe('ArrayField', () => {
});
it('should change the state when changing input value', () => {
+ const { node, onChange } = createFormComponent({
+ schema: schemaAdditional,
+ formData: [1, 2, 'foo'],
+ templates: { ArrayFieldTemplate: ExposedArrayKeyTemplate },
+ });
+
+ const addBtn = node.querySelector('.array-item-add button');
+
+ act(() => {
+ fireEvent.click(addBtn);
+ });
+
const inputs = node.querySelectorAll('.field-string input[type=text]');
- Simulate.change(inputs[0], { target: { value: 'bar' } });
- Simulate.change(inputs[1], { target: { value: 'baz' } });
+ act(() => {
+ fireEvent.change(inputs[0], { target: { value: 'bar' } });
+ });
+
+ act(() => {
+ fireEvent.change(inputs[1], { target: { value: 'baz' } });
+ });
sinon.assert.calledWithMatch(
onChange.lastCall,
@@ -2072,11 +2163,29 @@ describe('ArrayField', () => {
});
it('should remove array items when clicking remove buttons', () => {
+ const { node, onChange } = createFormComponent({
+ schema: schemaAdditional,
+ formData: [1, 2, 'foo'],
+ templates: { ArrayFieldTemplate: ExposedArrayKeyTemplate },
+ });
+
+ const addBtn = node.querySelector('.array-item-add button');
+
+ act(() => {
+ fireEvent.click(addBtn);
+ });
+
let dropBtns = node.querySelectorAll('.array-item-remove');
- Simulate.click(dropBtns[0]);
+ act(() => {
+ fireEvent.click(dropBtns[0]);
+ });
expect(node.querySelectorAll('.field-string')).to.have.length.of(1);
+ const inputs = node.querySelectorAll('.field-string input[type=text]');
+ act(() => {
+ fireEvent.change(inputs[0], { target: { value: 'baz' } });
+ });
sinon.assert.calledWithMatch(
onChange.lastCall,
@@ -2087,7 +2196,9 @@ describe('ArrayField', () => {
);
dropBtns = node.querySelectorAll('.array-item-remove');
- Simulate.click(dropBtns[0]);
+ act(() => {
+ fireEvent.click(dropBtns[0]);
+ });
expect(node.querySelectorAll('.field-string')).to.be.empty;
sinon.assert.calledWithMatch(
@@ -2115,14 +2226,16 @@ describe('ArrayField', () => {
it("should convert array of strings to numbers if type of items is 'number'", () => {
const { node, onChange } = createFormComponent({ schema });
- Simulate.change(node.querySelector('.field select'), {
- target: {
- options: [
- { selected: true, value: '0' }, // use index
- { selected: true, value: '1' }, // use index
- { selected: false, value: '2' }, // use index
- ],
- },
+ act(() => {
+ Simulate.change(node.querySelector('.field select'), {
+ target: {
+ options: [
+ { selected: true, value: '0' }, // use index
+ { selected: true, value: '1' }, // use index
+ { selected: false, value: '2' }, // use index
+ ],
+ },
+ });
});
sinon.assert.calledWithMatch(
@@ -2432,7 +2545,9 @@ describe('ArrayField', () => {
widgets,
});
- Simulate.click(node.querySelector('.array-item-add button'));
+ act(() => {
+ fireEvent.click(node.querySelector('.array-item-add button'));
+ });
expect(node.querySelector('#title-Array-1')).to.not.be.null;
});
@@ -2456,7 +2571,9 @@ describe('ArrayField', () => {
widgets,
});
- Simulate.click(node.querySelector('.array-item-add button'));
+ act(() => {
+ fireEvent.click(node.querySelector('.array-item-add button'));
+ });
expect(node.querySelector('#title-Boolean')).to.not.be.null;
expect(node.querySelector('#title-Array-1')).to.be.null;
@@ -2480,7 +2597,9 @@ describe('ArrayField', () => {
uiSchema,
});
- Simulate.click(node.querySelector('.array-item-add button'));
+ act(() => {
+ fireEvent.click(node.querySelector('.array-item-add button'));
+ });
expect(node.querySelector('label[for="root_0"]').textContent).to.contain('Array-1');
}
@@ -2507,7 +2626,9 @@ describe('ArrayField', () => {
uiSchema,
});
- Simulate.click(node.querySelector('.array-item-add button'));
+ act(() => {
+ fireEvent.click(node.querySelector('.array-item-add button'));
+ });
const widgetLabelTextContent = node.querySelector('label[for="root_0"]').textContent;
@@ -2607,7 +2728,9 @@ describe('ArrayField', () => {
schema,
});
- Simulate.click(node.querySelector('.array-item-add button'));
+ act(() => {
+ fireEvent.click(node.querySelector('.array-item-add button'));
+ });
expect(node.querySelector('legend#root_0__title').textContent).to.contain('Array-1');
}
@@ -2629,7 +2752,9 @@ describe('ArrayField', () => {
schema,
});
- Simulate.click(node.querySelector('.array-item-add button'));
+ act(() => {
+ fireEvent.click(node.querySelector('.array-item-add button'));
+ });
const legendTextContent = node.querySelector('legend#root_0__title').textContent;
@@ -2651,7 +2776,9 @@ describe('ArrayField', () => {
schema,
});
- Simulate.click(node.querySelector('.array-item-add button'));
+ act(() => {
+ fireEvent.click(node.querySelector('.array-item-add button'));
+ });
expect(node.querySelector('label[for="root_0"]').textContent).to.contain('Array-1');
}
@@ -2673,7 +2800,9 @@ describe('ArrayField', () => {
schema,
});
- Simulate.click(node.querySelector('.array-item-add button'));
+ act(() => {
+ fireEvent.click(node.querySelector('.array-item-add button'));
+ });
const labelTextContent = node.querySelector('label[for="root_0"]').textContent;
@@ -2750,7 +2879,10 @@ describe('ArrayField', () => {
},
customValidate,
});
- Simulate.submit(node);
+
+ act(() => {
+ fireEvent.submit(node);
+ });
const inputs = node.querySelectorAll('.form-group.field-error input[type=text]');
expect(inputs[0].id).eql('root_foo_0_bar');
@@ -2768,7 +2900,7 @@ describe('ArrayField', () => {
customValidate,
showErrorList: false,
});
- Simulate.submit(node);
+ fireEvent.submit(node);
const inputsNoError = node.querySelectorAll('.form-group.field-error input[type=text]');
expect(inputsNoError).to.have.length.of(0);
diff --git a/packages/core/test/BooleanField.test.jsx b/packages/core/test/BooleanField.test.jsx
index 6de3d08e44..5a6817b474 100644
--- a/packages/core/test/BooleanField.test.jsx
+++ b/packages/core/test/BooleanField.test.jsx
@@ -1,5 +1,5 @@
import { expect } from 'chai';
-import { Simulate } from 'react-dom/test-utils';
+import { fireEvent, act } from '@testing-library/react';
import sinon from 'sinon';
import { createFormComponent, createSandbox, getSelectedOptionValue, submitForm } from './test_utils';
@@ -319,9 +319,10 @@ describe('BooleanField', () => {
},
});
- Simulate.change(node.querySelector('input'), {
- target: { checked: true },
+ act(() => {
+ fireEvent.click(node.querySelector('input'));
});
+
sinon.assert.calledWithMatch(onChange.lastCall, { formData: true }, 'root');
});
@@ -464,7 +465,7 @@ describe('BooleanField', () => {
});
const element = node.querySelector('.field-radio-group');
- Simulate.focus(node.querySelector('input'), {
+ fireEvent.focus(node.querySelector('input'), {
target: {
value: 1, // use index
},
@@ -486,7 +487,7 @@ describe('BooleanField', () => {
});
const element = node.querySelector('.field-radio-group');
- Simulate.blur(node.querySelector('input'), {
+ fireEvent.blur(node.querySelector('input'), {
target: {
value: 1, // use index
},
@@ -523,7 +524,7 @@ describe('BooleanField', () => {
});
const element = node.querySelector('select');
- Simulate.focus(element, {
+ fireEvent.focus(element, {
target: {
value: 1, // use index
},
@@ -545,7 +546,7 @@ describe('BooleanField', () => {
});
const element = node.querySelector('select');
- Simulate.blur(element, {
+ fireEvent.blur(element, {
target: {
value: 1, // use index
},
@@ -590,7 +591,7 @@ describe('BooleanField', () => {
});
const element = node.querySelector('input');
- Simulate.focus(element, {
+ fireEvent.focus(element, {
target: {
checked: false,
},
@@ -612,7 +613,7 @@ describe('BooleanField', () => {
});
const element = node.querySelector('input');
- Simulate.blur(element, {
+ fireEvent.blur(element, {
target: {
checked: false,
},
@@ -694,8 +695,10 @@ describe('BooleanField', () => {
const $select = node.querySelector('.field select');
expect($select.value).eql('');
- Simulate.change($select, {
- target: { value: 0 }, // use index
+ act(() => {
+ fireEvent.change($select, {
+ target: { value: 0 }, // use index
+ });
});
expect(getSelectedOptionValue($select)).eql('true');
expect(spy.lastCall.args[0].formData).eql(true);
@@ -732,8 +735,10 @@ describe('BooleanField', () => {
},
});
- Simulate.change(node.querySelector('select'), {
- target: { value: 1 }, // use index
+ act(() => {
+ fireEvent.change(node.querySelector('select'), {
+ target: { value: 1 }, // use index
+ });
});
sinon.assert.calledWithMatch(
diff --git a/packages/core/test/Form.test.jsx b/packages/core/test/Form.test.jsx
index efd264a191..0225412662 100644
--- a/packages/core/test/Form.test.jsx
+++ b/packages/core/test/Form.test.jsx
@@ -2,8 +2,9 @@ import * as React from 'react';
import { expect } from 'chai';
import sinon from 'sinon';
import { createRef } from 'react';
-import { renderIntoDocument, act, Simulate } from 'react-dom/test-utils';
-import { render, findDOMNode } from 'react-dom';
+import { fireEvent, act, render } from '@testing-library/react';
+import { Simulate } from 'react-dom/test-utils';
+import { findDOMNode } from 'react-dom';
import { Portal } from 'react-portal';
import validator, { customizeValidator } from '@rjsf/validator-ajv8';
@@ -31,38 +32,41 @@ describeRepeated('Form common', (createFormComponent) => {
describe('Empty schema', () => {
it('Should throw error when Form is missing validator', () => {
- expect(() => createFormComponent({ schema: {}, validator: undefined })).to.Throw(
+ expect(() => createFormComponent({ ref: React.createRef(), schema: {}, validator: undefined })).to.Throw(
Error,
'A validator is required for Form functionality to work'
);
});
it('should render a form tag', () => {
- const { node } = createFormComponent({ schema: {} });
+ const { node } = createFormComponent({ ref: React.createRef(), schema: {} });
expect(node.tagName).eql('FORM');
});
it('should render a submit button', () => {
- const { node } = createFormComponent({ schema: {} });
+ const { node } = createFormComponent({ ref: React.createRef(), schema: {} });
expect(node.querySelectorAll('button[type=submit]')).to.have.length.of(1);
});
it('should render children buttons', () => {
- const props = { schema: {}, validator };
- const comp = renderIntoDocument(
+ const props = { ref: React.createRef(), schema: {}, validator };
+ const comp = (
);
- const node = findDOMNode(comp);
+
+ const { container } = render(comp);
+ const node = findDOMNode(container).firstElementChild;
expect(node.querySelectorAll('button[type=submit]')).to.have.length.of(2);
});
it("should render errors if schema isn't object", () => {
const props = {
+ ref: React.createRef(),
validator,
schema: {
type: 'object',
@@ -80,12 +84,13 @@ describeRepeated('Form common', (createFormComponent) => {
},
},
};
- const comp = renderIntoDocument(
+ const comp = (
);
- const node = findDOMNode(comp);
+ const { container } = render(comp);
+ const node = findDOMNode(container).firstElementChild;
expect(node.querySelector('.unsupported-field').textContent).to.contain('Unknown field type undefined');
});
});
@@ -96,12 +101,13 @@ describeRepeated('Form common', (createFormComponent) => {
let schema;
function createComponent() {
- renderIntoDocument(
+ const comp = (
);
+ render(comp);
}
beforeEach(() => {
@@ -171,8 +177,9 @@ describeRepeated('Form common', (createFormComponent) => {
},
},
};
- const comp = renderIntoDocument(
);
- const node = findDOMNode(comp);
+ const comp =
;
+ const { container } = render(comp);
+ const node = findDOMNode(container).firstElementChild;
const inputs = node.querySelectorAll('input');
const ids = [];
for (var i = 0, len = inputs.length; i < len; i++) {
@@ -196,8 +203,9 @@ describeRepeated('Form common', (createFormComponent) => {
},
},
};
- const comp = renderIntoDocument(
);
- const node = findDOMNode(comp);
+ const comp =
;
+ const { container } = render(comp);
+ const node = findDOMNode(container).firstElementChild;
const inputs = node.querySelectorAll('input');
const ids = [];
for (var i = 0, len = inputs.length; i < len; i++) {
@@ -251,8 +259,9 @@ describeRepeated('Form common', (createFormComponent) => {
},
};
- const comp = renderIntoDocument(
);
- const node = findDOMNode(comp);
+ const comp =
;
+ const { container } = render(comp);
+ const node = findDOMNode(container).firstElementChild;
const inputs = node.querySelectorAll('input');
const ids = [];
for (var i = 0, len = inputs.length; i < len; i++) {
@@ -275,8 +284,9 @@ describeRepeated('Form common', (createFormComponent) => {
},
},
};
- const comp = renderIntoDocument(
);
- const node = findDOMNode(comp);
+ const comp =
;
+ const { container } = render(comp);
+ const node = findDOMNode(container).firstElementChild;
const inputs = node.querySelectorAll('input');
const ids = [];
for (var i = 0, len = inputs.length; i < len; i++) {
@@ -405,8 +415,9 @@ describeRepeated('Form common', (createFormComponent) => {
schema: {},
uiSchema: { 'ui:submitButtonOptions': { norender: true } },
};
- const comp = renderIntoDocument(
);
- const node = findDOMNode(comp);
+ const comp =
;
+ const { container } = render(comp);
+ const node = findDOMNode(container).firstElementChild;
expect(node.querySelectorAll('button[type=submit]')).to.have.length.of(0);
});
@@ -417,8 +428,10 @@ describeRepeated('Form common', (createFormComponent) => {
schema: {},
uiSchema: { 'ui:submitButtonOptions': { submitText: 'Confirm' } },
};
- const comp = renderIntoDocument(
);
- const node = findDOMNode(comp);
+ const comp =
;
+ const { container } = render(comp);
+ const node = findDOMNode(container).firstElementChild;
+
expect(node.querySelector('button[type=submit]').textContent).eql('Confirm');
});
});
@@ -444,17 +457,17 @@ describeRepeated('Form common', (createFormComponent) => {
}
};
- const comp = render(
+ const comp = (
,
- domNode
+
);
- const node = findDOMNode(comp);
+ const { container } = render(comp);
+ const node = findDOMNode(container).firstElementChild;
const buttons = node.querySelectorAll('button[type=submit]');
- buttons[0].click();
- buttons[1].click();
+ act(() => buttons[0].click());
+ act(() => buttons[1].click());
});
});
@@ -661,7 +674,7 @@ describeRepeated('Form common', (createFormComponent) => {
const { node } = createFormComponent({ schema });
- Simulate.click(node.querySelector('.array-item-add button'));
+ fireEvent.click(node.querySelector('.array-item-add button'));
expect(node.querySelector('input[type=text]').value).eql('hello');
});
@@ -679,7 +692,7 @@ describeRepeated('Form common', (createFormComponent) => {
const { node } = createFormComponent({ schema });
- Simulate.click(node.querySelector('.btn-add'));
+ fireEvent.click(node.querySelector('.btn-add'));
expect(node.querySelector('input[type=text]').value).eql('newKey');
});
@@ -700,7 +713,7 @@ describeRepeated('Form common', (createFormComponent) => {
const { node } = createFormComponent({ schema });
- Simulate.click(node.querySelector('.btn-add'));
+ fireEvent.click(node.querySelector('.btn-add'));
expect(node.querySelector('input[type=number]').value).eql('0');
});
@@ -728,7 +741,7 @@ describeRepeated('Form common', (createFormComponent) => {
expect(node.querySelector('#root_children_0_name')).to.not.exist;
- Simulate.click(node.querySelector('.array-item-add button'));
+ fireEvent.click(node.querySelector('.array-item-add button'));
expect(node.querySelector('#root_children_0_name')).to.exist;
});
@@ -846,7 +859,7 @@ describeRepeated('Form common', (createFormComponent) => {
it('should not set default when a text field is cleared', () => {
const { node } = createFormComponent({ schema, formData: 'bar' });
- Simulate.change(node.querySelector('input'), {
+ fireEvent.change(node.querySelector('input'), {
target: { value: '' },
});
@@ -884,8 +897,8 @@ describeRepeated('Form common', (createFormComponent) => {
it('should propagate deeply nested defaults to submit handler', () => {
const { node, onSubmit } = createFormComponent({ schema });
- Simulate.click(node.querySelector('.array-item-add button'));
- Simulate.submit(node);
+ fireEvent.click(node.querySelector('.array-item-add button'));
+ fireEvent.submit(node);
sinon.assert.calledWithMatch(onSubmit.lastCall, {
formData: {
@@ -914,7 +927,7 @@ describeRepeated('Form common', (createFormComponent) => {
};
const { node, onSubmit } = createFormComponent({ schema });
- Simulate.submit(node);
+ fireEvent.submit(node);
sinon.assert.calledWithMatch(onSubmit.lastCall, {
formData: {
@@ -941,7 +954,7 @@ describeRepeated('Form common', (createFormComponent) => {
};
const { node, onSubmit } = createFormComponent({ schema });
- Simulate.submit(node);
+ fireEvent.submit(node);
sinon.assert.calledWithMatch(onSubmit.lastCall, {
formData: {
@@ -969,7 +982,7 @@ describeRepeated('Form common', (createFormComponent) => {
};
const { node, onSubmit } = createFormComponent({ schema });
- Simulate.submit(node);
+ fireEvent.submit(node);
sinon.assert.calledWithMatch(onSubmit.lastCall, {
formData: {
@@ -979,7 +992,7 @@ describeRepeated('Form common', (createFormComponent) => {
});
});
- it('should submit defaults when nested map has map values', () => {
+ it('should submit defaults when nested map has map values', async () => {
const schema = {
type: 'object',
properties: {
@@ -1007,7 +1020,9 @@ describeRepeated('Form common', (createFormComponent) => {
};
const { node, onSubmit } = createFormComponent({ schema });
- Simulate.submit(node);
+ await act(() => {
+ fireEvent.submit(node);
+ });
sinon.assert.calledWithMatch(onSubmit.lastCall, {
formData: {
@@ -1020,7 +1035,7 @@ describeRepeated('Form common', (createFormComponent) => {
});
});
- it('should submit defaults when they are defined in a nested additionalProperties', () => {
+ it('should submit defaults when they are defined in a nested additionalProperties', async () => {
const schema = {
type: 'object',
properties: {
@@ -1039,7 +1054,9 @@ describeRepeated('Form common', (createFormComponent) => {
};
const { node, onSubmit } = createFormComponent({ schema });
- Simulate.submit(node);
+ await act(() => {
+ fireEvent.submit(node);
+ });
sinon.assert.calledWithMatch(onSubmit.lastCall, {
formData: {
@@ -1060,7 +1077,7 @@ describeRepeated('Form common', (createFormComponent) => {
};
const { node, onSubmit } = createFormComponent({ schema });
- Simulate.submit(node);
+ fireEvent.submit(node);
sinon.assert.calledWithMatch(onSubmit.lastCall, {
formData: {
@@ -1085,7 +1102,7 @@ describeRepeated('Form common', (createFormComponent) => {
};
const { node, onSubmit } = createFormComponent({ schema });
- Simulate.submit(node);
+ fireEvent.submit(node);
sinon.assert.calledWithMatch(onSubmit.lastCall, {
formData: {
@@ -1096,7 +1113,7 @@ describeRepeated('Form common', (createFormComponent) => {
});
describe('Submit handler', () => {
- it('should call provided submit handler with form state', () => {
+ it('should call provided submit handler with form state', async () => {
const schema = {
type: 'object',
properties: {
@@ -1109,16 +1126,19 @@ describeRepeated('Form common', (createFormComponent) => {
const onSubmit = sandbox.spy();
const event = { type: 'submit' };
const { node } = createFormComponent({
+ ref: React.createRef(),
schema,
formData,
onSubmit,
});
- Simulate.submit(node, event);
+ await act(() => {
+ fireEvent.submit(node, event);
+ });
sinon.assert.calledWithMatch(onSubmit, { formData, schema }, event);
});
- it('should not call provided submit handler on validation errors', () => {
+ it('should not call provided submit handler on validation errors', async () => {
const schema = {
type: 'object',
properties: {
@@ -1134,13 +1154,16 @@ describeRepeated('Form common', (createFormComponent) => {
const onSubmit = sandbox.spy();
const onError = sandbox.spy();
const { node } = createFormComponent({
+ ref: React.createRef(),
schema,
formData,
onSubmit,
onError,
});
- Simulate.submit(node);
+ await act(() => {
+ fireEvent.submit(node);
+ });
sinon.assert.notCalled(onSubmit);
});
@@ -1165,13 +1188,14 @@ describeRepeated('Form common', (createFormComponent) => {
};
const onChange = sandbox.spy();
const { node } = createFormComponent({
+ ref: React.createRef(),
schema,
uiSchema,
formData,
onChange,
});
- Simulate.change(node.querySelector('[type=text]'), {
+ fireEvent.change(node.querySelector('[type=text]'), {
target: { value: 'new' },
});
@@ -1201,12 +1225,14 @@ describeRepeated('Form common', (createFormComponent) => {
const secondOnChange = sandbox.spy();
const { comp, onChange } = createFormComponent({
+ ref: React.createRef(),
schema,
formData: { foo: 'bar1' },
});
act(() => {
setProps(comp, {
+ ref: comp.ref,
schema,
formData: {},
onChange,
@@ -1217,13 +1243,15 @@ describeRepeated('Form common', (createFormComponent) => {
act(() => {
setProps(comp, {
+ ref: comp.ref,
schema,
formData: { foo: 'bar2' },
});
});
- act(() => {
+ await act(() => {
setProps(comp, {
+ ref: comp.ref,
schema,
formData: {},
onChange: secondOnChange,
@@ -1252,7 +1280,7 @@ describeRepeated('Form common', (createFormComponent) => {
const { node } = createFormComponent({ schema, formData, onBlur });
const input = node.querySelector('[type=text]');
- Simulate.blur(input, {
+ fireEvent.blur(input, {
target: { value: 'new' },
});
@@ -1277,7 +1305,7 @@ describeRepeated('Form common', (createFormComponent) => {
const { node } = createFormComponent({ schema, formData, onFocus });
const input = node.querySelector('[type=text]');
- Simulate.focus(input, {
+ fireEvent.focus(input, {
target: { value: 'new' },
});
@@ -1302,7 +1330,7 @@ describeRepeated('Form common', (createFormComponent) => {
const onError = sandbox.spy();
const { node } = createFormComponent({ schema, formData, onError });
- Simulate.submit(node);
+ fireEvent.submit(node);
sinon.assert.calledOnce(onError);
});
@@ -1450,6 +1478,7 @@ describeRepeated('Form common', (createFormComponent) => {
beforeEach(() => {
onChangeProp = sinon.spy();
formProps = {
+ ref: React.createRef(),
schema: {
type: 'string',
default: 'foobar',
@@ -1463,6 +1492,7 @@ describeRepeated('Form common', (createFormComponent) => {
describe('when the form data is set to null', () => {
beforeEach(() =>
setProps(comp, {
+ ref: comp.ref,
...formProps,
formData: null,
})
@@ -1495,6 +1525,7 @@ describeRepeated('Form common', (createFormComponent) => {
beforeEach(() =>
setProps(comp, {
...formProps,
+ ref: comp.ref,
schema: newSchema,
formData: 'some value',
})
@@ -1514,6 +1545,7 @@ describeRepeated('Form common', (createFormComponent) => {
beforeEach(() =>
setProps(comp, {
...formProps,
+ ref: comp.ref,
schema: newSchema,
formData: 'something else',
})
@@ -1533,6 +1565,7 @@ describeRepeated('Form common', (createFormComponent) => {
beforeEach(() =>
setProps(comp, {
...formProps,
+ ref: comp.ref,
schema: newSchema,
formData: null,
})
@@ -1593,34 +1626,37 @@ describeRepeated('Form common', (createFormComponent) => {
describe('External formData updates', () => {
describe('root level', () => {
const formProps = {
+ ref: React.createRef(),
schema: { type: 'string' },
liveValidate: true,
};
- it('should call submit handler with new formData prop value', () => {
+ it('should call submit handler with new formData prop value', async () => {
const { comp, node, onSubmit } = createFormComponent(formProps);
setProps(comp, {
+ ref: comp.ref,
...formProps,
onSubmit,
formData: 'yo',
});
- submitForm(node);
+ await act(() => submitForm(node));
sinon.assert.calledWithMatch(onSubmit.lastCall, {
formData: 'yo',
});
});
- it('should validate formData when the schema is updated', () => {
+ it('should validate formData when the schema is updated', async () => {
const { comp, node, onError } = createFormComponent(formProps);
setProps(comp, {
...formProps,
onError,
+ ref: comp.ref,
formData: 'yo',
schema: { type: 'number' },
});
- submitForm(node);
+ await act(() => submitForm(node));
sinon.assert.calledWithMatch(onError.lastCall, [
{
message: 'must be number',
@@ -1635,19 +1671,21 @@ describeRepeated('Form common', (createFormComponent) => {
});
describe('object level', () => {
- it('should call submit handler with new formData prop value', () => {
+ it('should call submit handler with new formData prop value', async () => {
const formProps = {
+ ref: React.createRef(),
schema: { type: 'object', properties: { foo: { type: 'string' } } },
};
const { comp, onSubmit, node } = createFormComponent(formProps);
setProps(comp, {
...formProps,
+ ref: comp.ref,
onSubmit,
formData: { foo: 'yo' },
});
- submitForm(node);
+ await act(() => submitForm(node));
sinon.assert.calledWithMatch(onSubmit.lastCall, {
formData: { foo: 'yo' },
});
@@ -1655,18 +1693,23 @@ describeRepeated('Form common', (createFormComponent) => {
});
describe('array level', () => {
- it('should call submit handler with new formData prop value', () => {
+ it('should call submit handler with new formData prop value', async () => {
const schema = {
type: 'array',
items: {
type: 'string',
},
};
- const { comp, node, onSubmit } = createFormComponent({ schema });
+ const { comp, node, onSubmit } = createFormComponent({ ref: React.createRef(), schema });
- setProps(comp, { schema, onSubmit, formData: ['yo'] });
+ setProps(comp, {
+ ref: comp.ref,
+ schema,
+ onSubmit,
+ formData: ['yo'],
+ });
- submitForm(node);
+ await act(() => submitForm(node));
sinon.assert.calledWithMatch(onSubmit.lastCall, {
formData: ['yo'],
});
@@ -1677,12 +1720,13 @@ describeRepeated('Form common', (createFormComponent) => {
describe('Internal formData updates', () => {
it('root', () => {
const formProps = {
+ ref: React.createRef(),
schema: { type: 'string' },
liveValidate: true,
};
const { node, onChange } = createFormComponent(formProps);
- Simulate.change(node.querySelector('input[type=text]'), {
+ fireEvent.change(node.querySelector('input[type=text]'), {
target: { value: 'yo' },
});
@@ -1696,6 +1740,7 @@ describeRepeated('Form common', (createFormComponent) => {
});
it('object', () => {
const { node, onChange } = createFormComponent({
+ ref: React.createRef(),
schema: {
type: 'object',
properties: {
@@ -1706,7 +1751,7 @@ describeRepeated('Form common', (createFormComponent) => {
},
});
- Simulate.change(node.querySelector('input[type=text]'), {
+ fireEvent.change(node.querySelector('input[type=text]'), {
target: { value: 'yo' },
});
@@ -1725,11 +1770,11 @@ describeRepeated('Form common', (createFormComponent) => {
type: 'string',
},
};
- const { node, onChange } = createFormComponent({ schema });
+ const { node, onChange } = createFormComponent({ ref: React.createRef(), schema });
- Simulate.click(node.querySelector('.array-item-add button'));
+ fireEvent.click(node.querySelector('.array-item-add button'));
- Simulate.change(node.querySelector('input[type=text]'), {
+ fireEvent.change(node.querySelector('input[type=text]'), {
target: { value: 'yo' },
});
sinon.assert.calledWithMatch(
@@ -1750,11 +1795,11 @@ describeRepeated('Form common', (createFormComponent) => {
},
},
};
- const { node, onChange } = createFormComponent({ schema });
+ const { node, onChange } = createFormComponent({ ref: React.createRef(), schema });
- Simulate.click(node.querySelector('.array-item-add button'));
+ fireEvent.click(node.querySelector('.array-item-add button'));
- Simulate.change(node.querySelector('input[type=text]'), {
+ fireEvent.change(node.querySelector('input[type=text]'), {
target: { value: 'yo' },
});
@@ -1800,15 +1845,14 @@ describeRepeated('Form common', (createFormComponent) => {
},
},
};
- const { node, onChange } = createFormComponent({ schema });
+ const { node, onChange } = createFormComponent({ ref: React.createRef(), schema });
- Simulate.change(node.querySelector('[type=checkbox]'), {
- target: { checked: true },
- });
+ const checkbox = node.querySelector('[type=checkbox]');
+ fireEvent.click(checkbox);
- Simulate.click(node.querySelector('.array-item-add button'));
+ fireEvent.click(node.querySelector('.array-item-add button'));
- Simulate.change(node.querySelector('input[type=text]'), {
+ fireEvent.change(node.querySelector('input[type=text]'), {
target: { value: 'yo' },
});
@@ -1836,7 +1880,7 @@ describeRepeated('Form common', (createFormComponent) => {
it('should not update the errorSchema when the formData changes', () => {
const { node, onChange } = createFormComponent({ schema });
- Simulate.change(node.querySelector('input[type=text]'), {
+ fireEvent.change(node.querySelector('input[type=text]'), {
target: { value: 'short' },
});
sinon.assert.calledWithMatch(
@@ -1851,7 +1895,7 @@ describeRepeated('Form common', (createFormComponent) => {
it('should not denote an error in the field', () => {
const { node } = createFormComponent({ schema });
- Simulate.change(node.querySelector('input[type=text]'), {
+ fireEvent.change(node.querySelector('input[type=text]'), {
target: { value: 'short' },
});
@@ -1874,24 +1918,24 @@ describeRepeated('Form common', (createFormComponent) => {
},
});
- Simulate.submit(node);
+ fireEvent.submit(node);
// Fix the first field
- Simulate.change(node.querySelectorAll('input[type=text]')[0], {
+ fireEvent.change(node.querySelectorAll('input[type=text]')[0], {
target: { value: 'fixed error' },
});
- Simulate.submit(node);
+ fireEvent.submit(node);
expect(node.querySelectorAll('.field-error')).to.have.length.of(1);
// Fix the second field
- Simulate.change(node.querySelectorAll('input[type=text]')[1], {
+ fireEvent.change(node.querySelectorAll('input[type=text]')[1], {
target: { value: 'fixed error too' },
});
- Simulate.submit(node);
+ fireEvent.submit(node);
// No error remaining, shouldn't throw.
- Simulate.submit(node);
+ fireEvent.submit(node);
expect(node.querySelectorAll('.field-error')).to.have.length.of(0);
});
@@ -1904,7 +1948,7 @@ describeRepeated('Form common', (createFormComponent) => {
liveValidate: true,
});
- Simulate.change(node.querySelector('input[type=text]'), {
+ fireEvent.change(node.querySelector('input[type=text]'), {
target: { value: 'short' },
});
@@ -1925,7 +1969,7 @@ describeRepeated('Form common', (createFormComponent) => {
liveValidate: true,
});
- Simulate.change(node.querySelector('input[type=text]'), {
+ fireEvent.change(node.querySelector('input[type=text]'), {
target: { value: 'short' },
});
@@ -1944,7 +1988,7 @@ describeRepeated('Form common', (createFormComponent) => {
liveValidate: true,
});
- Simulate.change(node.querySelector('input[type=text]'), {
+ fireEvent.change(node.querySelector('input[type=text]'), {
target: { value: 'short' },
});
@@ -1965,11 +2009,12 @@ describeRepeated('Form common', (createFormComponent) => {
noValidate: true,
});
- Simulate.change(node.querySelector('input[type=text]'), {
+ fireEvent.change(node.querySelector('input[type=text]'), {
target: { value: 'short' },
});
- Simulate.submit(node);
+ fireEvent.submit(node);
+ console.log('onSubmit.lastCall ', onSubmit.lastCall);
sinon.assert.calledWithMatch(onSubmit.lastCall, {
errorSchema: {},
});
@@ -1995,10 +2040,10 @@ describeRepeated('Form common', (createFormComponent) => {
const focusSpy = sinon.spy();
// Since programmatically triggering focus does not call onFocus, change the focus method to a spy
input.focus = focusSpy;
- Simulate.change(input, {
+ fireEvent.change(input, {
target: { value: 'short' },
});
- Simulate.submit(node);
+ fireEvent.submit(node);
sinon.assert.calledWithMatch(
onError,
@@ -2031,10 +2076,10 @@ describeRepeated('Form common', (createFormComponent) => {
// Since programmatically triggering focus does not call onFocus, change the focus method to a spy
input.focus = focusSpy;
- Simulate.change(input, {
+ fireEvent.change(input, {
target: { value: 'short' },
});
- Simulate.submit(node);
+ fireEvent.submit(node);
sinon.assert.calledWithMatch(
onError,
@@ -2070,10 +2115,10 @@ describeRepeated('Form common', (createFormComponent) => {
// Since programmatically triggering focus does not call onFocus, change the focus method to a spy
input.focus = focusSpy;
- Simulate.change(input, {
+ fireEvent.change(input, {
target: { value: 'valid string' },
});
- Simulate.submit(node);
+ fireEvent.submit(node);
sinon.assert.calledWithMatch(
onError,
@@ -2090,10 +2135,10 @@ describeRepeated('Form common', (createFormComponent) => {
schema,
});
- Simulate.change(node.querySelector('input[type=text]'), {
+ fireEvent.change(node.querySelector('input[type=text]'), {
target: { value: 'short' },
});
- Simulate.submit(node);
+ fireEvent.submit(node);
sinon.assert.calledWithMatch(onError.lastCall, [
{
@@ -2108,10 +2153,10 @@ describeRepeated('Form common', (createFormComponent) => {
sinon.assert.calledOnce(onError);
sinon.resetHistory(onError);
- Simulate.change(node.querySelector('input[type=text]'), {
+ fireEvent.change(node.querySelector('input[type=text]'), {
target: { value: 'long enough' },
});
- Simulate.submit(node);
+ fireEvent.submit(node);
sinon.assert.notCalled(onError);
sinon.assert.calledWithMatch(onSubmit.lastCall, {
errors: [],
@@ -2124,10 +2169,10 @@ describeRepeated('Form common', (createFormComponent) => {
schema,
});
- Simulate.change(node.querySelector('input[type=text]'), {
+ fireEvent.change(node.querySelector('input[type=text]'), {
target: { value: 'short' },
});
- Simulate.submit(node);
+ fireEvent.submit(node);
const errorListHTML = '
must NOT have fewer than 8 characters ';
const errors = node.querySelectorAll('.error-detail');
@@ -2136,10 +2181,10 @@ describeRepeated('Form common', (createFormComponent) => {
expect(errors[0]).to.have.property('innerHTML');
expect(errors[0].innerHTML).to.be.eql(errorListHTML);
- Simulate.change(node.querySelector('input[type=text]'), {
+ fireEvent.change(node.querySelector('input[type=text]'), {
target: { value: 'long enough' },
});
- Simulate.submit(node);
+ fireEvent.submit(node);
expect(node.querySelectorAll('.error-detail')).to.have.lengthOf(0);
});
});
@@ -2558,8 +2603,10 @@ describeRepeated('Form common', (createFormComponent) => {
liveValidate: true,
});
- Simulate.change(node.querySelector('input[type=number]'), {
- target: { value: 'not a number' },
+ act(() => {
+ Simulate.change(node.querySelector('input[type=number]'), {
+ target: { value: 'not a number' },
+ });
});
sinon.assert.calledWithMatch(
@@ -2573,13 +2620,16 @@ describeRepeated('Form common', (createFormComponent) => {
it('should only show errors for properties in selected branch', () => {
const { node, onChange } = createFormComponent({
+ ref: React.createRef(),
schema,
liveValidate: true,
formData: { branch: 2 },
});
- Simulate.change(node.querySelector('input[type=number]'), {
- target: { value: 'not a number' },
+ act(() => {
+ Simulate.change(node.querySelector('input[type=number]'), {
+ target: { value: 'not a number' },
+ });
});
sinon.assert.calledWithMatch(
@@ -2600,13 +2650,16 @@ describeRepeated('Form common', (createFormComponent) => {
it('should not show any errors when branch is empty', () => {
const { node, onChange } = createFormComponent({
+ ref: React.createRef(),
schema,
liveValidate: true,
formData: { branch: 3 },
});
- Simulate.change(node.querySelector('select'), {
- target: { value: 3 },
+ act(() => {
+ fireEvent.change(node.querySelector('select'), {
+ target: { value: 3 },
+ });
});
sinon.assert.calledWithMatch(
@@ -2633,6 +2686,7 @@ describeRepeated('Form common', (createFormComponent) => {
it('should replace state when props remove formData keys', () => {
const formData = { foo: 'foo', bar: 'bar' };
const { comp, node, onChange } = createFormComponent({
+ ref: React.createRef(),
schema,
formData,
});
@@ -2648,7 +2702,7 @@ describeRepeated('Form common', (createFormComponent) => {
formData: { bar: 'bar' },
});
- Simulate.change(node.querySelector('#root_bar'), {
+ fireEvent.change(node.querySelector('#root_bar'), {
target: { value: 'baz' },
});
@@ -2664,6 +2718,7 @@ describeRepeated('Form common', (createFormComponent) => {
it('should replace state when props change formData keys', () => {
const formData = { foo: 'foo', bar: 'bar' };
const { comp, node, onChange } = createFormComponent({
+ ref: React.createRef(),
schema,
formData,
});
@@ -2680,7 +2735,7 @@ describeRepeated('Form common', (createFormComponent) => {
formData: { foo: 'foo', baz: 'bar' },
});
- Simulate.change(node.querySelector('#root_baz'), {
+ fireEvent.change(node.querySelector('#root_baz'), {
target: { value: 'baz' },
});
@@ -2722,6 +2777,7 @@ describeRepeated('Form common', (createFormComponent) => {
it('should not update idSchema for a falsey value', () => {
const formData = { a: 'int' };
const { comp, node, onSubmit } = createFormComponent({
+ ref: React.createRef(),
schema,
formData,
});
@@ -2760,11 +2816,12 @@ describeRepeated('Form common', (createFormComponent) => {
});
});
- it('should update idSchema based on truthy value', () => {
+ it('should update idSchema based on truthy value', async () => {
const formData = {
a: 'int',
};
const { comp, node, onSubmit } = createFormComponent({
+ ref: React.createRef(),
schema,
formData,
});
@@ -2795,7 +2852,7 @@ describeRepeated('Form common', (createFormComponent) => {
},
formData: { a: 'bool' },
});
- submitForm(node);
+ await act(() => submitForm(node));
sinon.assert.calledWithMatch(onSubmit.lastCall, {
idSchema: {
$id: 'root',
@@ -2979,6 +3036,7 @@ describeRepeated('Form common', (createFormComponent) => {
describe('Custom format updates', () => {
it('Should update custom formats when customFormats is changed', () => {
const formProps = {
+ ref: React.createRef(),
liveValidate: true,
formData: {
areaCode: '123455',
@@ -3001,6 +3059,7 @@ describeRepeated('Form common', (createFormComponent) => {
'area-code': () =>
,
},
};
+
const customValidator = customizeValidator({
customFormats: {
'area-code': /^\d{3}$/,
@@ -3018,19 +3077,17 @@ describeRepeated('Form common', (createFormComponent) => {
validator: customValidator,
});
- setTimeout(() => {
- submitForm(node);
- sinon.assert.calledWithMatch(onError.lastCall, [
- {
- message: 'must match format "area-code"',
- name: 'format',
- params: { format: 'area-code' },
- property: '.areaCode',
- schemaPath: '#/properties/areaCode/format',
- stack: '.areaCode must match format "area-code"',
- },
- ]);
- }, 0);
+ submitForm(node);
+ sinon.assert.calledWithMatch(onError.lastCall, [
+ {
+ message: 'must match format "area-code"',
+ name: 'format',
+ params: { format: 'area-code' },
+ property: '.areaCode',
+ schemaPath: '#/properties/areaCode/format',
+ stack: '.areaCode must match format "area-code"',
+ },
+ ]);
// We use setTimeout with a delay of 0ms to allow all asynchronous operations to complete in the React component.
// Despite this being a workaround, it turned out to be the only effective method to handle this test case.
});
@@ -3039,6 +3096,7 @@ describeRepeated('Form common', (createFormComponent) => {
describe('Meta schema updates', () => {
it('Should update allowed meta schemas when additionalMetaSchemas is changed', () => {
const formProps = {
+ ref: React.createRef(),
schema: {
$schema: 'http://json-schema.org/draft-06/schema#',
type: 'string',
@@ -3049,6 +3107,7 @@ describeRepeated('Form common', (createFormComponent) => {
};
const { comp, node, onError } = createFormComponent(formProps);
+
submitForm(node);
sinon.assert.calledWithMatch(onError.lastCall, [
{
@@ -3150,7 +3209,10 @@ describeRepeated('Form common', (createFormComponent) => {
const arrayForm = innerRef.current.querySelector('form');
const arraySubmit = arrayForm.querySelector('.array-form-submit');
- arraySubmit.click();
+ act(() => {
+ arraySubmit.click();
+ });
+
sinon.assert.calledOnce(innerOnSubmit);
sinon.assert.notCalled(outerOnSubmit);
});
@@ -3191,7 +3253,7 @@ describeRepeated('Form common', (createFormComponent) => {
type1: 'FOO',
};
const { node, onError } = createFormComponent({ schema, formData });
- Simulate.submit(node);
+ fireEvent.submit(node);
sinon.assert.notCalled(onError);
});
it('should show dependency defaults for uncontrolled components', () => {
@@ -3210,7 +3272,7 @@ describeRepeated('Form common', (createFormComponent) => {
};
const { node } = createFormComponent({ schema });
- Simulate.change(node.querySelector('#root_firstName'), {
+ fireEvent.change(node.querySelector('#root_firstName'), {
target: { value: 'Chuck' },
});
expect(node.querySelector('#root_lastName').value).eql('Norris');
@@ -3244,7 +3306,9 @@ describe('Form omitExtraData and liveOmit', () => {
const onChange = sandbox.spy();
const omitExtraData = true;
const liveOmit = true;
+
const { node, comp } = createFormComponent({
+ ref: React.createRef(),
schema,
formData,
onChange,
@@ -3252,15 +3316,15 @@ describe('Form omitExtraData and liveOmit', () => {
liveOmit,
});
- sandbox.stub(comp, 'getUsedFormData').returns({
+ sandbox.stub(comp.ref.current, 'getUsedFormData').returns({
foo: '',
});
- Simulate.change(node.querySelector('[type=text]'), {
+ fireEvent.change(node.querySelector('[type=text]'), {
target: { value: 'new' },
});
- sinon.assert.calledOnce(comp.getUsedFormData);
+ sinon.assert.calledOnce(comp.ref.current.getUsedFormData);
});
it('should not call getUsedFormData when the omitExtraData prop is true and liveOmit is unspecified', () => {
@@ -3278,21 +3342,22 @@ describe('Form omitExtraData and liveOmit', () => {
const onChange = sandbox.spy();
const omitExtraData = true;
const { node, comp } = createFormComponent({
+ ref: React.createRef(),
schema,
formData,
onChange,
omitExtraData,
});
- sandbox.stub(comp, 'getUsedFormData').returns({
+ sandbox.stub(comp.ref.current, 'getUsedFormData').returns({
foo: '',
});
- Simulate.change(node.querySelector('[type=text]'), {
+ fireEvent.change(node.querySelector('[type=text]'), {
target: { value: 'new' },
});
- sinon.assert.notCalled(comp.getUsedFormData);
+ sinon.assert.notCalled(comp.ref.current.getUsedFormData);
});
describe('getUsedFormData', () => {
@@ -3312,6 +3377,7 @@ describe('Form omitExtraData and liveOmit', () => {
const onError = sandbox.spy();
const omitExtraData = true;
const { comp, node } = createFormComponent({
+ ref: React.createRef(),
schema,
formData,
onSubmit,
@@ -3319,13 +3385,13 @@ describe('Form omitExtraData and liveOmit', () => {
omitExtraData,
});
- sandbox.stub(comp, 'getUsedFormData').returns({
+ sandbox.stub(comp.ref.current, 'getUsedFormData').returns({
foo: '',
});
- Simulate.submit(node);
+ fireEvent.submit(node);
- sinon.assert.calledOnce(comp.getUsedFormData);
+ sinon.assert.calledOnce(comp.ref.current.getUsedFormData);
});
it('should just return the single input form value', () => {
const schema = {
@@ -3335,12 +3401,13 @@ describe('Form omitExtraData and liveOmit', () => {
const formData = 'foo';
const onSubmit = sandbox.spy();
const { comp } = createFormComponent({
+ ref: React.createRef(),
schema,
formData,
onSubmit,
});
- const result = comp.getUsedFormData(formData, []);
+ const result = comp.ref.current.getUsedFormData(formData, []);
expect(result).eql('foo');
});
@@ -3354,12 +3421,13 @@ describe('Form omitExtraData and liveOmit', () => {
const formData = [];
const onSubmit = sandbox.spy();
const { comp } = createFormComponent({
+ ref: React.createRef(),
schema,
formData,
onSubmit,
});
- const result = comp.getUsedFormData(formData, []);
+ const result = comp.ref.current.getUsedFormData(formData, []);
expect(result).eql([]);
});
@@ -3374,13 +3442,15 @@ describe('Form omitExtraData and liveOmit', () => {
foo: 'bar',
};
const onSubmit = sandbox.spy();
+ const formRef = React.createRef();
const { comp } = createFormComponent({
+ ref: formRef,
schema,
formData,
onSubmit,
});
- const result = comp.getUsedFormData(formData, ['foo']);
+ const result = comp.ref.current.getUsedFormData(formData, ['foo']);
expect(result).eql({ foo: 'bar' });
});
@@ -3413,12 +3483,13 @@ describe('Form omitExtraData and liveOmit', () => {
};
const onSubmit = sandbox.spy();
const { comp } = createFormComponent({
+ ref: React.createRef(),
schema,
formData,
onSubmit,
});
- const result = comp.getUsedFormData(formData, ['foo', 'list.0.title', 'list.1.details']);
+ const result = comp.ref.current.getUsedFormData(formData, ['foo', 'list.0.title', 'list.1.details']);
expect(result).eql({
foo: 'bar',
list: [{ title: 'title0' }, { details: 'details1' }],
@@ -3436,6 +3507,7 @@ describe('Form omitExtraData and liveOmit', () => {
const onSubmit = sandbox.spy();
const { comp } = createFormComponent({
+ ref: React.createRef(),
schema,
formData,
onSubmit,
@@ -3445,7 +3517,7 @@ describe('Form omitExtraData and liveOmit', () => {
$name: '',
};
- const fieldNames = comp.getFieldNames(pathSchema, formData);
+ const fieldNames = comp.ref.current.getFieldNames(pathSchema, formData);
expect(fieldNames).eql([]);
});
@@ -3470,6 +3542,7 @@ describe('Form omitExtraData and liveOmit', () => {
const onSubmit = sandbox.spy();
const { comp } = createFormComponent({
+ ref: React.createRef(),
schema,
formData,
onSubmit,
@@ -3498,7 +3571,7 @@ describe('Form omitExtraData and liveOmit', () => {
},
};
- const fieldNames = comp.getFieldNames(pathSchema, formData);
+ const fieldNames = comp.ref.current.getFieldNames(pathSchema, formData);
expect(fieldNames.sort()).eql(
[
['level1', 'anotherThing', 'anotherThingNested'],
@@ -3530,6 +3603,7 @@ describe('Form omitExtraData and liveOmit', () => {
const onSubmit = sandbox.spy();
const { comp } = createFormComponent({
+ ref: React.createRef(),
schema,
formData,
onSubmit,
@@ -3551,7 +3625,7 @@ describe('Form omitExtraData and liveOmit', () => {
},
};
- const fieldNames = comp.getFieldNames(pathSchema, formData);
+ const fieldNames = comp.ref.current.getFieldNames(pathSchema, formData);
expect(fieldNames.sort()).eql([['level1', 'level2'], 'level1.mixedMap', ['level1a']].sort());
});
@@ -3575,6 +3649,7 @@ describe('Form omitExtraData and liveOmit', () => {
const onSubmit = sandbox.spy();
const { comp } = createFormComponent({
+ ref: React.createRef(),
schema,
formData,
onSubmit,
@@ -3610,7 +3685,7 @@ describe('Form omitExtraData and liveOmit', () => {
},
};
- const fieldNames = comp.getFieldNames(pathSchema, formData);
+ const fieldNames = comp.ref.current.getFieldNames(pathSchema, formData);
expect(fieldNames.sort()).eql(
[
['address_list', '0', 'city'],
@@ -3636,13 +3711,14 @@ describe('Form omitExtraData and liveOmit', () => {
};
const formData = { foo: 'foo', baz: 'baz' };
const { node, onChange } = createFormComponent({
+ ref: React.createRef(),
schema,
formData,
omitExtraData,
liveOmit,
});
- Simulate.change(node.querySelector('#root_foo'), {
+ fireEvent.change(node.querySelector('#root_foo'), {
target: { value: 'foobar' },
});
@@ -3673,7 +3749,7 @@ describe('Form omitExtraData and liveOmit', () => {
liveOmit,
});
- Simulate.change(node.querySelector('#root_foo'), {
+ fireEvent.change(node.querySelector('#root_foo'), {
target: { value: 'foobar' },
});
@@ -3704,7 +3780,7 @@ describe('Form omitExtraData and liveOmit', () => {
liveOmit,
});
- Simulate.change(node.querySelector('#root_foo'), {
+ fireEvent.change(node.querySelector('#root_foo'), {
target: { value: 'foobar' },
});
@@ -3735,7 +3811,7 @@ describe('Form omitExtraData and liveOmit', () => {
liveOmit,
});
- Simulate.change(node.querySelector('#root_foo'), {
+ fireEvent.change(node.querySelector('#root_foo'), {
target: { value: 'foobar' },
});
@@ -3770,7 +3846,7 @@ describe('Form omitExtraData and liveOmit', () => {
liveOmit,
});
- Simulate.change(node.querySelector('#root_foo'), {
+ fireEvent.change(node.querySelector('#root_foo'), {
target: { value: 'foobar' },
});
@@ -3800,7 +3876,7 @@ describe('Form omitExtraData and liveOmit', () => {
);
const textNode = node.querySelector('#root_nested_key1-key');
- Simulate.blur(textNode, {
+ fireEvent.blur(textNode, {
target: { value: 'key1new' },
});
@@ -3843,7 +3919,7 @@ describe('Form omitExtraData and liveOmit', () => {
);
const textNode = node.querySelector('#root_lorem');
- Simulate.change(textNode, {
+ fireEvent.change(textNode, {
target: { value: '12' },
});
@@ -3882,7 +3958,7 @@ describe('Form omitExtraData and liveOmit', () => {
);
const textNode = node.querySelector('#root_ipsum');
- Simulate.change(textNode, {
+ fireEvent.change(textNode, {
target: { value: '12' },
});
@@ -3938,7 +4014,7 @@ describe('Form omitExtraData and liveOmit', () => {
};
const { node } = createFormComponent({ schema, extraErrors, onSubmit });
- Simulate.submit(node);
+ fireEvent.submit(node);
sinon.assert.calledOnce(onSubmit);
});
@@ -3956,10 +4032,13 @@ describe('Form omitExtraData and liveOmit', () => {
},
};
+ const formRef = React.createRef();
const props = {
+ ref: formRef,
schema,
noValidate: true,
};
+
const { comp } = createFormComponent({
...props,
extraErrors,
@@ -3971,8 +4050,8 @@ describe('Form omitExtraData and liveOmit', () => {
});
setTimeout(() => {
- expect(comp.state.errorSchema).eql({});
- expect(comp.state.errors).eql([]);
+ expect(comp.ref.current.state.errorSchema).eql({});
+ expect(comp.ref.current.state.errors).eql([]);
}, 0);
// We use setTimeout with a delay of 0ms to allow all asynchronous operations to complete in the React component.
// Despite this being a workaround, it turned out to be the only effective method to handle this test case.
@@ -3992,7 +4071,9 @@ describe('Form omitExtraData and liveOmit', () => {
},
};
+ const formRef = React.createRef();
const props = {
+ ref: formRef,
schema,
liveValidate: false,
};
@@ -4003,12 +4084,13 @@ describe('Form omitExtraData and liveOmit', () => {
setProps(comp, {
...props,
+ ref: comp.ref,
extraErrors: {},
});
setTimeout(() => {
- expect(comp.state.errorSchema).eql({});
- expect(comp.state.errors).eql([]);
+ expect(comp.ref.current.state.errorSchema).eql({});
+ expect(comp.ref.current.state.errors).eql([]);
}, 0);
// We use setTimeout with a delay of 0ms to allow all asynchronous operations to complete in the React component.
// Despite this being a workaround, it turned out to be the only effective method to handle this test case.
@@ -4024,12 +4106,16 @@ describe('Form omitExtraData and liveOmit', () => {
};
const { comp, node } = createFormComponent({
+ ref: React.createRef(),
schema,
});
- Simulate.submit(node);
- expect(comp.state.errorSchema).eql({ foo: { __errors: ["must have required property 'foo'"] } });
- expect(comp.state.errors).eql([
+ act(() => {
+ fireEvent.submit(node);
+ });
+
+ expect(comp.ref.current.state.errorSchema).eql({ foo: { __errors: ["must have required property 'foo'"] } });
+ expect(comp.ref.current.state.errors).eql([
{
message: "must have required property 'foo'",
property: 'foo',
@@ -4044,6 +4130,7 @@ describe('Form omitExtraData and liveOmit', () => {
// Changing schema to reset errors state.
setProps(comp, {
+ ref: comp.ref,
schema: {
type: 'object',
properties: {
@@ -4051,8 +4138,8 @@ describe('Form omitExtraData and liveOmit', () => {
},
},
});
- expect(comp.state.errorSchema).eql({});
- expect(comp.state.errors).eql([]);
+ expect(comp.ref.current.state.errorSchema).eql({});
+ expect(comp.ref.current.state.errors).eql([]);
});
});
@@ -4073,15 +4160,18 @@ describe('Form omitExtraData and liveOmit', () => {
const onSubmit = sinon.spy();
+ const formRef = React.createRef();
const props = {
+ ref: formRef,
schema,
onSubmit,
liveValidate: false,
};
const event = { type: 'submit' };
const { comp, node } = createFormComponent(props);
-
- Simulate.submit(node, event);
+ act(() => {
+ fireEvent.submit(node, event);
+ });
expect(node.querySelectorAll('.error-detail li')).to.have.length.of(1);
setProps(comp, {
@@ -4146,7 +4236,7 @@ describe('Form omitExtraData and liveOmit', () => {
it("doesn't cause a race condition", () => {
const { node } = createComponent(Container, { ...props });
- Simulate.click(node.querySelector('.array-item-add button'));
+ fireEvent.click(node.querySelector('.array-item-add button'));
expect(node.querySelector('#root_0')).to.exist;
expect(node.querySelector('#root_1').getAttribute('value')).to.eq('test');
@@ -4167,8 +4257,10 @@ describe('Form omitExtraData and liveOmit', () => {
const { node } = createFormComponent(props);
expect(formRef.current.reset).to.exist;
expect(node.querySelector('input')).to.exist;
- Simulate.change(node.querySelector('input'), { target: { value: 'Some Value' } });
- formRef.current.reset();
+ fireEvent.change(node.querySelector('input'), { target: { value: 'Some Value' } });
+ act(() => {
+ formRef.current.reset();
+ });
expect(node.querySelector('input').getAttribute('value')).to.eq('');
});
@@ -4185,15 +4277,19 @@ describe('Form omitExtraData and liveOmit', () => {
const { node, comp } = createFormComponent(props);
expect(formRef.current.reset).to.exist;
expect(node.querySelector('input')).to.exist;
- Simulate.change(node.querySelector('input'), { target: { value: 'Some Value' } });
- expect(comp.state.errors).to.have.length(0);
- Simulate.submit(node);
- expect(comp.state.errors).to.have.length(1);
+ fireEvent.change(node.querySelector('input'), { target: { value: 'Some Value' } });
+ expect(comp.ref.current.state.errors).to.have.length(0);
+ act(() => {
+ fireEvent.submit(node);
+ });
+ expect(comp.ref.current.state.errors).to.have.length(1);
expect(node.querySelector('.errors')).to.exist;
- formRef.current.reset();
+ act(() => {
+ formRef.current.reset();
+ });
expect(node.querySelector('.errors')).not.to.exist;
expect(node.querySelector('input').getAttribute('value')).to.eq('');
- expect(comp.state.errors).to.have.length(0);
+ expect(comp.ref.current.state.errors).to.have.length(0);
});
it('Reset button test with default value', () => {
@@ -4212,10 +4308,14 @@ describe('Form omitExtraData and liveOmit', () => {
expect(formRef.current.reset).to.exist;
expect(input).to.exist;
expect(input.getAttribute('value')).to.eq('Some-Value');
- formRef.current.reset();
+ act(() => {
+ formRef.current.reset();
+ });
expect(input.getAttribute('value')).to.eq('Some-Value');
- Simulate.change(input, { target: { value: 'Changed value' } });
- formRef.current.reset();
+ fireEvent.change(input, { target: { value: 'Changed value' } });
+ act(() => {
+ formRef.current.reset();
+ });
expect(input.getAttribute('value')).to.eq('Some-Value');
});
@@ -4234,14 +4334,18 @@ describe('Form omitExtraData and liveOmit', () => {
expect(input).to.exist;
expect(checkbox.checked).to.eq(true);
expect(input.getAttribute('value')).to.eq('');
- formRef.current.reset();
+ act(() => {
+ formRef.current.reset();
+ });
expect(checkbox.checked).to.eq(true);
expect(input.getAttribute('value')).to.eq('');
- Simulate.change(checkbox, { target: { checked: false } });
- Simulate.change(input, { target: { value: 'Changed value' } });
+ fireEvent.click(checkbox);
+ fireEvent.change(input, { target: { value: 'Changed value' } });
expect(checkbox.checked).to.eq(false);
expect(input.getAttribute('value')).to.eq('Changed value');
- formRef.current.reset();
+ act(() => {
+ formRef.current.reset();
+ });
expect(input.getAttribute('value')).to.eq('');
expect(checkbox.checked).to.eq(true);
});
@@ -4264,27 +4368,31 @@ describe('Form omitExtraData and liveOmit', () => {
ref,
};
const { comp, node } = createFormComponent(props);
-
// trigger programmatic validation and make sure an error appears.
- expect(ref.current.validateForm()).to.eql(false);
+ act(() => {
+ expect(ref.current.validateForm()).to.eql(false);
+ });
+
let errors = node.querySelectorAll('.error-detail');
expect(errors).to.have.lengthOf(1);
expect(errors[0].textContent).to.be.eql("must have required property 'input'");
// populate the input and simulate a re-render from the parent.
const textNode = node.querySelector('#root_input');
- Simulate.change(textNode, {
+ fireEvent.change(textNode, {
target: { value: 'populated value' },
});
setProps(comp, { ...props, formData: { input: 'populated value' } });
-
- // error should still be present.
+ // // error should still be present.
errors = node.querySelectorAll('.error-detail');
+ // screen.debug();
expect(errors).to.have.lengthOf(1);
expect(errors[0].textContent).to.be.eql("must have required property 'input'");
// trigger programmatic validation again and make sure the error disappears.
- expect(ref.current.validateForm()).to.eql(true);
+ act(() => {
+ expect(ref.current.validateForm()).to.eql(true);
+ });
errors = node.querySelectorAll('.error-detail');
expect(errors).to.have.lengthOf(0);
});
diff --git a/packages/core/test/NumberField.test.jsx b/packages/core/test/NumberField.test.jsx
index 7adf112e49..e6e82f6e2f 100644
--- a/packages/core/test/NumberField.test.jsx
+++ b/packages/core/test/NumberField.test.jsx
@@ -1,5 +1,6 @@
+import * as React from 'react';
import { expect } from 'chai';
-import { Simulate } from 'react-dom/test-utils';
+import { fireEvent, act } from '@testing-library/react';
import sinon from 'sinon';
import { createFormComponent, createSandbox, getSelectedOptionValue, setProps, submitForm } from './test_utils';
@@ -149,8 +150,10 @@ describe('NumberField', () => {
uiSchema,
});
- Simulate.change(node.querySelector('input'), {
- target: { value: '2' },
+ act(() => {
+ fireEvent.change(node.querySelector('input'), {
+ target: { value: '2' },
+ });
});
sinon.assert.calledWithMatch(
@@ -173,7 +176,7 @@ describe('NumberField', () => {
});
const input = node.querySelector('input');
- Simulate.blur(input, {
+ fireEvent.blur(input, {
target: { value: '2' },
});
@@ -191,7 +194,7 @@ describe('NumberField', () => {
});
const input = node.querySelector('input');
- Simulate.focus(input, {
+ fireEvent.focus(input, {
target: { value: '2' },
});
@@ -211,15 +214,6 @@ describe('NumberField', () => {
});
describe('when inputting a number that ends with a dot and/or zero it should normalize it, without changing the input value', () => {
- const { node, onChange } = createFormComponent({
- schema: {
- type: 'number',
- },
- uiSchema,
- });
-
- const $input = node.querySelector('input');
-
const tests = [
{
input: '2.',
@@ -265,20 +259,33 @@ describe('NumberField', () => {
tests.forEach((test) => {
it(`should work with an input value of ${test.input}`, () => {
- Simulate.change($input, {
- target: { value: test.input },
+ const { node, onChange } = createFormComponent({
+ schema: {
+ type: 'number',
+ },
+ uiSchema,
});
- sinon.assert.calledWithMatch(
- onChange.lastCall,
- {
- formData: test.output,
- },
- 'root'
- );
- // "2." is not really a valid number in a input field of type number
- // so we need to use getAttribute("value") instead since .value outputs the empty string
- expect($input.getAttribute('value')).eql(test.input);
+ const $input = node.querySelector('input');
+
+ act(() => {
+ fireEvent.change($input, {
+ target: { value: test.input },
+ });
+ });
+
+ setTimeout(() => {
+ sinon.assert.calledWithMatch(
+ onChange.lastCall,
+ {
+ formData: test.output,
+ },
+ 'root'
+ );
+ // "2." is not really a valid number in a input field of type number
+ // so we need to use getAttribute("value") instead since .value outputs the empty string
+ expect($input.getAttribute('value')).eql(test.input);
+ }, 0);
});
});
});
@@ -293,8 +300,10 @@ describe('NumberField', () => {
const $input = node.querySelector('input');
- Simulate.change($input, {
- target: { value: '.00' },
+ act(() => {
+ fireEvent.change($input, {
+ target: { value: '.00' },
+ });
});
sinon.assert.calledWithMatch(
@@ -313,6 +322,7 @@ describe('NumberField', () => {
};
const { comp, node } = createFormComponent({
+ ref: React.createRef(),
schema,
uiSchema,
formData: 2.03,
@@ -349,25 +359,36 @@ describe('NumberField', () => {
uiSchema,
});
- Simulate.change(node.querySelector('input'), {
- target: { value: '2.' },
+ act(() => {
+ fireEvent.change(node.querySelector('input'), {
+ target: { value: '2.' },
+ });
});
+
// "2." is not really a valid number in a input field of type number
// so we need to use getAttribute("value") instead since .value outputs the empty string
- expect(node.querySelector('.field input').getAttribute('value')).eql('2.');
+ setTimeout(() => {
+ expect(node.querySelector('.field input').getAttribute('value')).eql('2.');
+ });
- Simulate.change(node.querySelector('input'), {
- target: { value: '2.0' },
+ act(() => {
+ fireEvent.change(node.querySelector('input'), {
+ target: { value: '2.0' },
+ });
});
expect(node.querySelector('.field input').value).eql('2.0');
- Simulate.change(node.querySelector('input'), {
- target: { value: '2.00' },
+ act(() => {
+ fireEvent.change(node.querySelector('input'), {
+ target: { value: '2.00' },
+ });
});
expect(node.querySelector('.field input').value).eql('2.00');
- Simulate.change(node.querySelector('input'), {
- target: { value: '2.000' },
+ act(() => {
+ fireEvent.change(node.querySelector('input'), {
+ target: { value: '2.000' },
+ });
});
expect(node.querySelector('.field input').value).eql('2.000');
});
@@ -380,8 +401,10 @@ describe('NumberField', () => {
uiSchema,
});
- Simulate.change(node.querySelector('input'), {
- target: { value: '0' },
+ act(() => {
+ fireEvent.change(node.querySelector('input'), {
+ target: { value: '0' },
+ });
});
expect(node.querySelector('.field input').value).eql('0');
});
@@ -429,8 +452,10 @@ describe('NumberField', () => {
const $select = node.querySelector('.field select');
expect($select.value).eql('');
- Simulate.change(node.querySelector('.field select'), {
- target: { value: 0 }, // use index
+ act(() => {
+ fireEvent.change(node.querySelector('.field select'), {
+ target: { value: 0 }, // use index
+ });
});
expect(getSelectedOptionValue($select)).eql('1');
expect(spy.lastCall.args[0].formData).eql(1);
@@ -470,8 +495,10 @@ describe('NumberField', () => {
},
});
- Simulate.change(node.querySelector('select'), {
- target: { value: 1 }, // useIndex
+ act(() => {
+ fireEvent.change(node.querySelector('select'), {
+ target: { value: 1 }, // useIndex
+ });
});
sinon.assert.calledWithMatch(onChange.lastCall, { formData: 2 }, 'root');
diff --git a/packages/core/test/ObjectField.test.jsx b/packages/core/test/ObjectField.test.jsx
index a646417b2d..2f905a4010 100644
--- a/packages/core/test/ObjectField.test.jsx
+++ b/packages/core/test/ObjectField.test.jsx
@@ -1,5 +1,6 @@
import { expect } from 'chai';
import { Simulate } from 'react-dom/test-utils';
+import { fireEvent, act } from '@testing-library/react';
import sinon from 'sinon';
import { UI_GLOBAL_OPTIONS_KEY } from '@rjsf/utils';
@@ -136,7 +137,7 @@ describe('ObjectField', () => {
it('should handle object fields change events', () => {
const { node, onChange } = createFormComponent({ schema });
- Simulate.change(node.querySelector('input[type=text]'), {
+ fireEvent.change(node.querySelector('input[type=text]'), {
target: { value: 'changed' },
});
@@ -154,7 +155,7 @@ describe('ObjectField', () => {
const { node } = createFormComponent({ schema, onBlur });
const input = node.querySelector('input[type=text]');
- Simulate.blur(input, {
+ fireEvent.blur(input, {
target: { value: 'changed' },
});
@@ -166,7 +167,7 @@ describe('ObjectField', () => {
const { node } = createFormComponent({ schema, onFocus });
const input = node.querySelector('input[type=text]');
- Simulate.focus(input, {
+ fireEvent.focus(input, {
target: { value: 'changed' },
});
@@ -591,7 +592,7 @@ describe('ObjectField', () => {
});
const textNode = node.querySelector('#root_first-key');
- Simulate.blur(textNode, {
+ fireEvent.blur(textNode, {
target: { value: 'newFirst' },
});
@@ -617,7 +618,7 @@ describe('ObjectField', () => {
});
const textNode = node.querySelector('#root_Custom\\ title-key');
- Simulate.blur(textNode, {
+ fireEvent.blur(textNode, {
target: { value: 'Renamed custom title' },
});
@@ -649,7 +650,7 @@ describe('ObjectField', () => {
});
const textNode = node.querySelector('#root_Custom\\ title-key');
- Simulate.blur(textNode, {
+ fireEvent.blur(textNode, {
target: { value: 'Renamed custom title' },
});
@@ -664,7 +665,7 @@ describe('ObjectField', () => {
});
const textNode = node.querySelector('#root_second-key');
- Simulate.blur(textNode, {
+ fireEvent.blur(textNode, {
target: { value: 'newSecond' },
});
@@ -690,7 +691,7 @@ describe('ObjectField', () => {
});
const textNode = node.querySelector('#root_first-key');
- Simulate.blur(textNode, {
+ fireEvent.blur(textNode, {
target: { value: 'second' },
});
@@ -717,7 +718,7 @@ describe('ObjectField', () => {
});
const textNode = node.querySelector('#root_first-key');
- Simulate.blur(textNode, {
+ fireEvent.blur(textNode, {
target: { value: 'second' },
});
@@ -746,7 +747,7 @@ describe('ObjectField', () => {
});
const textNode = node.querySelector('#root_first-key');
- Simulate.blur(textNode, {
+ fireEvent.blur(textNode, {
target: { value: 'second' },
});
@@ -769,7 +770,7 @@ describe('ObjectField', () => {
});
const textNode = node.querySelector('#root_first-key');
- Simulate.blur(textNode);
+ fireEvent.blur(textNode);
sinon.assert.notCalled(onChange);
});
@@ -791,7 +792,7 @@ describe('ObjectField', () => {
});
const textNode = node.querySelector('#root_first-key');
- Simulate.blur(textNode, {
+ fireEvent.blur(textNode, {
target: { value: 'second' },
});
@@ -827,7 +828,7 @@ describe('ObjectField', () => {
it('should add a new property when clicking the expand button', () => {
const { node, onChange } = createFormComponent({ schema });
- Simulate.click(node.querySelector('.object-property-expand button'));
+ fireEvent.click(node.querySelector('.object-property-expand button'));
sinon.assert.calledWithMatch(onChange.lastCall, {
formData: {
@@ -842,7 +843,7 @@ describe('ObjectField', () => {
formData: { newKey: 1 },
});
- Simulate.click(node.querySelector('.object-property-expand button'));
+ fireEvent.click(node.querySelector('.object-property-expand button'));
sinon.assert.calledWithMatch(onChange.lastCall, {
formData: {
'newKey-1': 'New Value',
@@ -866,7 +867,7 @@ describe('ObjectField', () => {
formData: {},
});
- Simulate.click(node.querySelector('.object-property-expand button'));
+ fireEvent.click(node.querySelector('.object-property-expand button'));
sinon.assert.calledWithMatch(onChange.lastCall, {
formData: {
@@ -886,7 +887,7 @@ describe('ObjectField', () => {
formData: {},
});
- Simulate.click(node.querySelector('.object-property-expand button'));
+ fireEvent.click(node.querySelector('.object-property-expand button'));
sinon.assert.calledWithMatch(onChange.lastCall, {
formData: {
@@ -954,7 +955,7 @@ describe('ObjectField', () => {
expect(node.querySelector('.form-group > .form-additional > .form-additional + .col-xs-2 .btn-danger')).eql(null);
- Simulate.click(node.querySelector('.object-property-expand button'));
+ fireEvent.click(node.querySelector('.object-property-expand button'));
expect(node.querySelector('.form-group > .row > .form-additional + .col-xs-2 > .btn-danger')).to.not.be.null;
});
@@ -965,7 +966,7 @@ describe('ObjectField', () => {
formData: { first: 1 },
});
expect(node.querySelector('#root_first-key').value).to.eql('first');
- Simulate.click(node.querySelector('.form-group > .row > .form-additional + .col-xs-2 > .btn-danger'));
+ fireEvent.click(node.querySelector('.form-group > .row > .form-additional + .col-xs-2 > .btn-danger'));
expect(node.querySelector('#root_first-key')).to.not.exist;
});
@@ -976,7 +977,7 @@ describe('ObjectField', () => {
});
const selector = '.form-group > .row > .form-additional + .col-xs-2 > .btn-danger';
expect(node.querySelectorAll(selector).length).to.eql(3);
- Simulate.click(node.querySelectorAll(selector)[1]);
+ fireEvent.click(node.querySelectorAll(selector)[1]);
expect(node.querySelector('#root_second-key')).to.not.exist;
expect(node.querySelectorAll(selector).length).to.eql(2);
});
@@ -987,7 +988,7 @@ describe('ObjectField', () => {
formData: { first: 1 },
});
- Simulate.change(node.querySelector('#root_first'), {
+ fireEvent.change(node.querySelector('#root_first'), {
target: { value: '' },
});
@@ -1005,8 +1006,8 @@ describe('ObjectField', () => {
formData: { first: true },
});
- Simulate.change(node.querySelector('#root_first'), {
- target: { checked: false },
+ act(() => {
+ fireEvent.click(node.querySelector('#root_first'));
});
sinon.assert.calledWithMatch(onChange.lastCall, {
@@ -1023,7 +1024,7 @@ describe('ObjectField', () => {
formData: { first: 1 },
});
- Simulate.change(node.querySelector('#root_first'), {
+ fireEvent.change(node.querySelector('#root_first'), {
target: { value: 0 },
});
@@ -1038,8 +1039,10 @@ describe('ObjectField', () => {
formData: { first: 'str' },
});
- Simulate.change(node.querySelector('#root_first'), {
- target: { value: null },
+ act(() => {
+ Simulate.change(node.querySelector('#root_first'), {
+ target: { value: null },
+ });
});
sinon.assert.calledWithMatch(onChange.lastCall, {
diff --git a/packages/core/test/SchemaField.test.jsx b/packages/core/test/SchemaField.test.jsx
index 31b5052f6c..f243a5c864 100644
--- a/packages/core/test/SchemaField.test.jsx
+++ b/packages/core/test/SchemaField.test.jsx
@@ -1,6 +1,6 @@
import { Component } from 'react';
import { expect } from 'chai';
-import { Simulate } from 'react-dom/test-utils';
+import { fireEvent, act } from '@testing-library/react';
import { createSchemaUtils, englishStringTranslator } from '@rjsf/utils';
import validator from '@rjsf/validator-ajv8';
@@ -455,7 +455,10 @@ describe('SchemaField', () => {
uiSchema,
customValidate,
});
- Simulate.submit(node);
+
+ act(() => {
+ fireEvent.submit(node);
+ });
const matches = node.querySelectorAll('form > .form-group > div > .error-detail .text-danger');
expect(matches).to.have.length.of(1);
@@ -468,7 +471,10 @@ describe('SchemaField', () => {
uiSchema,
customValidate,
});
- Simulate.submit(node);
+
+ act(() => {
+ fireEvent.submit(node);
+ });
const matches = node.querySelectorAll('form .form-group .form-group .text-danger');
expect(matches).to.have.length.of(1);
@@ -499,7 +505,10 @@ describe('SchemaField', () => {
uiSchema,
customValidate,
});
- Simulate.submit(node);
+
+ act(() => {
+ fireEvent.submit(node);
+ });
const matches = node.querySelectorAll('form .form-group .form-group .text-danger');
expect(matches).to.have.length.of(1);
@@ -535,7 +544,10 @@ describe('SchemaField', () => {
uiSchema,
customValidate,
});
- Simulate.submit(node);
+
+ act(() => {
+ fireEvent.submit(node);
+ });
const matches = node.querySelectorAll('form .form-group .form-group .text-danger');
expect(matches).to.have.length.of(1);
@@ -552,7 +564,10 @@ describe('SchemaField', () => {
customValidate,
templates: { FieldErrorTemplate: customFieldError },
});
- Simulate.submit(node);
+
+ act(() => {
+ fireEvent.submit(node);
+ });
const matches = node.querySelectorAll('form .form-group .form-group .text-danger');
expect(matches).to.have.length.of(0);
@@ -577,7 +592,10 @@ describe('SchemaField', () => {
uiSchema,
customValidate,
});
- Simulate.submit(node);
+
+ act(() => {
+ fireEvent.submit(node);
+ });
const matches = node.querySelectorAll('form .form-group .form-group .text-danger');
expect(matches).to.have.length.of(0);
@@ -598,7 +616,10 @@ describe('SchemaField', () => {
customValidate,
templates: { BaseInputTemplate: customStringWidget },
});
- Simulate.submit(node);
+
+ act(() => {
+ fireEvent.submit(node);
+ });
const matches = node.querySelectorAll('.custom-text-widget');
expect(matches).to.have.length.of(1);
@@ -618,7 +639,10 @@ describe('SchemaField', () => {
uiSchema: hideUiSchema,
customValidate,
});
- Simulate.submit(node);
+
+ act(() => {
+ fireEvent.submit(node);
+ });
const matches = node.querySelectorAll('form > .form-group > div > .error-detail .text-danger');
expect(matches).to.have.length.of(0);
@@ -630,7 +654,10 @@ describe('SchemaField', () => {
uiSchema: hideUiSchema,
customValidate,
});
- Simulate.submit(node);
+
+ act(() => {
+ fireEvent.submit(node);
+ });
const matches = node.querySelectorAll('form .form-group .form-group .text-danger');
expect(matches).to.have.length.of(0);
@@ -648,7 +675,10 @@ describe('SchemaField', () => {
customValidate,
templates: { BaseInputTemplate: customStringWidget },
});
- Simulate.submit(node);
+
+ act(() => {
+ fireEvent.submit(node);
+ });
const matches = node.querySelectorAll('.custom-text-widget');
expect(matches).to.have.length.of(1);
@@ -656,6 +686,7 @@ describe('SchemaField', () => {
});
});
});
+
describe('hideError flag false for child should show errors', () => {
const hideUiSchema = {
'ui:hideError': true,
@@ -672,7 +703,10 @@ describe('SchemaField', () => {
uiSchema: hideUiSchema,
customValidate,
});
- Simulate.submit(node);
+
+ act(() => {
+ fireEvent.submit(node);
+ });
const matches = node.querySelectorAll('form > .form-group > div > .error-detail .text-danger');
expect(matches).to.have.length.of(0);
@@ -684,7 +718,10 @@ describe('SchemaField', () => {
uiSchema: hideUiSchema,
customValidate,
});
- Simulate.submit(node);
+
+ act(() => {
+ fireEvent.submit(node);
+ });
const matches = node.querySelectorAll('form .form-group .form-group .text-danger');
expect(matches).to.have.length.of(1);
@@ -709,7 +746,10 @@ describe('SchemaField', () => {
schema,
uiSchema,
});
- Simulate.submit(node);
+
+ act(() => {
+ fireEvent.submit(node);
+ });
const matches = node.querySelectorAll('form .form-group .form-group .help-block');
expect(matches).to.have.length.of(1);
@@ -725,7 +765,10 @@ describe('SchemaField', () => {
uiSchema,
templates: { FieldHelpTemplate: customFieldHelp },
});
- Simulate.submit(node);
+
+ act(() => {
+ fireEvent.submit(node);
+ });
const matches = node.querySelectorAll('form .form-group .form-group .help-block');
expect(matches).to.have.length.of(0);
@@ -746,7 +789,10 @@ describe('SchemaField', () => {
schema,
uiSchema,
});
- Simulate.submit(node);
+
+ act(() => {
+ fireEvent.submit(node);
+ });
const matches = node.querySelectorAll('form .form-group .form-group .help-block');
expect(matches).to.have.length.of(0);
diff --git a/packages/core/test/StringField.test.jsx b/packages/core/test/StringField.test.jsx
index 468a914576..38c8ce9dae 100644
--- a/packages/core/test/StringField.test.jsx
+++ b/packages/core/test/StringField.test.jsx
@@ -1,5 +1,6 @@
import { expect } from 'chai';
-import { act, Simulate } from 'react-dom/test-utils';
+import { Simulate } from 'react-dom/test-utils';
+import { fireEvent, act } from '@testing-library/react';
import sinon from 'sinon';
import { parseDateString, toDateString, TranslatableString, utcToLocal } from '@rjsf/utils';
@@ -122,7 +123,7 @@ describe('StringField', () => {
});
act(() => {
- Simulate.change(node.querySelector('input'), {
+ fireEvent.change(node.querySelector('input'), {
target: { value: 'yo' },
});
});
@@ -145,7 +146,7 @@ describe('StringField', () => {
onBlur,
});
const input = node.querySelector('input');
- Simulate.blur(input, {
+ fireEvent.blur(input, {
target: { value: 'yo' },
});
@@ -161,7 +162,7 @@ describe('StringField', () => {
onFocus,
});
const input = node.querySelector('input');
- Simulate.focus(input, {
+ fireEvent.focus(input, {
target: { value: 'yo' },
});
@@ -174,7 +175,7 @@ describe('StringField', () => {
formData: 'x',
});
- Simulate.change(node.querySelector('input'), {
+ fireEvent.change(node.querySelector('input'), {
target: { value: '' },
});
@@ -188,7 +189,7 @@ describe('StringField', () => {
formData: 'x',
});
- Simulate.change(node.querySelector('input'), {
+ fireEvent.change(node.querySelector('input'), {
target: { value: '' },
});
@@ -209,7 +210,7 @@ describe('StringField', () => {
},
});
- Simulate.change(node.querySelector('input'), {
+ fireEvent.change(node.querySelector('input'), {
target: { value: '' },
});
@@ -352,7 +353,7 @@ describe('StringField', () => {
},
});
act(() => {
- Simulate.change(node.querySelector('select'), {
+ fireEvent.change(node.querySelector('select'), {
target: { value: 0 }, // use index
});
});
@@ -373,8 +374,10 @@ describe('StringField', () => {
},
});
- Simulate.change(node.querySelector('select'), {
- target: { value: '' },
+ act(() => {
+ fireEvent.change(node.querySelector('select'), {
+ target: { value: '' },
+ });
});
sinon.assert.calledWithMatch(
@@ -394,8 +397,10 @@ describe('StringField', () => {
},
});
- Simulate.change(node.querySelector('select'), {
- target: { value: 0 }, // use index
+ act(() => {
+ fireEvent.change(node.querySelector('select'), {
+ target: { value: 0 }, // use index
+ });
});
expect(getSelectedOptionValue(node.querySelector('select'))).eql('foo');
@@ -409,8 +414,10 @@ describe('StringField', () => {
},
});
- Simulate.change(node.querySelector('select'), {
- target: { value: '' },
+ act(() => {
+ fireEvent.change(node.querySelector('select'), {
+ target: { value: '' },
+ });
});
expect(getSelectedOptionValue(node.querySelector('select'))).eql('');
@@ -528,8 +535,10 @@ describe('StringField', () => {
formData: 'x',
});
- Simulate.change(node.querySelector('textarea'), {
- target: { value: '' },
+ act(() => {
+ fireEvent.change(node.querySelector('textarea'), {
+ target: { value: '' },
+ });
});
sinon.assert.calledWithMatch(
@@ -551,8 +560,10 @@ describe('StringField', () => {
formData: 'x',
});
- Simulate.change(node.querySelector('textarea'), {
- target: { value: '' },
+ act(() => {
+ fireEvent.change(node.querySelector('textarea'), {
+ target: { value: '' },
+ });
});
sinon.assert.calledWithMatch(
@@ -615,8 +626,10 @@ describe('StringField', () => {
const newDatetime = new Date().toJSON();
- Simulate.change(node.querySelector('[type=datetime-local]'), {
- target: { value: newDatetime },
+ act(() => {
+ Simulate.change(node.querySelector('[type=datetime-local]'), {
+ target: { value: newDatetime },
+ });
});
expect(node.querySelector('[type=datetime-local]').value).eql(utcToLocal(newDatetime));
@@ -658,8 +671,10 @@ describe('StringField', () => {
});
let inputs = node.querySelectorAll('.form-group.field-error input[type=datetime-local]');
expect(inputs).to.have.length.of(0);
- Simulate.change(node.querySelector('[type=datetime-local]'), {
- target: { value: 'invalid' },
+ act(() => {
+ Simulate.change(node.querySelector('[type=datetime-local]'), {
+ target: { value: 'invalid' },
+ });
});
sinon.assert.calledWithMatch(onChange.lastCall, {
errorSchema: { __errors: ['must be string'] },
@@ -691,8 +706,10 @@ describe('StringField', () => {
let inputs = node.querySelectorAll('.form-group.field-error input[type=datetime-local]');
expect(inputs).to.have.length.of(0);
- Simulate.change(node.querySelector('[type=datetime-local]'), {
- target: { value: 'invalid' },
+ act(() => {
+ Simulate.change(node.querySelector('[type=datetime-local]'), {
+ target: { value: 'invalid' },
+ });
});
sinon.assert.calledWithMatch(onChange.lastCall, {
errorSchema: { __errors: ['must be string'] },
@@ -783,8 +800,10 @@ describe('StringField', () => {
const newDatetime = '2012-12-12';
- Simulate.change(node.querySelector('[type=date]'), {
- target: { value: newDatetime },
+ act(() => {
+ fireEvent.change(node.querySelector('[type=date]'), {
+ target: { value: newDatetime },
+ });
});
expect(node.querySelector('[type=date]').value)
@@ -830,8 +849,10 @@ describe('StringField', () => {
liveValidate: true,
});
- Simulate.change(node.querySelector('[type=date]'), {
- target: { value: '2012-12-12' },
+ act(() => {
+ fireEvent.change(node.querySelector('[type=date]'), {
+ target: { value: '2012-12-12' },
+ });
});
sinon.assert.notCalled(onError);
@@ -851,8 +872,10 @@ describe('StringField', () => {
liveValidate: true,
});
- Simulate.change(node.querySelector('[type=date]'), {
- target: { value: 'invalid' },
+ act(() => {
+ Simulate.change(node.querySelector('[type=date]'), {
+ target: { value: 'invalid' },
+ });
});
sinon.assert.calledWithMatch(onChange.lastCall, {
@@ -936,8 +959,10 @@ describe('StringField', () => {
const newTime = '11:10';
- Simulate.change(node.querySelector('[type=time]'), {
- target: { value: newTime },
+ act(() => {
+ fireEvent.change(node.querySelector('[type=time]'), {
+ target: { value: newTime },
+ });
});
expect(node.querySelector('[type=time]').value).eql(`${newTime}:00`);
@@ -978,8 +1003,10 @@ describe('StringField', () => {
liveValidate: true,
});
- Simulate.change(node.querySelector('[type=time]'), {
- target: { value: 'invalid' },
+ act(() => {
+ Simulate.change(node.querySelector('[type=time]'), {
+ target: { value: 'invalid' },
+ });
});
sinon.assert.calledWithMatch(onChange.lastCall, {
@@ -1055,7 +1082,9 @@ describe('StringField', () => {
});
it('should assign a default value', () => {
- const datetime = new Date().toJSON();
+ const current = new Date();
+ current.setMilliseconds(0);
+ const datetime = current.toJSON();
const { node, onSubmit } = createFormComponent({
schema: {
type: 'string',
@@ -1080,22 +1109,22 @@ describe('StringField', () => {
});
act(() => {
- Simulate.change(node.querySelector('#root_year'), {
+ fireEvent.change(node.querySelector('#root_year'), {
target: { value: 2012 - 1900 }, // convert year to index
});
- Simulate.change(node.querySelector('#root_month'), {
+ fireEvent.change(node.querySelector('#root_month'), {
target: { value: 9 }, // Month index
});
- Simulate.change(node.querySelector('#root_day'), {
+ fireEvent.change(node.querySelector('#root_day'), {
target: { value: 1 }, // Day index
});
- Simulate.change(node.querySelector('#root_hour'), {
+ fireEvent.change(node.querySelector('#root_hour'), {
target: { value: 1 },
});
- Simulate.change(node.querySelector('#root_minute'), {
+ fireEvent.change(node.querySelector('#root_minute'), {
target: { value: 2 },
});
- Simulate.change(node.querySelector('#root_second'), {
+ fireEvent.change(node.querySelector('#root_second'), {
target: { value: 3 },
});
});
@@ -1196,7 +1225,7 @@ describe('StringField', () => {
});
act(() => {
- Simulate.click(node.querySelector('a.btn-now'));
+ fireEvent.click(node.querySelector('a.btn-now'));
});
const formValue = onChange.lastCall.args[0].formData;
// Test that the two DATETIMEs are within 5 seconds of each other.
@@ -1215,8 +1244,8 @@ describe('StringField', () => {
});
act(() => {
- Simulate.click(node.querySelector('a.btn-now'));
- Simulate.click(node.querySelector('a.btn-clear'));
+ fireEvent.click(node.querySelector('a.btn-now'));
+ fireEvent.click(node.querySelector('a.btn-clear'));
});
sinon.assert.calledWithMatch(onChange.lastCall, {
@@ -1362,13 +1391,13 @@ describe('StringField', () => {
});
act(() => {
- Simulate.change(node.querySelector('#root_year'), {
+ fireEvent.change(node.querySelector('#root_year'), {
target: { value: 2012 - 1900 }, // convert year to index
});
- Simulate.change(node.querySelector('#root_month'), {
+ fireEvent.change(node.querySelector('#root_month'), {
target: { value: 9 }, // Month index
});
- Simulate.change(node.querySelector('#root_day'), {
+ fireEvent.change(node.querySelector('#root_day'), {
target: { value: 1 }, // Day index
});
});
@@ -1387,10 +1416,10 @@ describe('StringField', () => {
});
act(() => {
- Simulate.change(node.querySelector('#root_year'), {
+ fireEvent.change(node.querySelector('#root_year'), {
target: { value: 2012 - 1900 }, // convert year to index
});
- Simulate.change(node.querySelector('#root_month'), {
+ fireEvent.change(node.querySelector('#root_month'), {
target: { value: 9 }, // Month index
});
});
@@ -1568,7 +1597,7 @@ describe('StringField', () => {
});
act(() => {
- Simulate.click(node.querySelector('a.btn-now'));
+ fireEvent.click(node.querySelector('a.btn-now'));
});
const expected = toDateString(parseDateString(new Date().toJSON()), false);
@@ -1588,8 +1617,8 @@ describe('StringField', () => {
});
act(() => {
- Simulate.click(node.querySelector('a.btn-now'));
- Simulate.click(node.querySelector('a.btn-clear'));
+ fireEvent.click(node.querySelector('a.btn-now'));
+ fireEvent.click(node.querySelector('a.btn-clear'));
});
sinon.assert.calledWithMatch(onChange.lastCall, {
@@ -1679,7 +1708,7 @@ describe('StringField', () => {
const newDatetime = new Date().toJSON();
- Simulate.change(node.querySelector('[type=email]'), {
+ fireEvent.change(node.querySelector('[type=email]'), {
target: { value: newDatetime },
});
@@ -1722,7 +1751,7 @@ describe('StringField', () => {
liveValidate: true,
});
- Simulate.change(node.querySelector('[type=email]'), {
+ fireEvent.change(node.querySelector('[type=email]'), {
target: { value: 'invalid' },
});
@@ -1818,7 +1847,7 @@ describe('StringField', () => {
});
const newDatetime = new Date().toJSON();
- Simulate.change(node.querySelector('[type=url]'), {
+ fireEvent.change(node.querySelector('[type=url]'), {
target: { value: newDatetime },
});
@@ -1862,7 +1891,7 @@ describe('StringField', () => {
liveValidate: true,
});
- Simulate.change(node.querySelector('[type=url]'), {
+ fireEvent.change(node.querySelector('[type=url]'), {
target: { value: 'invalid' },
});
@@ -1937,8 +1966,10 @@ describe('StringField', () => {
const newColor = '#654321';
- Simulate.change(node.querySelector('[type=color]'), {
- target: { value: newColor },
+ act(() => {
+ fireEvent.change(node.querySelector('[type=color]'), {
+ target: { value: newColor },
+ });
});
expect(node.querySelector('[type=color]').value).eql(newColor);
@@ -1979,8 +2010,10 @@ describe('StringField', () => {
liveValidate: true,
});
- Simulate.change(node.querySelector('[type=color]'), {
- target: { value: 'invalid' },
+ act(() => {
+ Simulate.change(node.querySelector('[type=color]'), {
+ target: { value: 'invalid' },
+ });
});
sinon.assert.calledWithMatch(onChange.lastCall, {
@@ -2058,10 +2091,12 @@ describe('StringField', () => {
},
});
- Simulate.change(node.querySelector('[type=file]'), {
- target: {
- files: [{ name: 'file1.txt', size: 1, type: 'type' }],
- },
+ await act(() => {
+ fireEvent.change(node.querySelector('[type=file]'), {
+ target: {
+ files: [{ name: 'file1.txt', size: 1, type: 'type' }],
+ },
+ });
});
await new Promise(setImmediate);
@@ -2090,26 +2125,32 @@ describe('StringField', () => {
},
});
- Simulate.change(node.querySelector('[type=file]'), {
- target: {
- files: [{ name: 'file1.txt', size: 1, type: 'type' }],
- },
+ await act(() => {
+ fireEvent.change(node.querySelector('[type=file]'), {
+ target: {
+ files: [{ name: 'file1.txt', size: 1, type: 'type' }],
+ },
+ });
});
await new Promise(setImmediate);
- Simulate.change(node.querySelector('[type=file]'), {
- target: {
- files: [{ name: 'file2.txt', size: 1, type: 'type' }],
- },
+ await act(() => {
+ fireEvent.change(node.querySelector('[type=file]'), {
+ target: {
+ files: [{ name: 'file2.txt', size: 1, type: 'type' }],
+ },
+ });
});
await new Promise(setImmediate);
- Simulate.change(node.querySelector('[type=file]'), {
- target: {
- files: [{ name: 'file3.txt', size: 1, type: 'type' }],
- },
+ await act(() => {
+ fireEvent.change(node.querySelector('[type=file]'), {
+ target: {
+ files: [{ name: 'file3.txt', size: 1, type: 'type' }],
+ },
+ });
});
await new Promise(setImmediate);
@@ -2142,8 +2183,8 @@ describe('StringField', () => {
},
});
- act(() => {
- Simulate.change(node.querySelector('[type=file]'), {
+ await act(() => {
+ fireEvent.change(node.querySelector('[type=file]'), {
target: {
files: [{ name: nonUriEncodedValue, size: 1, type: 'type' }],
},
@@ -2249,7 +2290,7 @@ describe('StringField', () => {
// Click the delete button
act(() => {
- Simulate.click(deleteButton);
+ fireEvent.click(deleteButton);
});
sinon.assert.calledWithMatch(onChange.lastCall, {
formData: undefined,
@@ -2280,7 +2321,7 @@ describe('StringField', () => {
const deleteButton = file2.querySelector('button[title="Remove"]');
expect(deleteButton).to.exist;
act(() => {
- Simulate.click(deleteButton);
+ fireEvent.click(deleteButton);
});
// Check that the file is deleted
diff --git a/packages/core/test/__snapshots__/ArraySnap.test.jsx.snap b/packages/core/test/__snapshots__/ArraySnap.test.jsx.snap
index 09a3ebc8ff..428f12a63e 100644
--- a/packages/core/test/__snapshots__/ArraySnap.test.jsx.snap
+++ b/packages/core/test/__snapshots__/ArraySnap.test.jsx.snap
@@ -401,7 +401,6 @@ exports[`array fields empty errors array 1`] = `
-
@@ -567,7 +566,6 @@ exports[`array fields has errors 1`] = `
-
@@ -633,7 +631,6 @@ exports[`array fields no errors 1`] = `
-
diff --git a/packages/core/test/__snapshots__/FormSnap.test.jsx.snap b/packages/core/test/__snapshots__/FormSnap.test.jsx.snap
index 2341334618..2f5dc571f7 100644
--- a/packages/core/test/__snapshots__/FormSnap.test.jsx.snap
+++ b/packages/core/test/__snapshots__/FormSnap.test.jsx.snap
@@ -26,9 +26,7 @@ exports[`single fields checkbox field 1`] = `
required={false}
type="checkbox"
/>
-
-
-
+
-
@@ -289,7 +286,6 @@ exports[`single fields field with description in uiSchema 1`] = `
-
@@ -579,7 +575,6 @@ exports[`single fields hidden field 1`] = `
-
@@ -936,9 +931,7 @@ exports[`single fields select field 1`] = `
>
-
-
+ />
@@ -1219,9 +1212,7 @@ exports[`single fields select field single choice enumDisabled 1`] = `
>
-
-
+ />
-
-
+ />
diff --git a/packages/core/test/__snapshots__/ObjectSnap.test.jsx.snap b/packages/core/test/__snapshots__/ObjectSnap.test.jsx.snap
index edb550b959..eaab827dfd 100644
--- a/packages/core/test/__snapshots__/ObjectSnap.test.jsx.snap
+++ b/packages/core/test/__snapshots__/ObjectSnap.test.jsx.snap
@@ -12,7 +12,6 @@ exports[`object fields additionalProperties 1`] = `
-
@@ -134,7 +133,6 @@ exports[`object fields object 1`] = `
-
@@ -216,7 +214,6 @@ exports[`object fields show add button and fields if additionalProperties is tru
-
@@ -1310,7 +1307,6 @@ exports[`object fields with title and description with global label off addition
-
@@ -1426,7 +1422,6 @@ exports[`object fields with title and description with global label off object 1
-
@@ -1496,7 +1491,6 @@ exports[`object fields with title and description with global label off show add
-
diff --git a/packages/core/test/anyOf.test.jsx b/packages/core/test/anyOf.test.jsx
index ca213e3626..b043ad7923 100644
--- a/packages/core/test/anyOf.test.jsx
+++ b/packages/core/test/anyOf.test.jsx
@@ -1,5 +1,6 @@
+import * as React from 'react';
import { expect } from 'chai';
-import { Simulate } from 'react-dom/test-utils';
+import { fireEvent, act } from '@testing-library/react';
import sinon from 'sinon';
import { createFormComponent, createSandbox, setProps, getSelectedOptionValue } from './test_utils';
@@ -25,6 +26,7 @@ describe('anyOf', () => {
};
const { node } = createFormComponent({
+ ref: React.createRef(),
schema,
});
@@ -54,6 +56,7 @@ describe('anyOf', () => {
};
const { node } = createFormComponent({
+ ref: React.createRef(),
schema,
});
@@ -147,8 +150,10 @@ describe('anyOf', () => {
const $select = node.querySelector('select');
- Simulate.change($select, {
- target: { value: $select.options[1].value },
+ act(() => {
+ fireEvent.change($select, {
+ target: { value: $select.options[1].value },
+ });
});
sinon.assert.calledWithMatch(
@@ -190,8 +195,10 @@ describe('anyOf', () => {
const $select = node.querySelector('select');
- Simulate.change($select, {
- target: { value: $select.options[1].value },
+ act(() => {
+ fireEvent.change($select, {
+ target: { value: $select.options[1].value },
+ });
});
sinon.assert.calledWithMatch(
@@ -228,8 +235,10 @@ describe('anyOf', () => {
const $select = node.querySelector('select');
- Simulate.change($select, {
- target: { value: $select.options[1].value },
+ act(() => {
+ fireEvent.change($select, {
+ target: { value: $select.options[1].value },
+ });
});
sinon.assert.calledWithMatch(
@@ -297,8 +306,10 @@ describe('anyOf', () => {
const $select = node.querySelector('select');
- Simulate.change($select, {
- target: { value: $select.options[1].value },
+ act(() => {
+ fireEvent.change($select, {
+ target: { value: $select.options[1].value },
+ });
});
expect(node.querySelectorAll('#root_foo')).to.have.length.of(0);
@@ -326,8 +337,10 @@ describe('anyOf', () => {
schema,
});
- Simulate.change(node.querySelector('input#root_foo'), {
- target: { value: 'Lorem ipsum dolor sit amet' },
+ act(() => {
+ fireEvent.change(node.querySelector('input#root_foo'), {
+ target: { value: 'Lorem ipsum dolor sit amet' },
+ });
});
sinon.assert.calledWithMatch(
@@ -363,8 +376,10 @@ describe('anyOf', () => {
schema,
});
- Simulate.change(node.querySelector('input#root_buzz'), {
- target: { value: 'Lorem ipsum dolor sit amet' },
+ act(() => {
+ fireEvent.change(node.querySelector('input#root_buzz'), {
+ target: { value: 'Lorem ipsum dolor sit amet' },
+ });
});
sinon.assert.calledWithMatch(
@@ -377,8 +392,10 @@ describe('anyOf', () => {
'root_buzz'
);
- Simulate.change(node.querySelector('input#root_foo'), {
- target: { value: 'Consectetur adipiscing elit' },
+ act(() => {
+ fireEvent.change(node.querySelector('input#root_foo'), {
+ target: { value: 'Consectetur adipiscing elit' },
+ });
});
sinon.assert.calledWithMatch(
@@ -394,8 +411,10 @@ describe('anyOf', () => {
const $select = node.querySelector('select');
- Simulate.change($select, {
- target: { value: $select.options[1].value },
+ act(() => {
+ fireEvent.change($select, {
+ target: { value: $select.options[1].value },
+ });
});
sinon.assert.calledWithMatch(onChange.lastCall, {
@@ -427,8 +446,10 @@ describe('anyOf', () => {
schema,
});
- Simulate.change(node.querySelector('input#root_userId'), {
- target: { value: 12345 },
+ act(() => {
+ fireEvent.change(node.querySelector('input#root_userId'), {
+ target: { value: 12345 },
+ });
});
sinon.assert.calledWithMatch(
@@ -441,8 +462,10 @@ describe('anyOf', () => {
const $select = node.querySelector('select');
- Simulate.change($select, {
- target: { value: $select.options[1].value },
+ act(() => {
+ fireEvent.change($select, {
+ target: { value: $select.options[1].value },
+ });
});
sinon.assert.calledWithMatch(
@@ -453,8 +476,10 @@ describe('anyOf', () => {
'root_userId'
);
- Simulate.change(node.querySelector('input#root_userId'), {
- target: { value: 'Lorem ipsum dolor sit amet' },
+ act(() => {
+ fireEvent.change(node.querySelector('input#root_userId'), {
+ target: { value: 'Lorem ipsum dolor sit amet' },
+ });
});
sinon.assert.calledWithMatch(
@@ -540,8 +565,10 @@ describe('anyOf', () => {
const select = node.querySelector('select');
expect(select.value).eql(select.options[1].value);
- Simulate.change(select, {
- target: { value: select.options[0].value },
+ act(() => {
+ fireEvent.change(select, {
+ target: { value: select.options[0].value },
+ });
});
expect(select.value).eql(select.options[0].value);
@@ -596,12 +623,14 @@ describe('anyOf', () => {
};
const { comp, node } = createFormComponent({
+ ref: React.createRef(),
schema,
});
expect(node.querySelector('select').value).eql('0');
setProps(comp, {
+ ref: comp.ref,
schema,
formData: {
userId: 'foobarbaz',
@@ -645,14 +674,18 @@ describe('anyOf', () => {
expect($select.value).eql('0');
- Simulate.change($select, {
- target: { value: $select.options[1].value },
+ act(() => {
+ fireEvent.change($select, {
+ target: { value: $select.options[1].value },
+ });
});
expect($select.value).eql('1');
- Simulate.change(node.querySelector('input#root_idCode'), {
- target: { value: 'Lorem ipsum dolor sit amet' },
+ act(() => {
+ fireEvent.change(node.querySelector('input#root_idCode'), {
+ target: { value: 'Lorem ipsum dolor sit amet' },
+ });
});
expect($select.value).eql('1');
@@ -708,14 +741,18 @@ describe('anyOf', () => {
expect($select.value).eql('0');
- Simulate.change($select, {
- target: { value: $select.options[1].value },
+ act(() => {
+ fireEvent.change($select, {
+ target: { value: $select.options[1].value },
+ });
});
expect($select.value).eql('1');
- Simulate.change(node.querySelector('input#root_idCode'), {
- target: { value: 'Lorem ipsum dolor sit amet' },
+ act(() => {
+ fireEvent.change(node.querySelector('input#root_idCode'), {
+ target: { value: 'Lorem ipsum dolor sit amet' },
+ });
});
expect($select.value).eql('1');
@@ -771,14 +808,18 @@ describe('anyOf', () => {
expect($select.value).eql('0');
- Simulate.change($select, {
- target: { value: $select.options[1].value },
+ act(() => {
+ fireEvent.change($select, {
+ target: { value: $select.options[1].value },
+ });
});
expect($select.value).eql('1');
- Simulate.change(node.querySelector('input#root_idCode'), {
- target: { value: 'Lorem ipsum dolor sit amet' },
+ act(() => {
+ fireEvent.change(node.querySelector('input#root_idCode'), {
+ target: { value: 'Lorem ipsum dolor sit amet' },
+ });
});
expect($select.value).eql('1');
@@ -982,8 +1023,10 @@ describe('anyOf', () => {
expect($select.value).eql('1');
- Simulate.change($select, {
- target: { value: $select.options[0].value },
+ act(() => {
+ fireEvent.change($select, {
+ target: { value: $select.options[0].value },
+ });
});
expect($select.value).eql('0');
@@ -1031,7 +1074,9 @@ describe('anyOf', () => {
expect(node.querySelector('.array-item-add button')).not.eql(null);
- Simulate.click(node.querySelector('.array-item-add button'));
+ act(() => {
+ fireEvent.click(node.querySelector('.array-item-add button'));
+ });
expect(node.querySelectorAll('select')).to.have.length.of(1);
@@ -1084,7 +1129,10 @@ describe('anyOf', () => {
expect(selects[1].value).eql('1');
const moveUpBtns = node.querySelectorAll('.array-item-move-up');
- Simulate.click(moveUpBtns[1]);
+
+ act(() => {
+ fireEvent.click(moveUpBtns[1]);
+ });
selects = node.querySelectorAll('select');
expect(selects[0].value).eql('1');
@@ -1128,11 +1176,15 @@ describe('anyOf', () => {
});
const moveDownBtns = node.querySelectorAll('.array-item-move-down');
- Simulate.click(moveDownBtns[0]);
+ act(() => {
+ fireEvent.click(moveDownBtns[0]);
+ });
const strInputs = node.querySelectorAll('fieldset .field-string input[type=text]');
- Simulate.change(strInputs[1], { target: { value: 'bar' } });
+ act(() => {
+ fireEvent.change(strInputs[1], { target: { value: 'bar' } });
+ });
expect(strInputs[1].value).eql('bar');
});
it('should correctly render mixed types for anyOf inside array items', () => {
@@ -1169,12 +1221,16 @@ describe('anyOf', () => {
expect(node.querySelector('.array-item-add button')).not.eql(null);
- Simulate.click(node.querySelector('.array-item-add button'));
+ act(() => {
+ fireEvent.click(node.querySelector('.array-item-add button'));
+ });
const $select = node.querySelector('select');
expect($select).not.eql(null);
- Simulate.change($select, {
- target: { value: $select.options[1].value },
+ act(() => {
+ fireEvent.change($select, {
+ target: { value: $select.options[1].value },
+ });
});
expect(node.querySelectorAll('input#root_items_0_foo')).to.have.length.of(1);
@@ -1534,28 +1590,39 @@ describe('anyOf', () => {
customValidate,
});
- Simulate.change(node.querySelector('input#root_userId'), {
- target: { value: 12345 },
+ act(() => {
+ fireEvent.change(node.querySelector('input#root_userId'), {
+ target: { value: 12345 },
+ });
+ });
+ act(() => {
+ fireEvent.submit(node);
});
- Simulate.submit(node);
let inputs = node.querySelectorAll('.form-group.field-error input[type=number]');
expect(inputs[0].id).eql('root_userId');
const $select = node.querySelector('select');
- Simulate.change($select, {
- target: { value: $select.options[1].value },
+ act(() => {
+ fireEvent.change($select, {
+ target: { value: $select.options[1].value },
+ });
});
- Simulate.change(node.querySelector('input#root_userId'), {
- target: { value: 'Lorem ipsum dolor sit amet' },
+ act(() => {
+ fireEvent.change(node.querySelector('input#root_userId'), {
+ target: { value: 'Lorem ipsum dolor sit amet' },
+ });
+ });
+ act(() => {
+ fireEvent.submit(node);
});
- Simulate.submit(node);
inputs = node.querySelectorAll('.form-group.field-error input[type=text]');
expect(inputs[0].id).eql('root_userId');
});
+
it('should NOT show error on options with different types when hideError: true', () => {
const { node } = createFormComponent({
schema,
@@ -1565,24 +1632,35 @@ describe('anyOf', () => {
customValidate,
});
- Simulate.change(node.querySelector('input#root_userId'), {
- target: { value: 12345 },
+ act(() => {
+ fireEvent.change(node.querySelector('input#root_userId'), {
+ target: { value: 12345 },
+ });
+ });
+
+ act(() => {
+ fireEvent.submit(node);
});
- Simulate.submit(node);
let inputs = node.querySelectorAll('.form-group.field-error input[type=number]');
expect(inputs).to.have.length.of(0);
const $select = node.querySelector('select');
- Simulate.change($select, {
- target: { value: $select.options[1].value },
+ act(() => {
+ fireEvent.change($select, {
+ target: { value: $select.options[1].value },
+ });
});
- Simulate.change(node.querySelector('input#root_userId'), {
- target: { value: 'Lorem ipsum dolor sit amet' },
+ act(() => {
+ fireEvent.change(node.querySelector('input#root_userId'), {
+ target: { value: 'Lorem ipsum dolor sit amet' },
+ });
+ });
+ act(() => {
+ fireEvent.submit(node);
});
- Simulate.submit(node);
inputs = node.querySelectorAll('.form-group.field-error input[type=text]');
expect(inputs).to.have.length.of(0);
diff --git a/packages/core/test/oneOf.test.jsx b/packages/core/test/oneOf.test.jsx
index 3f11c921bc..3c76c6cfd5 100644
--- a/packages/core/test/oneOf.test.jsx
+++ b/packages/core/test/oneOf.test.jsx
@@ -1,5 +1,6 @@
+import * as React from 'react';
import { expect } from 'chai';
-import { Simulate } from 'react-dom/test-utils';
+import { fireEvent, act } from '@testing-library/react';
import sinon from 'sinon';
import { createFormComponent, createSandbox, getSelectedOptionValue, setProps } from './test_utils';
@@ -122,8 +123,10 @@ describe('oneOf', () => {
const $select = node.querySelector('select');
- Simulate.change($select, {
- target: { value: $select.options[1].value },
+ act(() => {
+ fireEvent.change($select, {
+ target: { value: $select.options[1].value },
+ });
});
sinon.assert.calledWithMatch(
@@ -164,8 +167,10 @@ describe('oneOf', () => {
const $select = node.querySelector('select');
- Simulate.change($select, {
- target: { value: $select.options[1].value },
+ act(() => {
+ fireEvent.change($select, {
+ target: { value: $select.options[1].value },
+ });
});
sinon.assert.calledWithMatch(
@@ -202,8 +207,10 @@ describe('oneOf', () => {
const $select = node.querySelector('select');
- Simulate.change($select, {
- target: { value: $select.options[1].value },
+ act(() => {
+ fireEvent.change($select, {
+ target: { value: $select.options[1].value },
+ });
});
sinon.assert.calledWithMatch(
@@ -271,8 +278,10 @@ describe('oneOf', () => {
const $select = node.querySelector('select');
- Simulate.change($select, {
- target: { value: $select.options[1].value },
+ act(() => {
+ fireEvent.change($select, {
+ target: { value: $select.options[1].value },
+ });
});
expect(node.querySelectorAll('#root_foo')).to.have.length.of(0);
@@ -300,8 +309,10 @@ describe('oneOf', () => {
schema,
});
- Simulate.change(node.querySelector('input#root_foo'), {
- target: { value: 'Lorem ipsum dolor sit amet' },
+ act(() => {
+ fireEvent.change(node.querySelector('input#root_foo'), {
+ target: { value: 'Lorem ipsum dolor sit amet' },
+ });
});
sinon.assert.calledWithMatch(
@@ -337,8 +348,10 @@ describe('oneOf', () => {
schema,
});
- Simulate.change(node.querySelector('input#root_buzz'), {
- target: { value: 'Lorem ipsum dolor sit amet' },
+ act(() => {
+ fireEvent.change(node.querySelector('input#root_buzz'), {
+ target: { value: 'Lorem ipsum dolor sit amet' },
+ });
});
sinon.assert.calledWithMatch(
@@ -351,8 +364,10 @@ describe('oneOf', () => {
'root_buzz'
);
- Simulate.change(node.querySelector('input#root_foo'), {
- target: { value: 'Consectetur adipiscing elit' },
+ act(() => {
+ fireEvent.change(node.querySelector('input#root_foo'), {
+ target: { value: 'Consectetur adipiscing elit' },
+ });
});
sinon.assert.calledWithMatch(
@@ -368,8 +383,10 @@ describe('oneOf', () => {
const $select = node.querySelector('select');
- Simulate.change($select, {
- target: { value: $select.options[1].value },
+ act(() => {
+ fireEvent.change($select, {
+ target: { value: $select.options[1].value },
+ });
});
sinon.assert.calledWithMatch(onChange.lastCall, {
@@ -401,8 +418,10 @@ describe('oneOf', () => {
schema,
});
- Simulate.change(node.querySelector('input#root_userId'), {
- target: { value: 12345 },
+ act(() => {
+ fireEvent.change(node.querySelector('input#root_userId'), {
+ target: { value: 12345 },
+ });
});
sinon.assert.calledWithMatch(
@@ -417,8 +436,10 @@ describe('oneOf', () => {
const $select = node.querySelector('select');
- Simulate.change($select, {
- target: { value: $select.options[1].value },
+ act(() => {
+ fireEvent.change($select, {
+ target: { value: $select.options[1].value },
+ });
});
sinon.assert.calledWithMatch(
@@ -431,9 +452,12 @@ describe('oneOf', () => {
'root_userId'
);
- Simulate.change(node.querySelector('input#root_userId'), {
- target: { value: 'Lorem ipsum dolor sit amet' },
+ act(() => {
+ fireEvent.change(node.querySelector('input#root_userId'), {
+ target: { value: 'Lorem ipsum dolor sit amet' },
+ });
});
+
sinon.assert.calledWithMatch(
onChange.lastCall,
{
@@ -519,8 +543,10 @@ describe('oneOf', () => {
const select = node.querySelector('select');
expect(select.value).eql(select.options[1].value);
- Simulate.change(select, {
- target: { value: select.options[0].value },
+ act(() => {
+ fireEvent.change(select, {
+ target: { value: select.options[0].value },
+ });
});
expect(select.value).eql(select.options[0].value);
@@ -615,6 +641,7 @@ describe('oneOf', () => {
};
const { comp, node } = createFormComponent({
+ ref: React.createRef(),
schema,
});
@@ -664,14 +691,18 @@ describe('oneOf', () => {
expect($select.value).eql('0');
- Simulate.change($select, {
- target: { value: $select.options[1].value },
+ act(() => {
+ fireEvent.change($select, {
+ target: { value: $select.options[1].value },
+ });
});
expect($select.value).eql('1');
- Simulate.change(node.querySelector('input#root_items_bar'), {
- target: { value: 'Lorem ipsum dolor sit amet' },
+ act(() => {
+ fireEvent.change(node.querySelector('input#root_items_bar'), {
+ target: { value: 'Lorem ipsum dolor sit amet' },
+ });
});
expect($select.value).eql('1');
@@ -708,8 +739,10 @@ describe('oneOf', () => {
const $select = node.querySelector('select');
- Simulate.change($select, {
- target: { value: $select.options[1].value },
+ act(() => {
+ fireEvent.change($select, {
+ target: { value: $select.options[1].value },
+ });
});
expect($select.value).eql('1');
@@ -743,8 +776,10 @@ describe('oneOf', () => {
const $select = node.querySelector('select');
- Simulate.change($select, {
- target: { value: $select.options[1].value },
+ act(() => {
+ fireEvent.change($select, {
+ target: { value: $select.options[1].value },
+ });
});
expect($select.value).eql('1');
@@ -808,8 +843,10 @@ describe('oneOf', () => {
expect($select.value).eql('1');
- Simulate.change($select, {
- target: { value: $select.options[0].value },
+ act(() => {
+ fireEvent.change($select, {
+ target: { value: $select.options[0].value },
+ });
});
expect($select.value).eql('0');
@@ -856,12 +893,14 @@ describe('oneOf', () => {
expect(node.querySelector('.array-item-add button')).not.eql(null);
- Simulate.click(node.querySelector('.array-item-add button'));
+ fireEvent.click(node.querySelector('.array-item-add button'));
const $select = node.querySelector('select');
expect($select).not.eql(null);
- Simulate.change($select, {
- target: { value: $select.options[1].value },
+ act(() => {
+ fireEvent.change($select, {
+ target: { value: $select.options[1].value },
+ });
});
expect(node.querySelectorAll('input#root_items_0_foo')).to.have.length.of(1);
@@ -914,7 +953,7 @@ describe('oneOf', () => {
expect(selects[1].value).eql('1');
const moveUpBtns = node.querySelectorAll('.array-item-move-up');
- Simulate.click(moveUpBtns[1]);
+ fireEvent.click(moveUpBtns[1]);
selects = node.querySelectorAll('select');
expect(selects[0].value).eql('1');
@@ -958,11 +997,14 @@ describe('oneOf', () => {
});
const moveDownBtns = node.querySelectorAll('.array-item-move-down');
- Simulate.click(moveDownBtns[0]);
+ fireEvent.click(moveDownBtns[0]);
const strInputs = node.querySelectorAll('fieldset .field-string input[type=text]');
- Simulate.change(strInputs[1], { target: { value: 'bar' } });
+ act(() => {
+ fireEvent.change(strInputs[1], { target: { value: 'bar' } });
+ });
+
expect(strInputs[1].value).eql('bar');
});
@@ -1071,17 +1113,21 @@ describe('oneOf', () => {
expect(node.querySelector('.array-item-add button')).not.eql(null);
- Simulate.click(node.querySelector('.array-item-add button'));
+ fireEvent.click(node.querySelector('.array-item-add button'));
const $select = node.querySelector('select');
expect($select).not.eql(null);
- Simulate.change($select, {
- target: { value: $select.options[1].value },
+ act(() => {
+ fireEvent.change($select, {
+ target: { value: $select.options[1].value },
+ });
});
// This works because the nested "add" button will now be the first to
// appear in the dom
- Simulate.click(node.querySelector('.array-item-add button'));
+ act(() => {
+ fireEvent.click(node.querySelector('.array-item-add button'));
+ });
expect($select.value).to.eql($select.options[1].value);
});
@@ -1348,12 +1394,15 @@ describe('oneOf', () => {
expect(node.querySelector('.array-item-add button')).not.eql(null);
- Simulate.click(node.querySelector('.array-item-add button'));
+ fireEvent.click(node.querySelector('.array-item-add button'));
const $select = node.querySelector('select');
expect($select).not.eql(null);
- Simulate.change($select, {
- target: { value: $select.options[1].value },
+
+ act(() => {
+ fireEvent.change($select, {
+ target: { value: $select.options[1].value },
+ });
});
expect(node.querySelectorAll('input#root_items_0_foo')).to.have.length.of(1);
@@ -1519,8 +1568,10 @@ describe('oneOf', () => {
const select = node.querySelector('select#root_craftTypes_0__oneof_select');
- Simulate.change(select, {
- target: { value: select.options[1].value },
+ act(() => {
+ fireEvent.change(select, {
+ target: { value: select.options[1].value },
+ });
});
sinon.assert.calledWithMatch(onChange.lastCall, {
@@ -1558,24 +1609,30 @@ describe('oneOf', () => {
customValidate,
});
- Simulate.change(node.querySelector('input#root_userId'), {
- target: { value: 12345 },
+ act(() => {
+ fireEvent.change(node.querySelector('input#root_userId'), {
+ target: { value: 12345 },
+ });
});
- Simulate.submit(node);
+ fireEvent.submit(node);
let inputs = node.querySelectorAll('.form-group.field-error input[type=number]');
expect(inputs[0].id).eql('root_userId');
const $select = node.querySelector('select');
- Simulate.change($select, {
- target: { value: $select.options[1].value },
+ act(() => {
+ fireEvent.change($select, {
+ target: { value: $select.options[1].value },
+ });
});
- Simulate.change(node.querySelector('input#root_userId'), {
- target: { value: 'Lorem ipsum dolor sit amet' },
+ act(() => {
+ fireEvent.change(node.querySelector('input#root_userId'), {
+ target: { value: 'Lorem ipsum dolor sit amet' },
+ });
});
- Simulate.submit(node);
+ fireEvent.submit(node);
inputs = node.querySelectorAll('.form-group.field-error input[type=text]');
expect(inputs[0].id).eql('root_userId');
@@ -1589,24 +1646,30 @@ describe('oneOf', () => {
customValidate,
});
- Simulate.change(node.querySelector('input#root_userId'), {
- target: { value: 12345 },
+ act(() => {
+ fireEvent.change(node.querySelector('input#root_userId'), {
+ target: { value: 12345 },
+ });
});
- Simulate.submit(node);
+ fireEvent.submit(node);
let inputs = node.querySelectorAll('.form-group.field-error input[type=number]');
expect(inputs).to.have.length.of(0);
const $select = node.querySelector('select');
- Simulate.change($select, {
- target: { value: $select.options[1].value },
+ act(() => {
+ fireEvent.change($select, {
+ target: { value: $select.options[1].value },
+ });
});
- Simulate.change(node.querySelector('input#root_userId'), {
- target: { value: 'Lorem ipsum dolor sit amet' },
+ act(() => {
+ fireEvent.change(node.querySelector('input#root_userId'), {
+ target: { value: 'Lorem ipsum dolor sit amet' },
+ });
});
- Simulate.submit(node);
+ fireEvent.submit(node);
inputs = node.querySelectorAll('.form-group.field-error input[type=text]');
expect(inputs).to.have.length.of(0);
diff --git a/packages/core/test/test_utils.js b/packages/core/test/test_utils.js
index baefcdbc61..3db1807bf2 100644
--- a/packages/core/test/test_utils.js
+++ b/packages/core/test/test_utils.js
@@ -1,9 +1,10 @@
/* Utils for tests. */
import { createElement } from 'react';
+import { render, fireEvent, act } from '@testing-library/react';
+import '@testing-library/jest-dom';
import sinon from 'sinon';
-import { renderIntoDocument, act, Simulate } from 'react-dom/test-utils';
-import { findDOMNode, render } from 'react-dom';
+import { findDOMNode } from 'react-dom';
import validator from '@rjsf/validator-ajv8';
import Form from '../src';
@@ -12,8 +13,10 @@ export function createComponent(Component, props) {
const onChange = sinon.spy();
const onError = sinon.spy();
const onSubmit = sinon.spy();
- const comp = renderIntoDocument(