fix: add react 18 support, fixes #728 (#729)

* fix: add react 18 support, fixes #728

* fix: Use react 18 to execute the tests suite

Also replace the outdated enzyme by @testing-libray/react

* fix: explicitly use last version of each major version for smoke tests

Co-authored-by: Armand Abric <[email protected]>

Author: markhughes

.github/workflows/continuous-integration.yaml

@@ -27,8 +27,12 @@ jobs:
       - run: yarn run smoke esm 15.6.2
       - run: yarn run smoke cjs 16.7.0
       - run: yarn run smoke esm 16.7.0
-      - run: yarn run smoke cjs 17.0.1
-      - run: yarn run smoke esm 17.0.1
+      - run: yarn run smoke cjs 17.0.2
+      - run: yarn run smoke esm 17.0.2
+      - run: yarn run smoke cjs 18.0.0
+      - run: yarn run smoke esm 18.0.0
+      - run: yarn run smoke cjs 18.1.0
+      - run: yarn run smoke esm 18.1.0
       - run: yarn run smoke cjs latest
       - run: yarn run smoke esm latest
       - run: yarn run smoke cjs next

package.json

@@ -24,10 +24,7 @@
     "smoke": "node tests/smoke/run"
   },
   "lint-staged": {
-    "*.js": [
-      "prettier --write \"**/*.{js,json}\"",
-      "git add"
-    ]
+    "*.js": ["prettier --write \"**/*.{js,json}\"", "git add"]
   },
   "author": {
     "name": "Algolia, Inc.",
@@ -43,13 +40,13 @@
     "@babel/preset-react": "7.16.7",
     "@commitlint/cli": "8.3.6",
     "@commitlint/config-angular": "8.3.6",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.2.0",
     "babel-eslint": "10.1.0",
     "babel-jest": "24.9.0",
     "babel-register": "6.26.0",
     "conventional-changelog-cli": "2.2.2",
     "doctoc": "1.4.0",
-    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.6",
     "eslint": "6.8.0",
     "eslint-config-algolia": "14.0.1",
     "eslint-config-prettier": "6.15.0",
@@ -67,9 +64,9 @@
     "lint-staged": "10.5.4",
     "mversion": "2.0.1",
     "prettier": "1.19.1",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "react-test-renderer": "16.14.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-test-renderer": "^18.1.0",
     "rollup": "2.70.1",
     "rollup-plugin-babel": "4.4.0",
     "rollup-plugin-node-builtins": "2.1.2",
@@ -78,17 +75,15 @@
     "rollup-plugin-sourcemaps": "0.6.3"
   },
   "peerDependencies": {
-    "react": "^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1",
-    "react-dom": "^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1"
+    "react": "^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0",
+    "react-dom": "^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0"
   },
   "dependencies": {
     "@base2/pretty-print-object": "1.0.1",
     "is-plain-object": "5.0.0",
-    "react-is": "17.0.2"
+    "react-is": "18.1.0"
   },
   "jest": {
-    "setupFilesAfterEnv": [
-      "<rootDir>tests/setupTests.js"
-    ]
+    "setupFilesAfterEnv": ["<rootDir>tests/setupTests.js"]
   }
 }

src/index.spec.js

@@ -8,7 +8,7 @@
 
 import React, { Fragment, Component } from 'react';
 import { createRenderer } from 'react-test-renderer/shallow';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import reactElementToJSXString, { preserveFunctionLineBreak } from './index';
 import AnonymousStatelessComponent from './AnonymousStatelessComponent';
 
@@ -1132,18 +1132,22 @@ describe('reactElementToJSXString(ReactElement)', () => {
           <div>
             {insideString}
 
-            <div id="hello" />
+            <div>Hello world!</div>
 
             <p>Start editing to see some magic happen :)</p>
           </div>
         );
       }
     }
-    expect(mount(<App />).find('#hello')).toHaveLength(1);
+
+    render(<App />);
+
+    expect(screen.getByText('Hello world!')).toBeInTheDocument();
   });
 
   it('should not cause recursive loop when an element contains a ref', () => {
-    expect.assertions(1);
+    expect.assertions(2);
+
     class App extends Component {
       constructor(props) {
         super(props);
@@ -1159,10 +1163,18 @@ describe('reactElementToJSXString(ReactElement)', () => {
         );
       }
       render() {
-        return <input ref={this.inputRef} />;
+        return (
+          <>
+            <input ref={this.inputRef} />
+            <div>Hello world!</div>
+          </>
+        );
       }
     }
-    mount(<App />);
+
+    render(<App />);
+
+    expect(screen.getByText('Hello world!')).toBeInTheDocument();
   });
 
   it('should use inferred function name as display name for `forwardRef` element', () => {

tests/setupTests.js

@@ -1,4 +1 @@
-import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-
-Enzyme.configure({ adapter: new Adapter() });
+import '@testing-library/jest-dom';