Migrate from Enzyme to React Testing Library

Also upgrade to React 18 in testing.

Author: jakezatecky

examples/src/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import BasicExample from './js/BasicExample';
 import CustomIconsExample from './js/CustomIconsExample';
@@ -12,13 +12,13 @@ import LargeDataExample from './js/LargeDataExample';
 import PessimisticToggleExample from './js/PessimisticToggleExample';
 import FilterExample from './js/FilterExample';
 
-ReactDOM.render(<BasicExample />, document.getElementById('basic-example'));
-ReactDOM.render(<CustomIconsExample />, document.getElementById('custom-icons-example'));
-ReactDOM.render(<DisabledExample />, document.getElementById('disabled-example'));
-ReactDOM.render(<NoCascadeExample />, document.getElementById('no-cascade-example'));
-ReactDOM.render(<PessimisticToggleExample />, document.getElementById('pessimistic-toggle-example'));
-ReactDOM.render(<ClickableLabelsExample />, document.getElementById('clickable-labels-example'));
-ReactDOM.render(<HiddenCheckboxesExample />, document.getElementById('hidden-checkboxes-example'));
-ReactDOM.render(<ExpandAllExample />, document.getElementById('expand-all-example'));
-ReactDOM.render(<LargeDataExample />, document.getElementById('large-data-example'));
-ReactDOM.render(<FilterExample />, document.getElementById('filter-example'));
+createRoot(document.getElementById('basic-example')).render(<BasicExample />);
+createRoot(document.getElementById('custom-icons-example')).render(<CustomIconsExample />);
+createRoot(document.getElementById('disabled-example')).render(<DisabledExample />);
+createRoot(document.getElementById('no-cascade-example')).render(<NoCascadeExample />);
+createRoot(document.getElementById('pessimistic-toggle-example')).render(<PessimisticToggleExample />);
+createRoot(document.getElementById('clickable-labels-example')).render(<ClickableLabelsExample />);
+createRoot(document.getElementById('hidden-checkboxes-example')).render(<HiddenCheckboxesExample />);
+createRoot(document.getElementById('expand-all-example')).render(<ExpandAllExample />);
+createRoot(document.getElementById('large-data-example')).render(<LargeDataExample />);
+createRoot(document.getElementById('filter-example')).render(<FilterExample />);

gulpfile.js

@@ -37,7 +37,6 @@ gulp.task('test-script-mocha', () => (
             require: [
                 '@babel/register',
                 'global-jsdom/register',
-                './test/setup.js',
             ],
             exit: true,
         }))

package.json

@@ -31,16 +31,16 @@
   "devDependencies": {
     "@babel/core": "^7.0.0",
     "@babel/eslint-parser": "^7.13.10",
-    "@babel/plugin-proposal-class-properties": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.0.0",
+    "@testing-library/dom": "^8.20.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/react": "^18.0.18",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.7.0",
     "babel-loader": "^9.0.0",
     "browser-sync": "^2.18.6",
     "chai": "^4.0.0",
-    "enzyme": "^3.0.0",
     "eslint": "^8.23.0",
     "eslint-config-takiyon-react": "^2.0.0",
     "eslint-import-resolver-webpack": "^0.13.0",
@@ -61,11 +61,10 @@
     "gulp-stylelint": "^13.0.0",
     "jsdom": "^21.0.0",
     "mocha": "^10.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-test-renderer": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "sass": "^1.28.0",
-    "stylelint": "^15.0.0",
+    "stylelint": "^15.1.0",
     "stylelint-config-takiyon": "^2.0.4",
     "webpack": "^5.3.2",
     "webpack-stream": "^7.0.0"
@@ -75,8 +74,5 @@
     "lodash": "^4.17.10",
     "nanoid": "^3.0.0",
     "prop-types": "^15.5.8"
-  },
-  "overrides": {
-    "cheerio": "=1.0.0-rc.3"
   }
 }

src/js/TreeNode.js

@@ -44,7 +44,7 @@ class TreeNode extends React.PureComponent {
         icon: null,
         showCheckbox: true,
         title: null,
-        onClick: () => {},
+        onClick: null,
     };
 
     constructor(props) {

test/.eslintrc

@@ -3,6 +3,9 @@
     "mocha": true
   },
   "rules": {
+    "no-console": ["warn", {
+      "allow": ["error"]
+    }],
     "react/jsx-props-no-spreading": "off"
   }
 }

test/Button.js

@@ -1,39 +1,42 @@
 import React from 'react';
-import { shallow } from 'enzyme';
 import { assert } from 'chai';
+import { render, screen } from '@testing-library/react';
 
 import Button from '../src/js/Button';
 
 describe('<Button />', () => {
     describe('title', () => {
         it('should copy `title` to `aria-label`', () => {
-            const wrapper = shallow((
+            render((
                 <Button title="Collapse">
                     Collapse
                 </Button>
             ));
 
-            assert.equal('Collapse', wrapper.find('button').prop('aria-label'));
+            const button = screen.getByText('Collapse');
+            assert.equal(button.getAttribute('aria-label'), 'Collapse');
         });
 
         it('should set `type` to `button`', () => {
-            const wrapper = shallow((
+            render((
                 <Button>
                     Basic Button
                 </Button>
             ));
 
-            assert.equal('button', wrapper.find('button').prop('type'));
+            const button = screen.getByText('Basic Button');
+            assert.equal(button.type, 'button');
         });
 
         it('should pass extra properties to the base button', () => {
-            const wrapper = shallow((
+            render((
                 <Button className="btn">
                     Basic Button
                 </Button>
             ));
 
-            assert.equal('btn', wrapper.find('button').prop('className'));
+            const button = screen.getByText('Basic Button');
+            assert.equal(button.className, 'btn');
         });
     });
 });