Merge pull request #20653 from Yoast/feature/upgrade-react-and-tests

Feature/upgrade react and tests

.eslintrc

@@ -6,7 +6,7 @@ parserOptions:
 
 settings:
   react:
-    version: "16.8"
+    version: "18.2"
 
 rules:
   no-prototype-builtins: 0
@@ -36,19 +36,6 @@ overrides:
       react/default-props-match-prop-types: 1
       react/no-unused-prop-types: 1
       require-jsdoc: 1
-  - files:
-      - "packages/replacement-variable-editor/**/*.js"
-    rules:
-      react/jsx-no-bind: 1
-      react/require-default-props: 1
-  - files:
-      - "packages/search-metadata-previews/**/*.js"
-    rules:
-      react/jsx-no-bind: 1
-      react/no-unused-state: 1
-      react/no-access-state-in-setstate: 1
-      react/require-default-props: 1
-      react/default-props-match-prop-types: 1
   - files:
       - "packages/yoastseo/**/*.js"
     settings:

package.json

@@ -35,7 +35,10 @@
     "prestart": "grunt build:css && grunt copy:js-dependencies",
     "start": "wp-scripts start --config config/webpack/webpack.config.js"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@draft-js-plugins/mention": "^5.0.0",
+    "draft-js": "^0.11.7"
+  },
   "devDependencies": {
     "@babel/core": "^7.18.5",
     "@slack/webhook": "^5.0.2",
@@ -56,9 +59,6 @@
     "core-js": "^2.6.12",
     "cross-env": "^7.0.3",
     "dotenv": "^8.2.0",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
-    "enzyme-to-json": "^3.6.1",
     "eslint": "^7.32.0",
     "eslint-config-yoast": "^6.0.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
@@ -74,9 +74,6 @@
     "node-fetch": "^2.6.1",
     "postcss": "^8.4.14",
     "postcss-cli": "^9.1.0",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "react-test-renderer": "^16.14.0",
     "readline-sync": "^1.4.9",
     "shusher": "^0.1.1",
     "tmp": "^0.1.0",

packages/analysis-report/package.json

@@ -25,7 +25,9 @@
     "@yoast/style-guide": "^0.13.0",
     "lodash": "^4.17.11",
     "prop-types": "^15.6.0",
-    "styled-components": "^5.3.6"
+    "styled-components": "^5.3.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.17.10",
@@ -39,11 +41,7 @@
     "eslint-plugin-react": "^7.29.4",
     "jest": "^27.5.1",
     "jest-styled-components": "^7.0.8",
-    "react-test-renderer": "^16.14.0"
-  },
-  "peerDependencies": {
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0"
+    "react-test-renderer": "^18.2.0"
   },
   "publishConfig": {
     "access": "public"

packages/components/jest/setupTests.js

@@ -1,6 +1,2 @@
 import "raf/polyfill";
 import "jest-styled-components";
-import Enzyme from "enzyme";
-import EnzymeAdapter from "enzyme-adapter-react-16";
-
-Enzyme.configure( { adapter: new EnzymeAdapter() } );

packages/components/package.json

@@ -36,6 +36,8 @@
     "interpolate-components": "^1.1.1",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-modal": "^3.8.1",
     "react-select": "^3.1.0",
     "react-tabs": "^2.3.0",
@@ -44,15 +46,9 @@
   "devDependencies": {
     "@yoast/browserslist-config": "^1.2.2",
     "browserslist": "^4.7.3",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
     "jest-styled-components": "^7.0.3",
     "raf": "^3.4.0",
-    "react-test-renderer": "^16.14.0"
-  },
-  "peerDependencies": {
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0"
+    "react-test-renderer": "^18.2.0"
   },
   "publishConfig": {
     "access": "public"

packages/components/tests/ScreenReaderTextTest.js

@@ -25,16 +25,20 @@ describe( "ScreenReaderText", () => {
 		renderer.render( <ScreenReaderText><div /></ScreenReaderText> );
 
 		expect( console.error ).toBeCalled();
-		expect( console.error.mock.calls[ 0 ][ 0 ] )
-			.toContain( "Warning: Failed prop type: Invalid prop `children` of type `object` supplied to `ScreenReaderText`, expected `string`." );
+		expect( console.error.mock.calls[ 0 ][ 0 ] ).toBe( "Warning: Failed %s type: %s%s" );
+		expect( console.error.mock.calls[ 0 ][ 1 ] ).toBe( "prop" );
+		expect( console.error.mock.calls[ 0 ][ 2 ] )
+			.toBe( "Invalid prop `children` of type `object` supplied to `ScreenReaderText`, expected `string`." );
 	} );
 
 	it( "generates a warning when no children are passed in.", () => {
 		console.error = jest.fn();
 		renderer.render( <ScreenReaderText /> );
 
 		expect( console.error ).toBeCalled();
-		expect( console.error.mock.calls[ 0 ][ 0 ] )
-			.toContain( "Warning: Failed prop type" );
+		expect( console.error.mock.calls[ 0 ][ 0 ] ).toBe( "Warning: Failed %s type: %s%s" );
+		expect( console.error.mock.calls[ 0 ][ 1 ] ).toBe( "prop" );
+		expect( console.error.mock.calls[ 0 ][ 2 ] )
+			.toBe( "The prop `children` is marked as required in `ScreenReaderText`, but its value is `undefined`." );
 	} );
 } );

packages/components/tests/__snapshots__/WordListTest.js.snap

@@ -9,11 +9,9 @@ exports[`WordList renders correctly without items 1`] = `
       Wordlist
     </strong>
   </p>
-  
   <ol
     className="__list"
   />
-  
 </div>
 `;
 
@@ -26,7 +24,6 @@ exports[`WordList renders wordlist as list items 1`] = `
       Wordlist
     </strong>
   </p>
-  
   <ol
     className="__list"
   >
@@ -46,6 +43,5 @@ exports[`WordList renders wordlist as list items 1`] = `
       word3
     </li>
   </ol>
-  
 </div>
 `;

packages/components/tests/button/ButtonsTest.js

@@ -75,8 +75,9 @@ describe( "Button", () => {
 		);
 
 		expect( console.error ).toBeCalled();
-		expect( console.error.mock.calls[ 0 ][ 0 ] )
-			.toContain( "Warning: Failed prop type: Invalid prop `variant` of value `[object Object]` supplied to `Button`" );
+		expect( console.error.mock.calls[ 0 ][ 0 ] ).toBe( "Warning: Failed %s type: %s%s" );
+		expect( console.error.mock.calls[ 0 ][ 1 ] ).toBe( "prop" );
+		expect( console.error.mock.calls[ 0 ][ 2 ] ).toContain( "Invalid prop `variant` of value `[object Object]` supplied to `Button`" );
 	} );
 } );
 

packages/components/tests/inputTest.js

@@ -39,8 +39,9 @@ describe( "Input", () => {
 		renderer.render( <Input type="invalidType" /> );
 
 		expect( console.error ).toBeCalled();
-		expect( console.error.mock.calls[ 0 ][ 0 ] )
-			.toContain( "Warning: Failed prop type: Invalid prop `type` of value `invalidType` supplied to `Input`" );
+		expect( console.error.mock.calls[ 0 ][ 0 ] ).toBe( "Warning: Failed %s type: %s%s" );
+		expect( console.error.mock.calls[ 0 ][ 1 ] ).toBe( "prop" );
+		expect( console.error.mock.calls[ 0 ][ 2 ] ).toContain( "Invalid prop `type` of value `invalidType` supplied to `Input`" );
 	} );
 
 	it( "generates an input based on the defaults and additional, optional attributes", () => {
@@ -72,7 +73,8 @@ describe( "Input", () => {
 		renderer.render( <Input name="textInput" onChange={ 0 } /> );
 
 		expect( console.error ).toBeCalled();
-		expect( console.error.mock.calls[ 0 ][ 0 ] )
-			.toContain( "Warning: Failed prop type: Invalid prop `onChange` of type `number` supplied to `Input`, expected `function`." );
+		expect( console.error.mock.calls[ 0 ][ 0 ] ).toBe( "Warning: Failed %s type: %s%s" );
+		expect( console.error.mock.calls[ 0 ][ 1 ] ).toBe( "prop" );
+		expect( console.error.mock.calls[ 0 ][ 2 ] ).toBe( "Invalid prop `onChange` of type `number` supplied to `Input`, expected `function`." );
 	} );
 } );

packages/components/tests/inputs/TextAreaTest.js

@@ -42,7 +42,8 @@ describe( "TextArea", () => {
 		);
 
 		expect( console.error ).toBeCalled();
-		expect( console.error.mock.calls[ 0 ][ 0 ] )
-			.toContain( "Warning: Failed prop type: Invalid prop `id` of type `boolean` supplied to `TextArea`, expected `string`." );
+		expect( console.error.mock.calls[ 0 ][ 0 ] ).toBe( "Warning: Failed %s type: %s%s" );
+		expect( console.error.mock.calls[ 0 ][ 1 ] ).toBe( "prop" );
+		expect( console.error.mock.calls[ 0 ][ 2 ] ).toBe( "Invalid prop `id` of type `boolean` supplied to `TextArea`, expected `string`." );
 	} );
 } );

packages/components/tests/inputs/TextInputTest.js

@@ -57,8 +57,9 @@ describe( "TextInput", () => {
 		renderer.render( <TextInput label="hey" type="invalidType" /> );
 
 		expect( console.error ).toBeCalled();
-		expect( console.error.mock.calls[ 0 ][ 0 ] )
-			.toContain( "Warning: Failed prop type: Invalid prop `type` of value `invalidType` supplied to `TextInput`" );
+		expect( console.error.mock.calls[ 0 ][ 0 ] ).toBe( "Warning: Failed %s type: %s%s" );
+		expect( console.error.mock.calls[ 0 ][ 1 ] ).toBe( "prop" );
+		expect( console.error.mock.calls[ 0 ][ 2 ] ).toContain( "Invalid prop `type` of value `invalidType` supplied to `TextInput`" );
 	} );
 
 	it( "generates an input based on the defaults and additional, optional attributes", () => {
@@ -88,7 +89,9 @@ describe( "TextInput", () => {
 		renderer.render( <TextInput label="hi" name="textInput" onChange={ 0 } /> );
 
 		expect( console.error ).toBeCalled();
-		expect( console.error.mock.calls[ 0 ][ 0 ] )
-			.toContain( "Warning: Failed prop type: Invalid prop `onChange` of type `number` supplied to `TextInput`, expected `function`." );
+		expect( console.error.mock.calls[ 0 ][ 0 ] ).toBe( "Warning: Failed %s type: %s%s" );
+		expect( console.error.mock.calls[ 0 ][ 1 ] ).toBe( "prop" );
+		expect( console.error.mock.calls[ 0 ][ 2 ] )
+			.toBe( "Invalid prop `onChange` of type `number` supplied to `TextInput`, expected `function`." );
 	} );
 } );