Migrate to React Testing Library (#2625) (#2626)

* test(Fade): migrate to rtl

* test(ButtonDropdown): migrate to rtl

* test(Row): migrate to RTL

* test(Spinner): migrate to rtl

* test(Form): migrate to RTL

* test(Form): migrate to RTL

* test(#2625): migrate FormFeedback to rtl

src/__tests__/ButtonDropdown.spec.js

@@ -1,43 +1,38 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem } from '..';
 
 describe('ButtonDropdown', () => {
   let isOpen;
   let toggle;
 
   beforeEach(() => {
-    isOpen = false;
-    toggle = () => {
-      isOpen = !isOpen;
-    };
+    toggle = () => {};
   });
 
   it('should render a single child', () => {
-    const wrapper = mount(
-      <ButtonDropdown isOpen={isOpen} toggle={toggle}>
+    render(
+      <ButtonDropdown isOpen toggle={toggle}>
         Ello world
       </ButtonDropdown>,
     );
 
-    expect(wrapper.find('.btn-group').hostNodes().text()).toBe('Ello world');
-    expect(wrapper.find('.btn-group').hostNodes().length).toBe(1);
+    expect(screen.getByText('Ello world')).toBeInTheDocument();
   });
 
   it('should render multiple children when isOpen', () => {
     isOpen = true;
-    const wrapper = mount(
-      <ButtonDropdown isOpen={isOpen} toggle={toggle}>
+    render(
+      <ButtonDropdown isOpen toggle={toggle}>
         <DropdownToggle>Toggle</DropdownToggle>
         <DropdownMenu>
           <DropdownItem>Test</DropdownItem>
         </DropdownMenu>
       </ButtonDropdown>,
     );
 
-    expect(wrapper.find('.btn').hostNodes().text()).toBe('Toggle');
-    expect(wrapper.find('.btn-group').hostNodes().length).toBe(1);
-    expect(wrapper.find('.dropdown-item').hostNodes().length).toBe(1);
-    expect(wrapper.childAt(0).childAt(0).childAt(0).children().length).toBe(2);
+    expect(screen.getByText(/toggle/i)).toBeInTheDocument();
+    expect(screen.getByText(/test/i)).toBeInTheDocument();
   });
 });

src/__tests__/Fade.spec.js

@@ -1,7 +1,10 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import user from '@testing-library/user-event';
 import { TransitionGroup } from 'react-transition-group';
 import { Fade } from '..';
+import { testForCustomTag } from '../testUtils';
 
 class Helper extends React.Component {
   constructor(props) {
@@ -42,33 +45,40 @@ describe('Fade', () => {
   });
 
   it('should transition classes from "fade" to "fade show" on appear', () => {
-    let isOpen = true;
-    const wrapper = mount(
-      <Helper showItem={isOpen}>
-        <Fade key={Math.random()}>Yo!</Fade>
-        <Fade appear={false} key={Math.random()}>
+    const { debug } = render(
+      <Helper showItem>
+        <Fade>Yo!</Fade>
+        <Fade appear={false}>
           Yo 2!
         </Fade>
       </Helper>,
     );
 
-    expect(wrapper.update().find('div.fade').hostNodes().length).toBe(2);
-    expect(wrapper.update().find('div.fade.show').hostNodes().length).toBe(1);
+    expect(screen.getByText('Yo!')).toHaveClass('fade');
+    expect(screen.getByText('Yo!')).not.toHaveClass('show');
+    expect(screen.getByText('Yo 2!')).toHaveClass('fade');
+    expect(screen.getByText('Yo 2!')).toHaveClass('show');
 
-    jest.runTimersToTime(300);
+    jest.advanceTimersByTime(300);
 
-    expect(wrapper.update().find('div.fade.show').hostNodes().length).toBe(2);
+    expect(screen.getByText('Yo!')).toHaveClass('fade');
+    expect(screen.getByText('Yo!')).toHaveClass('show');
+    expect(screen.getByText('Yo 2!')).toHaveClass('fade');
+    expect(screen.getByText('Yo 2!')).toHaveClass('show');
 
-    wrapper.find('.trigger').hostNodes().simulate('click');
-    expect(wrapper.update().find('div.fade.show').hostNodes().length).toBe(0);
+    user.click(document.getElementsByClassName('trigger')[0]);
+
+    expect(screen.getByText('Yo!')).toHaveClass('fade');
+    expect(screen.getByText('Yo!')).not.toHaveClass('show');
+    expect(screen.getByText('Yo 2!')).toHaveClass('fade');
+    expect(screen.getByText('Yo 2!')).not.toHaveClass('show');
   });
 
   it('should transition classes from "fade" to "fade show" on enter', () => {
     const onEnter = jest.fn();
     const onExit = jest.fn();
-    let isOpen = false;
-    const wrapper = mount(
-      <Helper showItem={isOpen}>
+    render(
+      <Helper showItem={false}>
         <Fade onEnter={onEnter} onExit={onExit} key={Math.random()}>
           Yo 3!
         </Fade>
@@ -78,42 +88,40 @@ describe('Fade', () => {
       </Helper>,
     );
 
-    expect(wrapper.update().find('div.fade').hostNodes().length).toBe(0);
-    expect(wrapper.update().find('div.fade.show').hostNodes().length).toBe(0);
+    expect(document.getElementsByClassName('fade').length).toBe(0);
+    expect(document.getElementsByClassName('fade show').length).toBe(0);
 
-    wrapper.find('.trigger').hostNodes().simulate('click');
+    user.click(document.getElementsByClassName('trigger')[0]);
 
-    expect(wrapper.update().find('div.fade').hostNodes().length).toBe(2);
-    expect(wrapper.update().find('div.fade.show').hostNodes().length).toBe(1);
     expect(onEnter).toHaveBeenCalled();
+    expect(onExit).not.toHaveBeenCalled();
+    expect(document.getElementsByClassName('fade').length).toBe(2);
+    expect(document.getElementsByClassName('fade show').length).toBe(1);
 
-    jest.runTimersToTime(300);
+    jest.advanceTimersByTime(300);
 
     expect(onEnter).toHaveBeenCalled();
     expect(onExit).not.toHaveBeenCalled();
-    expect(wrapper.update().find('div.fade.show').hostNodes().length).toBe(2);
+    expect(document.getElementsByClassName('fade show').length).toBe(2);
+
+    user.click(document.getElementsByClassName('trigger')[0]);
 
-    wrapper.find('.trigger').hostNodes().simulate('click');
-    expect(wrapper.update().find('div.fade.show').hostNodes().length).toBe(0);
     expect(onExit).toHaveBeenCalled();
+    expect(document.getElementsByClassName('fade show').length).toBe(0);
   });
 
   it('should pass className down', () => {
-    const alert = mount(<Fade className="test-class-name">Yo!</Fade>);
-    expect(alert.find('.fade').hostNodes().prop('className')).toContain(
-      'test-class-name',
-    );
+    render(<Fade className="test-class-name">Yo!</Fade>);
+    expect(screen.getByText(/yo/i)).toHaveClass('test-class-name');
   });
 
   it('should pass other props down', () => {
-    const alert = mount(<Fade data-testprop="testvalue">Yo!</Fade>);
-    expect(alert.find('.fade').hostNodes().prop('data-testprop')).toContain(
-      'testvalue',
-    );
+    render(<Fade data-testprop="testvalue">Yo</Fade>);
+
+    expect(screen.getByText(/yo/i)).toHaveAttribute('data-testprop', 'testvalue');
   });
 
   it('should support custom tag', () => {
-    const alert = mount(<Fade tag="p">Yo!</Fade>);
-    expect(alert.find('p').hostNodes().length).toBe(1);
+    testForCustomTag(Fade)
   });
 });

src/__tests__/Form.spec.js

@@ -1,29 +1,25 @@
-import React from 'react';
-import { shallow } from 'enzyme';
 import { Form } from '..';
+import {
+  testForChildrenInComponent,
+  testForCustomClass,
+  testForCustomTag,
+  testForDefaultTag,
+} from '../testUtils';
 
 describe('Form', () => {
   it('should render with "form" tag', () => {
-    const wrapper = shallow(<Form>Yo!</Form>);
-
-    expect(wrapper.type()).toBe('form');
+    testForDefaultTag(Form, 'form');
   });
 
   it('should render children', () => {
-    const wrapper = shallow(<Form>Yo!</Form>);
-
-    expect(wrapper.text()).toBe('Yo!');
+    testForChildrenInComponent(Form);
   });
 
   it('should render additional classes', () => {
-    const wrapper = shallow(<Form className="other">Yo!</Form>);
-
-    expect(wrapper.hasClass('other')).toBe(true);
+    testForCustomClass(Form);
   });
 
   it('should render custom tag', () => {
-    const wrapper = shallow(<Form tag="main">Yo!</Form>);
-
-    expect(wrapper.type()).toBe('main');
+    testForCustomTag(Form);
   });
 });

src/__tests__/FormFeedback.spec.js

@@ -1,50 +1,48 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { FormFeedback } from '..';
+import {
+  testForChildrenInComponent,
+  testForCustomClass,
+  testForCustomTag,
+  testForDefaultClass,
+  testForDefaultTag,
+} from '../testUtils';
 
 describe('FormFeedback', () => {
-  it('should render with "form" tag by default', () => {
-    const wrapper = shallow(<FormFeedback>Yo!</FormFeedback>);
-
-    expect(wrapper.type()).toBe('div');
+  it('should render with "div" tag by default', () => {
+    testForDefaultTag(FormFeedback, 'div');
   });
 
   it('should render children', () => {
-    const wrapper = shallow(<FormFeedback>Yo!</FormFeedback>);
-
-    expect(wrapper.text()).toBe('Yo!');
+    testForChildrenInComponent(FormFeedback);
   });
 
   it('should render with "invalid-feedback" class', () => {
-    const wrapper = shallow(<FormFeedback>Yo!</FormFeedback>);
-    expect(wrapper.hasClass('invalid-feedback')).toBe(true);
+    testForDefaultClass(FormFeedback, 'invalid-feedback');
   });
 
   it('should render with "valid-feedback" class', () => {
-    const wrapper = shallow(<FormFeedback valid>Yo!</FormFeedback>);
+    render(<FormFeedback valid>Yo!</FormFeedback>);
 
-    expect(wrapper.hasClass('valid-feedback')).toBe(true);
+    expect(screen.getByText(/yo/i)).toHaveClass('valid-feedback');
   });
 
   it('should render with "valid-tooltip" class', () => {
-    const wrapper = shallow(
+    render(
       <FormFeedback valid tooltip>
         Yo!
       </FormFeedback>,
     );
 
-    expect(wrapper.hasClass('valid-tooltip')).toBe(true);
+    expect(screen.getByText(/yo/i)).toHaveClass('valid-tooltip');
   });
 
   it('should render additional classes', () => {
-    const wrapper = shallow(<FormFeedback className="other">Yo!</FormFeedback>);
-
-    expect(wrapper.hasClass('other')).toBe(true);
+    testForCustomClass(FormFeedback);
   });
 
   it('should render custom tag', () => {
-    const wrapper = shallow(<FormFeedback tag="main">Yo!</FormFeedback>);
-
-    expect(wrapper.type()).toBe('main');
+    testForCustomTag(FormFeedback);
   });
 });

src/__tests__/Row.spec.js

@@ -1,43 +1,38 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { Row } from '..';
+import {
+  testForChildrenInComponent,
+  testForCustomClass,
+  testForDefaultClass,
+} from '../testUtils';
 
 describe('Row', () => {
   it('should render .row markup', () => {
-    const wrapper = shallow(<Row />);
-
-    expect(wrapper.html()).toBe('<div class="row"></div>');
+    testForDefaultClass(Row, 'row');
   });
 
   it('should render children', () => {
-    const wrapper = shallow(<Row>Children</Row>);
-
-    expect(wrapper.html()).toBe('<div class="row">Children</div>');
+    testForChildrenInComponent(Row);
   });
 
   it('should pass additional classNames', () => {
-    const wrapper = shallow(<Row className="extra" />);
-
-    expect(wrapper.hasClass('extra')).toBe(true);
-    expect(wrapper.hasClass('row')).toBe(true);
+    testForCustomClass(Row);
   });
 
   it('show render noGutters class as gx-0', () => {
-    const wrapper = shallow(<Row noGutters />);
-
-    expect(wrapper.hasClass('gx-0')).toBe(true);
-    expect(wrapper.hasClass('row')).toBe(true);
+    render(<Row noGutters data-testid="row" />);
+    expect(screen.getByTestId('row')).toHaveClass('gx-0 row');
   });
 
   it('should pass row col size specific classes as strings', () => {
-    const wrapper = shallow(<Row sm="6" />);
-
-    expect(wrapper.hasClass('row-cols-sm-6')).toBe(true);
+    render(<Row sm="6" data-testid="row" />);
+    expect(screen.getByTestId('row')).toHaveClass('row-cols-sm-6');
   });
 
   it('should pass row col size specific classes as numbers', () => {
-    const wrapper = shallow(<Row sm={6} />);
-
-    expect(wrapper.hasClass('row-cols-sm-6')).toBe(true);
+    render(<Row sm={6} data-testid="row" />);
+    expect(screen.getByTestId('row')).toHaveClass('row-cols-sm-6');
   });
 });