MM-69835 Convert remaining Enzyme tests to RTL

karma.conf.js

@@ -68,7 +68,7 @@ module.exports = config => {
       }
     },
 
-    browsers: env.BROWSER ? env.BROWSER.split(',') : ['Chrome'],
+    browsers: env.BROWSER ? env.BROWSER.split(',') : ['ChromeHeadless'],
 
     singleRun: env.CONTINUOUS_INTEGRATION === 'true'
   });

package.json

@@ -67,7 +67,6 @@
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.0.0",
-    "@cfaester/enzyme-adapter-react-18": "^0.8.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
@@ -82,7 +81,6 @@
     "colors": "^1.2.1",
     "create-react-class": "^15.6.3",
     "cross-env": "^5.2.0",
-    "enzyme": "^3.1.0",
     "eslint": "^4.19.1",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-config-prettier": "^2.9.0",

test/CheckboxSpec.js

@@ -1,74 +1,60 @@
+import { render } from '@testing-library/react';
 import React from 'react';
-import { mount, shallow } from 'enzyme';
 
 import Checkbox from '../src/Checkbox';
 
-import { shouldWarn } from './helpers';
+import { assertNone, assertSingle, shouldWarn } from './helpers';
 
 describe('<Checkbox>', () => {
   it('should render correctly', () => {
-    const wrapper = shallow(
-      <Checkbox name="foo" checked className="my-checkbox">
+    const { container } = render(
+      <Checkbox name="foo" checked readOnly className="my-checkbox">
         My label
       </Checkbox>
     );
 
-    wrapper
-      .assertSingle('div.checkbox.my-checkbox')
-      .assertSingle('input[type="checkbox"][name="foo"][checked]');
+    const div = assertSingle(container, 'div.checkbox.my-checkbox');
+    const input = assertSingle(div, 'input[type="checkbox"][name="foo"]');
+    expect(input.checked).to.equal(true);
 
-    wrapper
-      .assertSingle('label')
-      .text()
-      .should.equal('My label');
+    assertSingle(container, 'label').textContent.should.equal('My label');
   });
 
   it('should support inline', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <Checkbox inline name="foo" className="my-checkbox">
         My label
       </Checkbox>
     );
 
-    wrapper
-      .assertSingle('label.checkbox-inline.my-checkbox')
-      .assertSingle('input[type="checkbox"][name="foo"]');
+    const label = assertSingle(container, 'label.checkbox-inline.my-checkbox');
+    assertSingle(label, 'input[type="checkbox"][name="foo"]');
 
-    wrapper
-      .assertSingle('label')
-      .text()
-      .should.equal('My label');
+    assertSingle(container, 'label').textContent.should.equal('My label');
   });
 
   it('should support validation state', () => {
-    shallow(<Checkbox validationState="success" />).assertSingle(
-      '.has-success'
-    );
+    const { container } = render(<Checkbox validationState="success" />);
+    assertSingle(container, '.has-success');
   });
 
   it('should not support validation state when inline', () => {
     shouldWarn('ignored');
 
-    shallow(<Checkbox inline validationState="success" />)
-      .find('.has-success')
-      .should.have.length(0);
+    const { container } = render(<Checkbox inline validationState="success" />);
+    assertNone(container, '.has-success');
   });
 
   it('should support inputRef', () => {
-    class Container extends React.Component {
-      render() {
-        return (
-          <Checkbox
-            inputRef={ref => {
-              this.input = ref;
-            }}
-          />
-        );
-      }
-    }
-
-    const instance = mount(<Container />).instance();
+    let input;
+    render(
+      <Checkbox
+        inputRef={ref => {
+          input = ref;
+        }}
+      />
+    );
 
-    expect(instance.input.tagName).to.equal('INPUT');
+    expect(input.tagName).to.equal('INPUT');
   });
 });

test/ControlLabelSpec.js

@@ -1,45 +1,47 @@
+import { render } from '@testing-library/react';
 import React from 'react';
-import { mount, shallow } from 'enzyme';
 
 import ControlLabel from '../src/ControlLabel';
 import FormGroup from '../src/FormGroup';
 
-import { shouldWarn } from './helpers';
+import { assertSingle, shouldWarn } from './helpers';
 
 describe('<ControlLabel>', () => {
   it('should render correctly', () => {
+    const { container } = render(
+      <ControlLabel htmlFor="foo" className="my-control-label">
+        Label
+      </ControlLabel>
+    );
+
     expect(
-      shallow(
-        <ControlLabel htmlFor="foo" className="my-control-label">
-          Label
-        </ControlLabel>
-      )
-        .assertSingle('label.control-label.my-control-label[htmlFor="foo"]')
-        .text()
+      assertSingle(container, 'label.control-label.my-control-label[for="foo"]')
+        .textContent
     ).to.equal('Label');
   });
 
   it('should respect srOnly', () => {
-    shallow(<ControlLabel srOnly>Label</ControlLabel>).assertSingle(
-      'label.control-label.sr-only'
-    );
+    const { container } = render(<ControlLabel srOnly>Label</ControlLabel>);
+    assertSingle(container, 'label.control-label.sr-only');
   });
 
   it('should use controlId for htmlFor', () => {
-    mount(
+    const { container } = render(
       <FormGroup controlId="foo">
         <ControlLabel>Label</ControlLabel>
       </FormGroup>
-    ).assertSingle('label.control-label[htmlFor="foo"]');
+    );
+    assertSingle(container, 'label.control-label[for="foo"]');
   });
 
   it('should prefer explicit htmlFor', () => {
     shouldWarn('ignored');
 
-    mount(
+    const { container } = render(
       <FormGroup controlId="foo">
         <ControlLabel htmlFor="bar">Label</ControlLabel>
       </FormGroup>
-    ).assertSingle('label.control-label[htmlFor="bar"]');
+    );
+    assertSingle(container, 'label.control-label[for="bar"]');
   });
 });

test/FormControlFeedbackSpec.js

@@ -1,53 +1,60 @@
+import { render } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 
 import FormControl from '../src/FormControl';
 import FormGroup from '../src/FormGroup';
 
+import { assertSingle } from './helpers';
+
 describe('<FormControl.Feedback>', () => {
   it('should render default success', () => {
-    mount(
+    const { container } = render(
       <FormGroup validationState="success">
         <FormControl.Feedback />
       </FormGroup>
-    ).assertSingle('.form-control-feedback.glyphicon-ok');
+    );
+    assertSingle(container, '.form-control-feedback.glyphicon-ok');
   });
 
   it('should render default warning', () => {
-    mount(
+    const { container } = render(
       <FormGroup validationState="warning">
         <FormControl.Feedback />
       </FormGroup>
-    ).assertSingle('.form-control-feedback.glyphicon-warning-sign');
+    );
+    assertSingle(container, '.form-control-feedback.glyphicon-warning-sign');
   });
 
   it('should render default error', () => {
-    mount(
+    const { container } = render(
       <FormGroup validationState="error">
         <FormControl.Feedback />
       </FormGroup>
-    ).assertSingle('.form-control-feedback.glyphicon-remove');
+    );
+    assertSingle(container, '.form-control-feedback.glyphicon-remove');
   });
 
   it('should render default validation state', () => {
-    mount(
+    const { container } = render(
       <FormGroup validationState="success">
         <div>
           <FormControl.Feedback />
         </div>
       </FormGroup>
-    ).assertSingle('.form-control-feedback.glyphicon-ok');
+    );
+    assertSingle(container, '.form-control-feedback.glyphicon-ok');
   });
 
   it('should render custom component', () => {
     function MyComponent(props) {
       return <div {...props} />;
     }
 
-    mount(
+    const { container } = render(
       <FormControl.Feedback>
         <MyComponent className="foo" />
       </FormControl.Feedback>
-    ).assertSingle('MyComponent.foo.form-control-feedback');
+    );
+    assertSingle(container, '.foo.form-control-feedback');
   });
 });

test/FormControlSpec.js

@@ -1,78 +1,72 @@
+import { render } from '@testing-library/react';
 import React from 'react';
-import { mount, shallow } from 'enzyme';
 
 import FormControl from '../src/FormControl';
 import FormGroup from '../src/FormGroup';
 
-import { shouldWarn } from './helpers';
+import { assertNone, assertSingle, shouldWarn } from './helpers';
 
 describe('<FormControl>', () => {
   it('should render correctly', () => {
-    shallow(
+    const { container } = render(
       <FormControl type="text" id="foo" name="bar" className="my-control" />
-    ).assertSingle('input#foo.form-control.my-control[name="bar"]');
+    );
+    assertSingle(container, 'input#foo.form-control.my-control[name="bar"]');
   });
 
   it('should support textarea', () => {
-    shallow(<FormControl componentClass="textarea" />).assertSingle(
-      'textarea.form-control'
-    );
+    const { container } = render(<FormControl componentClass="textarea" />);
+    assertSingle(container, 'textarea.form-control');
   });
 
   it('should support select', () => {
-    shallow(<FormControl componentClass="select" />).assertSingle(
-      'select.form-control'
-    );
+    const { container } = render(<FormControl componentClass="select" />);
+    assertSingle(container, 'select.form-control');
   });
 
   it('should not render .form-control for type="file"', () => {
-    shallow(<FormControl type="file" />)
-      .assertSingle('input[type="file"]')
-      .find('.form-control')
-      .should.have.length(0);
+    const { container } = render(<FormControl type="file" />);
+    assertSingle(container, 'input[type="file"]');
+    assertNone(container, '.form-control');
   });
 
   it('should use controlId for id', () => {
-    mount(
+    const { container } = render(
       <FormGroup controlId="foo">
         <FormControl type="text" />
       </FormGroup>
-    ).assertSingle('input#foo.form-control');
+    );
+    assertSingle(container, 'input#foo.form-control');
   });
 
   it('should prefer explicit id', () => {
     shouldWarn('ignored');
 
-    mount(
+    const { container } = render(
       <FormGroup controlId="foo">
         <FormControl type="text" id="bar" />
       </FormGroup>
-    ).assertSingle('input#bar.form-control');
+    );
+    assertSingle(container, 'input#bar.form-control');
   });
 
   it('should support inputRef', () => {
-    class Container extends React.Component {
-      render() {
-        return (
-          <FormGroup controlId="foo">
-            <FormControl
-              type="text"
-              inputRef={ref => {
-                this.input = ref;
-              }}
-            />
-          </FormGroup>
-        );
-      }
-    }
-
-    const instance = mount(<Container />).instance();
-    expect(instance.input.tagName).to.equal('INPUT');
+    let input;
+    render(
+      <FormGroup controlId="foo">
+        <FormControl
+          type="text"
+          inputRef={ref => {
+            input = ref;
+          }}
+        />
+      </FormGroup>
+    );
+    expect(input.tagName).to.equal('INPUT');
   });
 
   it('should properly display size of FormControl', () => {
-    mount(<FormControl type="text" bsSize="lg" />).assertSingle(
-      'input.form-control.input-lg'
-    );
+    const { container } = render(<FormControl type="text" bsSize="lg" />);
+    assertSingle(container, 'input.form-control.input-lg');
   });
 });