Migrate tests to React Testing Library + Drop enzyme

Author: Oblosys

package-lock.json

@@ -56,15 +56,16 @@
     "@babel/preset-react": "^7.13.13",
     "@babel/preset-stage-2": "^7.8.3",
     "@hot-loader/react-dom": "^16.14.0",
+    "@testing-library/jest-dom": "^5.11.10",
+    "@testing-library/react": "^11.2.6",
+    "@testing-library/user-event": "^13.1.5",
     "@types/react": "^16.14.5",
     "@types/react-dom": "^16.9.12",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
     "babel-plugin-transform-rename-import": "^2.3.0",
     "css-loader": "^5.2.1",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
     "eslint": "^7.23.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-plugin-import": "^2.22.1",

package.json

@@ -9,7 +9,7 @@ const LifecyclePanel = (props) => {
   const lifecycleMethodNames = isLegacy ? constants.lifecycleMethodNamesLegacyNoUnsafe : constants.lifecycleMethodNames;
 
   return (
-    <div className='lifecycle-panel'>
+    <div className='lifecycle-panel' data-testid='lifecycle-panel'>
       <div className='lifecycle-panel-inner'>
         <div className='component-instance'>{componentName + '-' + instanceId}</div>
         { lifecycleMethodNames.map((methodName) => (

src/components/LifecyclePanel.jsx

@@ -18,7 +18,7 @@ export default class LogEntries extends Component {
        ({componentName, instanceId}) => componentName.length + ('' + instanceId).length + 1)
       );
     return (
-      <div className='entries' ref={(elt) => { this.messagesElt = elt; }}>
+      <div className='entries' data-testid='log-entries' ref={(elt) => { this.messagesElt = elt; }}>
         { this.props.entries.map(({componentName, instanceId, methodName}, i) => (
             <div className='entry-wrapper' key={i}>
               <div

src/components/LogEntries.jsx

@@ -24,7 +24,12 @@ class Child extends Component {
 
   render() {
     this.props.trace('custom:render');
-    return <this.props.LifecyclePanel/>;
+    return (
+      <div>
+        <input type='button' data-testid='state-update-button' onClick={this.updateState}/>
+        <this.props.LifecyclePanel/>
+      </div>
+    );
   }
 
   componentDidMount() {

test/TracedChild.jsx

@@ -29,7 +29,12 @@ class LegacyChild extends Component {
 
   render() {
     this.props.trace('custom:render');
-    return <this.props.LifecyclePanel/>;
+    return (
+      <div>
+        <input type='button' data-testid='state-update-button' onClick={this.updateState}/>
+        <this.props.LifecyclePanel/>
+      </div>
+    );
   }
 
   componentDidMount() {

test/TracedLegacyChild.jsx

@@ -0,0 +1,24 @@
+import React, {useState } from 'react';
+import { Log, VisualizerProvider } from '../src';
+
+const StateToggle = ({testId, checked, setChecked}) => {
+  const onChange = ({currentTarget}) => setChecked(currentTarget.checked);
+
+  return <input type='checkbox' data-testid={testId} checked={checked} onChange={onChange}/>;
+};
+
+// Wrapper to add VisualizerProvider and log, with buttons for showing/hiding child and updating child prop.
+export const Wrapper = ({renderChild}) => {
+  const [isShowingChild, setIsShowingChild] = useState(true);
+  const [propValue, setPropValue] = useState(false);
+  return (
+    <VisualizerProvider>
+      <div>
+        <StateToggle testId='show-child-checkbox' checked={isShowingChild} setChecked={setIsShowingChild}/>
+        <StateToggle testId='prop-value-checkbox' checked={propValue} setChecked={setPropValue}/>
+        {isShowingChild && renderChild({prop: true})}
+        <Log/>
+      </div>
+    </VisualizerProvider>
+  );
+};