Support React 17 [Continued PR from @eps1lon's initial PR]

.github/ISSUE_TEMPLATE/Bug_report.md

@@ -43,6 +43,7 @@ If you haven't found any duplicated issues, please report it with your environme
 
 #### Adapter
 
+- [ ] enzyme-adapter-react-17
 - [ ] enzyme-adapter-react-16
 - [ ] enzyme-adapter-react-16.3
 - [ ] enzyme-adapter-react-16.2

.github/workflows/node.yml

@@ -30,6 +30,7 @@ jobs:
       fail-fast: false
       matrix:
         react:
+          - '17'
           - '16'
           - '16.3'
           - '16.2'
@@ -71,9 +72,12 @@ jobs:
       fail-fast: false
       matrix:
         node-version:
+          - '25'
+          - '22'
           - '18'
           - '4'
         react:
+          - '17'
           - '16.14'
           - '16.13'
           - '16.12'

CONTRIBUTING.md

@@ -85,6 +85,19 @@ npm run build:watch
 npm run test:watch
 ```
 
+Alternatively, run this in one terminal tab:
+```bash
+# build Enzyme locally upon save
+npm run build:watch
+```
+
+In another terminal tab execute a specific test file for faster TDD test execution:
+```bash
+npx mocha packages/enzyme-test-suite/build/ReactWrapper-spec.js
+```
+
+NOTE that this alternate strategy may fail to rebuild some code and will bypass lint, so `npm test` will still be necessary periodically.
+
 ### Tests for functionality shared between `shallow` and `mount`
 
 Tests for a method "foo" are stored in `packages/enzyme-test-suite/test/shared/methods/foo`. The file default exports a function that receives an injected object argument, containing the following properties:

README.md

@@ -26,20 +26,21 @@ along with an Adapter corresponding to the version of react (or other UI Compone
 are using. For instance, if you are using enzyme with React 16, you can run:
 
 ```bash
-npm i --save-dev enzyme enzyme-adapter-react-16
+npm i --save-dev enzyme enzyme-adapter-react-17
 ```
 
 Each adapter may have additional peer dependencies which you will need to install as well. For instance,
-`enzyme-adapter-react-16` has peer dependencies on `react` and `react-dom`.
+`enzyme-adapter-react-17` has peer dependencies on `react` and `react-dom`.
 
-At the moment, Enzyme has adapters that provide compatibility with `React 16.x`, `React 15.x`,
+At the moment, Enzyme has adapters that provide compatibility with `React 17.x`, `React 16.x`, `React 15.x`,
 `React 0.14.x` and `React 0.13.x`.
 
 The following adapters are officially provided by enzyme, and have the following compatibility with
 React:
 
 | Enzyme Adapter Package | React semver compatibility |
 | --- | --- |
+| `enzyme-adapter-react-17` | `^17.0.0` |
 | `enzyme-adapter-react-16` | `^16.4.0-0` |
 | `enzyme-adapter-react-16.3` | `~16.3.0-0` |
 | `enzyme-adapter-react-16.2` | `~16.2` |
@@ -54,7 +55,7 @@ the top level `configure(...)` API.
 
 ```js
 import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from 'enzyme-adapter-react-17';
 
 Enzyme.configure({ adapter: new Adapter() });
 ```

SUMMARY.md

@@ -14,6 +14,7 @@
   * [Lab](/docs/guides/lab.md)
   * [Tape and AVA](/docs/guides/tape-ava.md)
 * [Installation](/docs/installation/README.md)
+* [Working with React 17.x](/docs/installation/react-17.md)
   * [Working with React 16.x](/docs/installation/react-16.md)
   * [Working with React 15.x](/docs/installation/react-15.md)
   * [Working with React 0.14.x](/docs/installation/react-014.md)

docs/guides/karma.md

@@ -11,7 +11,7 @@ Create an Enzyme setup file. This file will configure Enzyme with the appropriat
 ```js
 /* test/enzyme.js */
 import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from 'enzyme-adapter-react-17';
 import jasmineEnzyme from 'jasmine-enzyme';
 
 // Configure Enzyme for the appropriate React adapter

docs/guides/migration-from-2-to-3.md

@@ -29,16 +29,16 @@ enzyme now has an "Adapter" system. This means that you now need to install enzy
 another module that provides the Adapter that tells enzyme how to work with your version of React
 (or whatever other React-like library you are using).
 
-At the time of writing this, enzyme publishes "officially supported" adapters for React 0.13.x,
-0.14.x, 15.x, and 16.x. These adapters are npm packages of the form `enzyme-adapter-react-{{version}}`.
+At the time of writing this, enzyme publishes "officially supported" adapters for React 0.13.x, 0.14.x, 15.x, 16.x, and 17.x.
+These adapters are npm packages of the form `enzyme-adapter-react-{{version}}`.
 
 You will want to configure enzyme with the adapter you'd like to use before using enzyme in your
 tests. The way to do this is with `enzyme.configure(...)`. For example, if your project depends
-on React 16, you would want to configure enzyme this way:
+on React 17, you would want to configure enzyme this way:
 
 ```js
 import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from 'enzyme-adapter-react-17';
 
 Enzyme.configure({ adapter: new Adapter() });
 ```
@@ -47,6 +47,7 @@ The list of adapter npm packages for React semver ranges are as follows:
 
 | enzyme Adapter Package | React semver compatibility |
 | --- | --- |
+| `enzyme-adapter-react-17` | `^17.0.0` |
 | `enzyme-adapter-react-16` | `^16.4.0-0` |
 | `enzyme-adapter-react-16.3` | `~16.3.0-0` |
 | `enzyme-adapter-react-16.2` | `~16.2` |

docs/guides/react-native.md

@@ -14,10 +14,10 @@ To use enzyme to test React Native, you currently need to configure an adapter,
 ## Configuring an Adapter
 
 While a React Native adapter is [in discussion](https://github.com/enzymejs/enzyme/issues/1436),
-a standard adapter may be used, such as 'enzyme-adapter-react-16':
+a standard adapter may be used, such as 'enzyme-adapter-react-17':
 
 ```jsx
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from 'enzyme-adapter-react-17';
 
 Enzyme.configure({ adapter: new Adapter() });
 ```
@@ -74,7 +74,7 @@ Then create or update the file specified in `setupFilesAfterEnv`, in this case `
 
 import 'react-native';
 import 'jest-enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from 'enzyme-adapter-react-17';
 import Enzyme from 'enzyme';
 
 /**
@@ -113,7 +113,7 @@ Update the file specified in `setupFilesAfterEnv`, in this case `setup-tests.js`
 ```jsx
 import 'react-native';
 import 'jest-enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from 'enzyme-adapter-react-17';
 import Enzyme from 'enzyme';
 
 /**

docs/guides/tape-ava.md

@@ -4,7 +4,7 @@ enzyme works well with [Tape](https://github.com/substack/tape) and [AVA](https:
 Simply install it and start using it:
 
 ```bash
-npm i --save-dev enzyme enzyme-adapter-react-16
+npm i --save-dev enzyme enzyme-adapter-react-17
 ```
 
 ## Tape
@@ -13,7 +13,7 @@ npm i --save-dev enzyme enzyme-adapter-react-16
 import test from 'tape';
 import React from 'react';
 import { shallow, mount, configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from 'enzyme-adapter-react-17';
 
 import Foo from '../path/to/foo';
 
@@ -38,7 +38,7 @@ test('mount', (t) => {
 import test from 'ava';
 import React from 'react';
 import { shallow, mount, configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from 'enzyme-adapter-react-17';
 
 import Foo from '../path/to/foo';
 

docs/installation/react-16.md

@@ -10,7 +10,7 @@ npm i --save react@16 react-dom@16
 Next, to get started with enzyme, you can simply install it with npm:
 
 ```bash
-npm i --save-dev enzyme enzyme-adapter-react-16
+npm i --save-dev enzyme enzyme-adapter-react-17
 ```
 
 And then you're ready to go!  In your test files you can simply `require` or `import` enzyme:
@@ -19,7 +19,7 @@ ES6:
 ```js
 // setup file
 import { configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from 'enzyme-adapter-react-17';
 
 configure({ adapter: new Adapter() });
 ```

env.js

@@ -86,6 +86,9 @@ function getAdapter(reactVersion) {
       return '16.1';
     }
   }
+  if (semver.intersects(reactVersion, '^17.0.0')) {
+    return '17';
+  }
   return null;
 }
 const reactVersion = version < 15 ? '0.' + version : version;

karma.conf.js

@@ -16,13 +16,15 @@ function getPlugins() {
   const adapter162 = new IgnorePlugin(/enzyme-adapter-react-16.2$/);
   const adapter163 = new IgnorePlugin(/enzyme-adapter-react-16.3$/);
   const adapter16 = new IgnorePlugin(/enzyme-adapter-react-16$/);
+  const adapter17 = new IgnorePlugin(/enzyme-adapter-react-17$/);
 
   var plugins = [
     adapter13,
     adapter14,
     adapter154,
     adapter15,
     adapter16,
+    adapter17,
   ];
 
   function not(x) {
@@ -48,6 +50,8 @@ function getPlugins() {
     plugins = plugins.filter(not(adapter163));
   } else if (is('^16.4.0-0')) {
     plugins = plugins.filter(not(adapter16));
+  } else if (is('^17.0.0')) {
+    plugins = plugins.filter(not(adapter17));
   }
 
   return plugins;

packages/enzyme-adapter-react-17/.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": [
+    ["airbnb", { "transformRuntime": false }],
+  ],
+  "plugins": [
+    ["transform-replace-object-assign", { "moduleSpecifier": "object.assign" }],
+  ],
+  "sourceMaps": "both",
+}

packages/enzyme-adapter-react-17/.eslintrc

@@ -0,0 +1,23 @@
+{
+  "extends": "airbnb",
+  "parser": "@babel/eslint-parser",
+  "root": true,
+  "ignorePatterns": ["build/"],
+  "rules": {
+    "max-classes-per-file": 0,
+    "max-len": 0,
+    "import/no-extraneous-dependencies": 2,
+    "import/no-unresolved": 2,
+    "import/extensions": 2,
+    "react/no-deprecated": 0,
+    "react/no-find-dom-node": 0,
+    "react/no-multi-comp": 0,
+    "no-underscore-dangle": 0,
+    "class-methods-use-this": 0
+  },
+  "settings": {
+    "react": {
+      "version": "17",
+    },
+  },
+}

packages/enzyme-adapter-react-17/.npmignore

@@ -0,0 +1 @@
+../enzyme/.npmignore

packages/enzyme-adapter-react-17/.npmrc

@@ -0,0 +1 @@
+../../.npmrc

packages/enzyme-adapter-react-17/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "enzyme-adapter-react-17",
+  "version": "0.0.0",
+  "description": "JavaScript Testing utilities for React",
+  "homepage": "https://enzymejs.github.io/enzyme/",
+  "main": "build",
+  "scripts": {
+    "clean": "rimraf build",
+    "lint": "eslint --ext js,jsx .",
+    "pretest": "npm run lint",
+    "prebuild": "npm run clean",
+    "build": "babel --source-maps=both src --out-dir build",
+    "watch": "npm run build -- -w",
+    "prepublish": "not-in-publish || (npm run build && safe-publish-latest && cp ../../{LICENSE,README}.md ./)"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/enzymejs/enzyme.git",
+    "directory": "packages/enzyme-adapter-react-17"
+  },
+  "keywords": [
+    "javascript",
+    "shallow rendering",
+    "shallowRender",
+    "test",
+    "reactjs",
+    "react",
+    "flux",
+    "testing",
+    "test utils",
+    "assertion helpers",
+    "tdd",
+    "mocha"
+  ],
+  "author": "Jordan Harband <ljharb@gmail.com>",
+  "funding": {
+    "url": "https://github.com/sponsors/ljharb"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "enzyme-adapter-utils": "^1.13.1",
+    "enzyme-shallow-equal": "^1.0.4",
+    "has": "^1.0.3",
+    "object.assign": "^4.1.0",
+    "object.values": "^1.1.1",
+    "prop-types": "^15.7.2",
+    "react-is": "^17.0.0",
+    "react-reconciler": "^0.26.1",
+    "react-test-renderer": "^17.0.0",
+    "semver": "^5.7.0"
+  },
+  "peerDependencies": {
+    "enzyme": "^3.0.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "babel-eslint": "^10.1.0",
+    "babel-plugin-transform-replace-object-assign": "^2.0.0",
+    "babel-preset-airbnb": "^4.5.0",
+    "enzyme": "^3.0.0",
+    "eslint": "^7.6.0",
+    "eslint-config-airbnb": "^18.2.0",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-react": "^7.20.5",
+    "eslint-plugin-react-hooks": "^4.0.8",
+    "in-publish": "^2.0.1",
+    "rimraf": "^2.7.1",
+    "safe-publish-latest": "^1.1.4"
+  }
+}