Migrate enzyme tests to testing-library (Merge PR #52)

Migrate enzyme tests to testing-library

Author: julienw

package.json

@@ -19,7 +19,7 @@
     "src/index.d.ts"
   ],
   "scripts": {
-    "lint": "eslint ./src ./examples",
+    "lint": "eslint ./src ./tests ./examples",
     "test": "yarn lint && yarn test:only",
     "test:only": "jest --no-cache --verbose --coverage",
     "test:dev": "jest --watchAll --no-cache --verbose --coverage",
@@ -61,19 +61,23 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-stage-2": "^7.8.3",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
+    "@testing-library/dom": "^8.13.0",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^14.1.0",
     "babel-jest": "~27.5.1",
     "babel-loader": "~8.2.4",
     "coveralls": "~3.1.1",
     "cross-env": "~7.0.3",
     "css-loader": "~6.7.1",
-    "enzyme": "~3.11.0",
-    "enzyme-to-json": "~3.6.2",
     "eslint": "~8.11.0",
     "eslint-config-vkbansal": "~5.2.1",
     "eslint-import-resolver-webpack": "~0.13.2",
     "eslint-plugin-import": "~2.25.4",
+    "eslint-plugin-jest": "^26.1.4",
+    "eslint-plugin-jest-dom": "^4.0.1",
     "eslint-plugin-react": "~7.29.4",
+    "eslint-plugin-testing-library": "^5.2.1",
     "history": "~5.3.0",
     "html-webpack-plugin": "~5.5.0",
     "http-server": "~14.1.0",
@@ -83,19 +87,15 @@
     "react": "~18.0.0",
     "react-dom": "~18.0.0",
     "react-router-dom": "~6.3.0",
-    "react-test-renderer": "~18.0.0",
     "rimraf": "~3.0.0",
     "style-loader": "~3.3.1",
     "webpack": "5.72.0",
     "webpack-cli": "^4.9.2"
   },
   "jest": {
-    "setupFiles": [
+    "setupFilesAfterEnv": [
       "<rootDir>/tests/.setup.js"
     ],
-    "snapshotSerializers": [
-      "enzyme-to-json/serializer"
-    ],
     "roots": [
       "<rootDir>/tests"
     ],

src/AbstractMenu.js

@@ -25,24 +25,29 @@ export default class AbstractMenu extends Component {
             return;
         }
 
-        switch (e.keyCode) {
-            case 37: // left arrow
-            case 27: // escape
+        switch (e.key) {
+            case 'ArrowLeft': // left arrow
+            case 'Left': // IE specific value
+            case 'Escape': // escape
+            case 'Esc': // IE specific value
                 e.preventDefault();
                 this.hideMenu(e);
                 break;
-            case 38: // up arrow
+            case 'ArrowUp': // up arrow
+            case 'Up': // IE specific value
                 e.preventDefault();
                 this.selectChildren(true);
                 break;
-            case 40: // down arrow
+            case 'ArrowDown': // down arrow
+            case 'Down': // IE specific value
                 e.preventDefault();
                 this.selectChildren(false);
                 break;
-            case 39: // right arrow
+            case 'ArrowRight': // right arrow
+            case 'Right': // IE specific value
                 this.tryToOpenSubMenu(e);
                 break;
-            case 13: // enter
+            case 'Enter': // enter
                 e.preventDefault();
                 this.tryToOpenSubMenu(e);
                 {

src/ContextMenu.js

@@ -170,7 +170,7 @@ export default class ContextMenu extends AbstractMenu {
     // Disabling this rule for more consistency.
     /* eslint-disable-next-line class-methods-use-this */
     hideMenu = (e) => {
-        if (e.keyCode === 27 || e.keyCode === 13) { // ECS or enter
+        if (e.key === 'Escape' || e.key === 'Esc' || e.key === 'Enter') {
             hideMenu();
         }
     };

tests/.eslintrc.yml

@@ -1,6 +1,17 @@
 ---
-    env:
-        jest: true
-    rules:
-        prefer-arrow-callback: 0
-        no-mixed-requires: 0
+plugins:
+  - jest
+  - jest-dom
+  - testing-library
+extends:
+  - plugin:jest/recommended
+  - plugin:jest-dom/recommended
+  - plugin:testing-library/react
+env:
+  jest: true
+rules:
+  prefer-arrow-callback: 0
+  no-mixed-requires: 0
+  # This disallows using direct Node properties (eg: firstChild), but we have
+  # legitimate uses:
+  testing-library/no-node-access: 0

tests/.setup.js

@@ -1,17 +1,8 @@
-const jsdom = require('jsdom');
+// Importing this here makes it work everywhere.
+import '@testing-library/jest-dom';
 
-const documentHTML = '<!doctype html><html><body><div id="root"></div></body></html>';
-const dom = new jsdom.JSDOM(documentHTML);
-global.document = dom.window.document;
-global.window = dom.window;
-global.window.resizeTo = (width, height) => {
-    global.window.innerWidth = width || global.window.innerWidth;
-    global.window.innerHeight = width || global.window.innerHeight;
-    global.window.dispatchEvent(new Event('resize'));
+window.resizeTo = (width, height) => {
+    window.innerWidth = width || window.innerWidth;
+    window.innerHeight = width || window.innerHeight;
+    window.dispatchEvent(new Event('resize'));
 };
-global.window.requestAnimationFrame = jest.fn();
-
-const Enzyme = require('enzyme');
-const Adapter = require('@wojtekmaj/enzyme-adapter-react-17');
-
-Enzyme.configure({ adapter: new Adapter() });