From 18b2ec42c9cfc4aad2cf6996342c8edde979ee68 Mon Sep 17 00:00:00 2001 From: Ashwin Ramaswami Date: Mon, 9 Sep 2019 06:49:51 -0700 Subject: [PATCH] [V2] Upgrade to react 16 (#1408) * upgrade to react 16 * bump react peer dependency to 16 * remove react-lifecycles polyfill * unskip react 16 test * Fix array tests, fixes #1427 componentWillReceiveProps is not called after setState, but getDerivedStateFromProps is called after setState. This caused the array key tests to fail, because when onAddIndexClick is called, it sets the state first to update keyedFormData. Only afterwards is the onChange handler called with the new form data. And, getDerivedStateFromProps is called in between, so it ends up being called with the old form data instead of the new one. Used the technique in https://stackoverflow.com/a/57208053 to work around this, by not calculating derived state in getDerivedStateFromProps when keyed form data is updated. * Remove console.error stub to fix tests * Fix getWidget behavior for forwarded refs * Replace componentWillReceiveProps with UNSAFE_componentWillReceiveProps --- package-lock.json | 104 +++++++++++++++------- package.json | 9 +- playground/app.js | 2 +- src/components/Form.js | 2 +- src/components/fields/ArrayField.js | 14 ++- src/components/fields/MultiSchemaField.js | 2 +- src/components/widgets/AltDateWidget.js | 2 +- src/utils.js | 5 +- test/Form_test.js | 64 +++++++------ test/SchemaField_test.js | 14 +-- test/StringField_test.js | 2 +- test/performance_test.js | 4 +- test/test_utils.js | 4 - test/utils_test.js | 10 ++- test/validate_test.js | 8 +- 15 files changed, 141 insertions(+), 105 deletions(-) diff --git a/package-lock.json b/package-lock.json index 90756ce414..61f2fcbe0a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4463,17 +4463,6 @@ "sha.js": "^2.4.8" } }, - "create-react-class": { - "version": "15.6.3", - "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.3.tgz", - "integrity": "sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==", - "dev": true, - "requires": { - "fbjs": "^0.8.9", - "loose-envify": "^1.3.1", - "object-assign": "^4.1.1" - } - }, "create-react-ref": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/create-react-ref/-/create-react-ref-0.1.0.tgz", @@ -10809,16 +10798,38 @@ } }, "react": { - "version": "15.6.2", - "resolved": "https://registry.npmjs.org/react/-/react-15.6.2.tgz", - "integrity": "sha1-26BDSrQ5z+gvEI8PURZjkIF5qnI=", + "version": "16.9.0", + "resolved": "https://registry.npmjs.org/react/-/react-16.9.0.tgz", + "integrity": "sha512-+7LQnFBwkiw+BobzOF6N//BdoNw0ouwmSJTEm9cglOOmsg/TMiFHZLe2sEoN5M7LgJTj9oHH0gxklfnQe66S1w==", "dev": true, "requires": { - "create-react-class": "^15.6.0", - "fbjs": "^0.8.9", "loose-envify": "^1.1.0", - "object-assign": "^4.1.0", - "prop-types": "^15.5.10" + "object-assign": "^4.1.1", + "prop-types": "^15.6.2" + }, + "dependencies": { + "prop-types": { + "version": "15.7.2", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", + "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", + "dev": true, + "requires": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.8.1" + }, + "dependencies": { + "loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "dev": true, + "requires": { + "js-tokens": "^3.0.0 || ^4.0.0" + } + } + } + } } }, "react-codemirror2": { @@ -10834,26 +10845,45 @@ "dev": true }, "react-dom": { - "version": "15.6.2", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-15.6.2.tgz", - "integrity": "sha1-Qc+t9pO3V/rycIRDodH9WgK+9zA=", + "version": "16.9.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.9.0.tgz", + "integrity": "sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ==", "dev": true, "requires": { - "fbjs": "^0.8.9", "loose-envify": "^1.1.0", - "object-assign": "^4.1.0", - "prop-types": "^15.5.10" + "object-assign": "^4.1.1", + "prop-types": "^15.6.2", + "scheduler": "^0.15.0" + }, + "dependencies": { + "prop-types": { + "version": "15.7.2", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", + "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", + "dev": true, + "requires": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.8.1" + }, + "dependencies": { + "loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "dev": true, + "requires": { + "js-tokens": "^3.0.0 || ^4.0.0" + } + } + } + } } }, "react-is": { - "version": "16.8.6", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz", - "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==" - }, - "react-lifecycles-compat": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", - "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + "version": "16.9.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.9.0.tgz", + "integrity": "sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==" }, "react-monaco-editor": { "version": "0.26.2", @@ -11320,6 +11350,16 @@ "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", "dev": true }, + "scheduler": { + "version": "0.15.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.15.0.tgz", + "integrity": "sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==", + "dev": true, + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + }, "semver": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.0.tgz", diff --git a/package.json b/package.json index eb4d614bad..7bb44dc92b 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "node": ">=6" }, "peerDependencies": { - "react": ">=15" + "react": ">=16" }, "dependencies": { "@babel/runtime-corejs2": "^7.4.5", @@ -48,8 +48,7 @@ "core-js": "^2.5.7", "lodash": "^4.17.15", "prop-types": "^15.5.8", - "react-is": "^16.8.4", - "react-lifecycles-compat": "^3.0.4", + "react-is": "^16.9.0", "shortid": "^2.2.14" }, "devDependencies": { @@ -91,9 +90,9 @@ "monaco-editor-webpack-plugin": "^1.7.0", "nyc": "^13.2.0", "prettier": "^1.15.1", - "react": "^15.5.0", + "react": "^16.9.0", "react-codemirror2": "^4.1.0", - "react-dom": "^15.3.2", + "react-dom": "^16.9.0", "react-monaco-editor": "^0.26.2", "react-portal": "^4.2.0", "react-transform-catch-errors": "^1.0.0", diff --git a/playground/app.js b/playground/app.js index c1d6bd8ea2..e562fbec14 100644 --- a/playground/app.js +++ b/playground/app.js @@ -169,7 +169,7 @@ class Editor extends Component { this.state = { valid: true, code: props.code }; } - componentWillReceiveProps(props) { + UNSAFE_componentWillReceiveProps(props) { this.setState({ valid: true, code: props.code }); } diff --git a/src/components/Form.js b/src/components/Form.js index cb448d80fd..7b0129dfb7 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -42,7 +42,7 @@ export default class Form extends Component { this.formElement = null; } - componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps) { const nextState = this.getStateFromProps(nextProps, nextProps.formData); if ( !deepEquals(nextState.formData, nextProps.formData) && diff --git a/src/components/fields/ArrayField.js b/src/components/fields/ArrayField.js index ad1fe041e4..8512bca0a9 100644 --- a/src/components/fields/ArrayField.js +++ b/src/components/fields/ArrayField.js @@ -1,7 +1,6 @@ import AddButton from "../AddButton"; import IconButton from "../IconButton"; import React, { Component } from "react"; -import { polyfill } from "react-lifecycles-compat"; import includes from "core-js/library/fn/array/includes"; import * as types from "../../types"; @@ -212,10 +211,17 @@ class ArrayField extends Component { const keyedFormData = generateKeyedFormData(formData); this.state = { keyedFormData, + updatedKeyedFormData: false, }; } static getDerivedStateFromProps(nextProps, prevState) { + // Don't call getDerivedStateFromProps if keyed formdata was just updated. + if (prevState.updatedKeyedFormData) { + return { + updatedKeyedFormData: false, + }; + } const nextFormData = nextProps.formData; const previousKeyedFormData = prevState.keyedFormData; const newKeyedFormData = @@ -281,10 +287,10 @@ class ArrayField extends Component { item: this._getNewFormDataRow(), }; const newKeyedFormData = [...this.state.keyedFormData, newKeyedFormDataRow]; - this.setState( { keyedFormData: newKeyedFormData, + updatedKeyedFormData: true, }, () => onChange(keyedToPlainFormData(newKeyedFormData)) ); @@ -306,6 +312,7 @@ class ArrayField extends Component { this.setState( { keyedFormData: newKeyedFormData, + updatedKeyedFormData: true, }, () => onChange(keyedToPlainFormData(newKeyedFormData)) ); @@ -337,6 +344,7 @@ class ArrayField extends Component { this.setState( { keyedFormData: newKeyedFormData, + updatedKeyedFormData: true, }, () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema) ); @@ -778,6 +786,4 @@ if (process.env.NODE_ENV !== "production") { ArrayField.propTypes = types.fieldProps; } -polyfill(ArrayField); - export default ArrayField; diff --git a/src/components/fields/MultiSchemaField.js b/src/components/fields/MultiSchemaField.js index 21968ae729..33304b2e08 100644 --- a/src/components/fields/MultiSchemaField.js +++ b/src/components/fields/MultiSchemaField.js @@ -21,7 +21,7 @@ class AnyOfField extends Component { }; } - componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps) { const matchingOption = this.getMatchingOption( nextProps.formData, nextProps.options diff --git a/src/components/widgets/AltDateWidget.js b/src/components/widgets/AltDateWidget.js index ce8fd275fa..084e8ef053 100644 --- a/src/components/widgets/AltDateWidget.js +++ b/src/components/widgets/AltDateWidget.js @@ -63,7 +63,7 @@ class AltDateWidget extends Component { this.state = parseDateString(props.value, props.time); } - componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps) { this.setState(parseDateString(nextProps.value, nextProps.time)); } diff --git a/src/utils.js b/src/utils.js index 5abf4171a5..01c229c87b 100644 --- a/src/utils.js +++ b/src/utils.js @@ -103,7 +103,10 @@ export function getWidget(schema, widget, registeredWidgets = {}) { return Widget.MergedWidget; } - if (typeof widget === "function" || ReactIs.isForwardRef(widget)) { + if ( + typeof widget === "function" || + ReactIs.isForwardRef(React.createElement(widget)) + ) { return mergeOptions(widget); } diff --git a/test/Form_test.js b/test/Form_test.js index 04e42f5669..7f7d4ffa17 100644 --- a/test/Form_test.js +++ b/test/Form_test.js @@ -787,7 +787,7 @@ describeRepeated("Form common", createFormComponent => { const { comp, node } = createFormComponent({ schema }); Simulate.click(node.querySelector(".array-item-add button")); - Simulate.submit(node); + Simulate.Simulate.submit(node); expect(comp.state.formData).eql({ object: { @@ -846,7 +846,7 @@ describeRepeated("Form common", createFormComponent => { onError, }); - Simulate.submit(node); + Simulate.Simulate.submit(node); sinon.assert.notCalled(onSubmit); }); @@ -950,7 +950,7 @@ describeRepeated("Form common", createFormComponent => { const onError = sandbox.spy(); const { node } = createFormComponent({ schema, formData, onError }); - Simulate.submit(node); + Simulate.Simulate.submit(node); sinon.assert.calledOnce(onError); }); @@ -974,7 +974,9 @@ describeRepeated("Form common", createFormComponent => { }); describe("when the form data is set to null", () => { - beforeEach(() => comp.componentWillReceiveProps({ formData: null })); + beforeEach(() => + comp.UNSAFE_componentWillReceiveProps({ formData: null }) + ); it("should call onChange", () => { sinon.assert.calledOnce(onChangeProp); @@ -990,7 +992,7 @@ describeRepeated("Form common", createFormComponent => { }; beforeEach(() => - comp.componentWillReceiveProps({ + comp.UNSAFE_componentWillReceiveProps({ schema: newSchema, formData: "some value", }) @@ -1010,7 +1012,7 @@ describeRepeated("Form common", createFormComponent => { }; beforeEach(() => - comp.componentWillReceiveProps({ + comp.UNSAFE_componentWillReceiveProps({ schema: newSchema, formData: "something else", }) @@ -1030,7 +1032,10 @@ describeRepeated("Form common", createFormComponent => { }; beforeEach(() => - comp.componentWillReceiveProps({ schema: newSchema, formData: null }) + comp.UNSAFE_componentWillReceiveProps({ + schema: newSchema, + formData: null, + }) ); it("should call onChange", () => { @@ -1099,7 +1104,7 @@ describeRepeated("Form common", createFormComponent => { it("should update form state from new formData prop value", () => { const { comp } = createFormComponent(formProps); - comp.componentWillReceiveProps({ formData: "yo" }); + comp.UNSAFE_componentWillReceiveProps({ formData: "yo" }); expect(comp.state.formData).eql("yo"); }); @@ -1107,7 +1112,7 @@ describeRepeated("Form common", createFormComponent => { it("should validate formData when the schema is updated", () => { const { comp } = createFormComponent(formProps); - comp.componentWillReceiveProps({ + comp.UNSAFE_componentWillReceiveProps({ formData: "yo", schema: { type: "number" }, }); @@ -1130,7 +1135,7 @@ describeRepeated("Form common", createFormComponent => { }, }); - comp.componentWillReceiveProps({ formData: { foo: "yo" } }); + comp.UNSAFE_componentWillReceiveProps({ formData: { foo: "yo" } }); expect(comp.state.formData).eql({ foo: "yo" }); }); @@ -1146,7 +1151,7 @@ describeRepeated("Form common", createFormComponent => { }; const { comp } = createFormComponent({ schema }); - comp.componentWillReceiveProps({ formData: ["yo"] }); + comp.UNSAFE_componentWillReceiveProps({ formData: ["yo"] }); expect(comp.state.formData).eql(["yo"]); }); @@ -1319,22 +1324,13 @@ describeRepeated("Form common", createFormComponent => { }, }); - function submit(node) { - try { - Simulate.submit(node); - } catch (err) { - // Validation is expected to fail and call console.error, which is - // stubbed to actually throw in createSandbox(). - } - } - - submit(node); + Simulate.submit(node); // Fix the first field Simulate.change(node.querySelectorAll("input[type=text]")[0], { target: { value: "fixed error" }, }); - submit(node); + Simulate.submit(node); expect(node.querySelectorAll(".field-error")).to.have.length.of(1); @@ -1342,10 +1338,10 @@ describeRepeated("Form common", createFormComponent => { Simulate.change(node.querySelectorAll("input[type=text]")[1], { target: { value: "fixed error too" }, }); - submit(node); + Simulate.Simulate.submit(node); // No error remaining, shouldn't throw. - Simulate.submit(node); + Simulate.Simulate.submit(node); expect(node.querySelectorAll(".field-error")).to.have.length.of(0); }); @@ -1410,7 +1406,7 @@ describeRepeated("Form common", createFormComponent => { Simulate.change(node.querySelector("input[type=text]"), { target: { value: "short" }, }); - Simulate.submit(node); + Simulate.Simulate.submit(node); expect(comp.state.errorSchema).eql({}); }); @@ -1432,7 +1428,7 @@ describeRepeated("Form common", createFormComponent => { Simulate.change(node.querySelector("input[type=text]"), { target: { value: "short" }, }); - Simulate.submit(node); + Simulate.Simulate.submit(node); expect(comp.state.errorSchema).eql({ __errors: ["should NOT be shorter than 8 characters"], @@ -1446,7 +1442,7 @@ describeRepeated("Form common", createFormComponent => { Simulate.change(node.querySelector("input[type=text]"), { target: { value: "short" }, }); - Simulate.submit(node); + Simulate.Simulate.submit(node); sinon.assert.calledWithMatch( onError, @@ -1469,7 +1465,7 @@ describeRepeated("Form common", createFormComponent => { Simulate.change(node.querySelector("input[type=text]"), { target: { value: "short" }, }); - Simulate.submit(node); + Simulate.Simulate.submit(node); expect(comp.state.errorSchema).eql({ __errors: ["should NOT be shorter than 8 characters"], @@ -1480,7 +1476,7 @@ describeRepeated("Form common", createFormComponent => { Simulate.change(node.querySelector("input[type=text]"), { target: { value: "long enough" }, }); - Simulate.submit(node); + Simulate.Simulate.submit(node); expect(comp.state.errorSchema).eql({}); expect(comp.state.errors).eql([]); @@ -1915,7 +1911,7 @@ describeRepeated("Form common", createFormComponent => { it("should replace state when props remove formData keys", () => { const formData = { foo: "foo", bar: "bar" }; const { comp, node } = createFormComponent({ schema, formData }); - comp.componentWillReceiveProps({ + comp.UNSAFE_componentWillReceiveProps({ schema: { type: "object", properties: { @@ -1935,7 +1931,7 @@ describeRepeated("Form common", createFormComponent => { it("should replace state when props change formData keys", () => { const formData = { foo: "foo", bar: "bar" }; const { comp, node } = createFormComponent({ schema, formData }); - comp.componentWillReceiveProps({ + comp.UNSAFE_componentWillReceiveProps({ schema: { type: "object", properties: { @@ -1982,7 +1978,7 @@ describeRepeated("Form common", createFormComponent => { it("should not update idSchema for a falsey value", () => { const formData = { a: "int" }; const { comp } = createFormComponent({ schema, formData }); - comp.componentWillReceiveProps({ + comp.UNSAFE_componentWillReceiveProps({ schema: { type: "object", properties: { @@ -2016,7 +2012,7 @@ describeRepeated("Form common", createFormComponent => { a: "int", }; const { comp } = createFormComponent({ schema, formData }); - comp.componentWillReceiveProps({ + comp.UNSAFE_componentWillReceiveProps({ schema: { type: "object", properties: { @@ -2425,7 +2421,7 @@ describe("Form omitExtraData and liveOmit", () => { foo: "", }); - Simulate.submit(node); + Simulate.Simulate.submit(node); sinon.assert.calledOnce(comp.getUsedFormData); }); diff --git a/test/SchemaField_test.js b/test/SchemaField_test.js index 7210ab955d..e94adea6df 100644 --- a/test/SchemaField_test.js +++ b/test/SchemaField_test.js @@ -296,21 +296,13 @@ describe("SchemaField", () => { return errors; } - function submit(node) { - try { - Simulate.submit(node); - } catch (e) { - // Silencing error thrown as failure is expected here - } - } - it("should render its own errors", () => { const { node } = createFormComponent({ schema, uiSchema, validate, }); - submit(node); + Simulate.submit(node); const matches = node.querySelectorAll( "form > .form-group > div > .error-detail .text-danger" @@ -325,7 +317,7 @@ describe("SchemaField", () => { uiSchema, validate, }); - submit(node); + Simulate.submit(node); const matches = node.querySelectorAll( "form .form-group .form-group .text-danger" @@ -346,7 +338,7 @@ describe("SchemaField", () => { validate, widgets: { BaseInput: customStringWidget }, }); - submit(node); + Simulate.submit(node); const matches = node.querySelectorAll(".custom-text-widget"); expect(matches).to.have.length.of(1); diff --git a/test/StringField_test.js b/test/StringField_test.js index 97189b26bb..dd9dff557f 100644 --- a/test/StringField_test.js +++ b/test/StringField_test.js @@ -1145,7 +1145,7 @@ describe("StringField", () => { liveValidate: true, }); - comp.componentWillReceiveProps({ formData: "2012-12-12" }); + comp.UNSAFE_componentWillReceiveProps({ formData: "2012-12-12" }); expect(comp.state.errors).to.have.length.of(0); }); diff --git a/test/performance_test.js b/test/performance_test.js index 3cfa2140ec..16705243bf 100644 --- a/test/performance_test.js +++ b/test/performance_test.js @@ -29,7 +29,7 @@ describe("Rendering performance optimizations", () => { const { comp } = createFormComponent({ schema, uiSchema }); sandbox.stub(comp, "render").returns(
); - comp.componentWillReceiveProps({ schema }); + comp.UNSAFE_componentWillReceiveProps({ schema }); sinon.assert.notCalled(comp.render); }); @@ -41,7 +41,7 @@ describe("Rendering performance optimizations", () => { const { comp } = createFormComponent({ schema, formData }); sandbox.stub(comp, "render").returns(
); - comp.componentWillReceiveProps({ formData }); + comp.UNSAFE_componentWillReceiveProps({ formData }); sinon.assert.notCalled(comp.render); }); diff --git a/test/test_utils.js b/test/test_utils.js index 0dadd91d6b..0342ef66dd 100644 --- a/test/test_utils.js +++ b/test/test_utils.js @@ -19,10 +19,6 @@ export function createFormComponent(props) { export function createSandbox() { const sandbox = sinon.sandbox.create(); - // Ensure we catch any React warning and mark them as test failures. - sandbox.stub(console, "error", error => { - throw new Error(error); - }); return sandbox; } diff --git a/test/utils_test.js b/test/utils_test.js index 87380fa154..57b10b720a 100644 --- a/test/utils_test.js +++ b/test/utils_test.js @@ -2869,12 +2869,16 @@ describe("utils", () => { ); }); - //TODO: Unskip the test when react>=16.3 will be used - it.skip("should not fail on forwarded ref component", () => { + it("should not fail on correct component", () => { + const Widget = props =>
; + expect(getWidget(schema, Widget)({})).eql(); + }); + + it("should not fail on forwarded ref component", () => { const Widget = React.forwardRef((props, ref) => (
)); - expect(getWidget(schema, Widget)).eql(); + expect(getWidget(schema, Widget)({})).eql(); }); }); }); diff --git a/test/validate_test.js b/test/validate_test.js index e118c075d1..cbc1c5b1bc 100644 --- a/test/validate_test.js +++ b/test/validate_test.js @@ -513,7 +513,7 @@ describe("Validation", () => { validate, liveValidate: true, }); - comp.componentWillReceiveProps({ formData }); + comp.UNSAFE_componentWillReceiveProps({ formData }); expect(comp.state.errorSchema).eql({ __errors: ["Invalid"], @@ -595,7 +595,7 @@ describe("Validation", () => { validate, liveValidate: true, }); - comp.componentWillReceiveProps({ formData }); + comp.UNSAFE_componentWillReceiveProps({ formData }); expect(comp.state.errorSchema).eql({ __errors: [], @@ -642,7 +642,7 @@ describe("Validation", () => { validate, liveValidate: true, }); - comp.componentWillReceiveProps({ formData }); + comp.UNSAFE_componentWillReceiveProps({ formData }); expect(comp.state.errorSchema).eql({ 0: { @@ -689,7 +689,7 @@ describe("Validation", () => { validate, liveValidate: true, }); - comp.componentWillReceiveProps({ formData }); + comp.UNSAFE_componentWillReceiveProps({ formData }); expect(comp.state.errorSchema).eql({ 0: { __errors: [] },