test(List): migrate to RTL

reactstrap · Nov 12, 2022 · 683239c · 683239c
1 parent da93cdf
commit 683239c
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 109 deletions.
diff --git a/src/__tests__/List.spec.js b/src/__tests__/List.spec.js
@@ -1,39 +1,34 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { List } from '..';
+import {
+  testForCustomClass,
+  testForCustomTag,
+  testForDefaultTag,
+} from '../testUtils';
 
 describe('List', () => {
   it('should render with "ul" tag', () => {
-    const wrapper = shallow(<List>Yo!</List>);
-
-    expect(wrapper.type()).toBe('ul');
+    testForDefaultTag(List, 'ul');
   });
 
   it('should render with "list-inline" class when type is "inline"', () => {
-    const wrapper = shallow(<List type="inline">Yo!</List>);
+    render(<List type="inline">Yo!</List>);
 
-    expect(wrapper.text()).toBe('Yo!');
-    expect(wrapper.hasClass('list-inline')).toBe(true);
+    expect(screen.getByText('Yo!')).toHaveClass('list-inline');
   });
 
   it('should render with "list-unstyled" class when type is "unstyled"', () => {
-    const wrapper = shallow(<List type="unstyled">Yo!</List>);
+    render(<List type="unstyled">Yo!</List>);
 
-    expect(wrapper.text()).toBe('Yo!');
-    expect(wrapper.hasClass('list-unstyled')).toBe(true);
+    expect(screen.getByText('Yo!')).toHaveClass('list-unstyled');
   });
 
   it('should render additional classes', () => {
-    const wrapper = shallow(<List className="other">Yo!</List>);
-
-    expect(wrapper.text()).toBe('Yo!');
-    expect(wrapper.hasClass('other')).toBe(true);
+    testForCustomClass(List);
   });
 
   it('should render custom tag', () => {
-    const wrapper = shallow(<List tag="main">Yo!</List>);
-
-    expect(wrapper.text()).toBe('Yo!');
-    expect(wrapper.find('main').length).toBe(1);
+    testForCustomTag(List);
   });
 });
diff --git a/src/__tests__/ListGroup.spec.js b/src/__tests__/ListGroup.spec.js
@@ -1,73 +1,59 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { ListGroup } from '..';
+import {
+  testForCustomClass,
+  testForCustomTag,
+  testForDefaultClass,
+} from '../testUtils';
 
 describe('ListGroup', () => {
   it('should render with "list-group" class', () => {
-    const wrapper = shallow(<ListGroup>Yo!</ListGroup>);
-
-    expect(wrapper.text()).toBe('Yo!');
-    expect(wrapper.hasClass('list-group')).toBe(true);
+    testForDefaultClass(ListGroup, 'list-group');
   });
 
   it('should render with "flush"', () => {
-    const wrapper = shallow(<ListGroup flush>Yo!</ListGroup>);
+    render(<ListGroup flush>Yo!</ListGroup>);
 
-    expect(wrapper.text()).toBe('Yo!');
-    expect(wrapper.hasClass('list-group')).toBe(true);
-    expect(wrapper.hasClass('list-group-flush')).toBe(true);
+    expect(screen.getByText('Yo!')).toHaveClass('list-group-flush');
   });
 
   it('should render with "horizontal"', () => {
-    const wrapper = shallow(<ListGroup horizontal>Yo!</ListGroup>);
+    render(<ListGroup horizontal>Yo!</ListGroup>);
 
-    expect(wrapper.text()).toBe('Yo!');
-    expect(wrapper.hasClass('list-group')).toBe(true);
-    expect(wrapper.hasClass('list-group-horizontal')).toBe(true);
+    expect(screen.getByText('Yo!')).toHaveClass('list-group-horizontal');
   });
 
   it('should not render with "horizontal" if flush is true', () => {
-    const wrapper = shallow(
+    render(
       <ListGroup flush horizontal>
         Yo!
       </ListGroup>,
     );
 
-    expect(wrapper.text()).toBe('Yo!');
-    expect(wrapper.hasClass('list-group')).toBe(true);
-    expect(wrapper.hasClass('list-group-flush')).toBe(true);
-    expect(wrapper.hasClass('list-group-horizontal')).toBe(false);
+    expect(screen.getByText('Yo!')).toHaveClass('list-group');
+    expect(screen.getByText('Yo!')).toHaveClass('list-group-flush');
+    expect(screen.getByText('Yo!')).not.toHaveClass('list-group-horizontal');
   });
 
   it('should render with "horizontal-{breakpoint}"', () => {
-    const wrapper = shallow(<ListGroup horizontal="lg">Yo!</ListGroup>);
+    render(<ListGroup horizontal="lg">Yo!</ListGroup>);
 
-    expect(wrapper.text()).toBe('Yo!');
-    expect(wrapper.hasClass('list-group')).toBe(true);
-    expect(wrapper.hasClass('list-group-horizontal-lg')).toBe(true);
+    expect(screen.getByText('Yo!')).toHaveClass('list-group');
+    expect(screen.getByText('Yo!')).toHaveClass('list-group-horizontal-lg');
   });
 
   it('should render with "numbered"', () => {
-    const wrapper = shallow(<ListGroup numbered>Yo!</ListGroup>);
+    render(<ListGroup numbered>Yo!</ListGroup>);
 
-    expect(wrapper.text()).toBe('Yo!');
-    expect(wrapper.hasClass('list-group')).toBe(true);
-    expect(wrapper.hasClass('list-group-numbered')).toBe(true);
+    expect(screen.getByText('Yo!')).toHaveClass('list-group-numbered');
   });
 
   it('should render additional classes', () => {
-    const wrapper = shallow(<ListGroup className="other">Yo!</ListGroup>);
-
-    expect(wrapper.text()).toBe('Yo!');
-    expect(wrapper.hasClass('other')).toBe(true);
-    expect(wrapper.hasClass('list-group')).toBe(true);
+    testForCustomClass(ListGroup);
   });
 
   it('should render custom tag', () => {
-    const wrapper = shallow(<ListGroup tag="main">Yo!</ListGroup>);
-
-    expect(wrapper.text()).toBe('Yo!');
-    expect(wrapper.hasClass('list-group')).toBe(true);
-    expect(wrapper.find('main').length).toBe(1);
+    testForCustomTag(ListGroup);
   });
 });
diff --git a/src/__tests__/ListGroupItem.spec.js b/src/__tests__/ListGroupItem.spec.js
@@ -1,48 +1,47 @@
 import React from 'react';
-import { shallow, mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import user from '@testing-library/user-event';
 import { ListGroupItem } from '..';
+import { testForChildrenInComponent, testForDefaultClass } from '../testUtils';
 
 describe('ListGroupItem', () => {
   it('should render children', () => {
-    const listGroupItem = shallow(<ListGroupItem>Yo!</ListGroupItem>).find(
-      'li',
-    );
-    expect(listGroupItem.text()).toBe('Yo!');
+    testForChildrenInComponent(ListGroupItem);
   });
 
   it('should render with "list-group-item" class', () => {
-    const wrapper = shallow(<ListGroupItem>Yo!</ListGroupItem>);
-    expect(wrapper.hasClass('list-group-item')).toBe(true);
+    testForDefaultClass(ListGroupItem, 'list-group-item');
   });
 
   it('should render with "active" class when active is passed', () => {
-    const wrapper = shallow(<ListGroupItem active>Yo!</ListGroupItem>);
-    expect(wrapper.hasClass('active')).toBe(true);
+    render(<ListGroupItem active>Yo!</ListGroupItem>);
+    expect(screen.getByText('Yo!')).toHaveClass('active');
   });
 
   it('should render with "disabled" class when disabled is passed', () => {
-    const wrapper = shallow(<ListGroupItem disabled>Yo!</ListGroupItem>);
-    expect(wrapper.hasClass('disabled')).toBe(true);
+    render(<ListGroupItem disabled>Yo!</ListGroupItem>);
+    expect(screen.getByText('Yo!')).toHaveClass('disabled');
   });
 
   it('should render with "list-group-item-action" class when action is passed', () => {
-    const wrapper = shallow(<ListGroupItem action>Yo!</ListGroupItem>);
-    expect(wrapper.hasClass('list-group-item-action')).toBe(true);
+    render(<ListGroupItem action>Yo!</ListGroupItem>);
+    expect(screen.getByText('Yo!')).toHaveClass('list-group-item-action');
   });
 
   it('should render with "list-group-item-${color}" class when color is passed', () => {
-    const wrapper = shallow(<ListGroupItem color="success">Yo!</ListGroupItem>);
-    expect(wrapper.hasClass('list-group-item-success')).toBe(true);
+    render(<ListGroupItem color="success">Yo!</ListGroupItem>);
+    expect(screen.getByText('Yo!')).toHaveClass('list-group-item-success');
   });
 
   it('should prevent click event when disabled is passed', () => {
     const onDisableClick = jest.fn();
-    const wrapper = mount(
+    render(
       <ListGroupItem disabled onClick={onDisableClick}>
         Yo!
       </ListGroupItem>,
     );
-    wrapper.find('li').hostNodes().simulate('click');
+
+    user.click(screen.getByText('Yo!'));
     expect(onDisableClick).not.toHaveBeenCalled();
   });
 });
diff --git a/src/__tests__/ListGroupItemHeading.spec.js b/src/__tests__/ListGroupItemHeading.spec.js
@@ -1,17 +1,12 @@
-import React from 'react';
-import { shallow } from 'enzyme';
 import { ListGroupItemHeading } from '..';
+import { testForChildrenInComponent, testForDefaultClass } from '../testUtils';
 
 describe('ListGroupItem', () => {
   it('should render children', () => {
-    const listGroupItem = shallow(
-      <ListGroupItemHeading>Yo!</ListGroupItemHeading>,
-    ).find('h5');
-    expect(listGroupItem.text()).toBe('Yo!');
+    testForChildrenInComponent(ListGroupItemHeading);
   });
 
   it('should render with "list-group-item-heading" class', () => {
-    const wrapper = shallow(<ListGroupItemHeading>Yo!</ListGroupItemHeading>);
-    expect(wrapper.hasClass('list-group-item-heading')).toBe(true);
+    testForDefaultClass(ListGroupItemHeading, 'list-group-item-heading');
   });
 });
diff --git a/src/__tests__/ListGroupItemText.spec.js b/src/__tests__/ListGroupItemText.spec.js
@@ -1,17 +1,16 @@
-import React from 'react';
-import { shallow } from 'enzyme';
 import { ListGroupItemText } from '..';
+import {
+  testForChildrenInComponent,
+  testForCustomClass,
+  testForDefaultClass,
+} from '../testUtils';
 
 describe('ListGroupItem', () => {
   it('should render children', () => {
-    const listGroupItem = shallow(
-      <ListGroupItemText>Yo!</ListGroupItemText>,
-    ).find('p');
-    expect(listGroupItem.text()).toBe('Yo!');
+    testForChildrenInComponent(ListGroupItemText);
   });
 
   it('should render with "list-group-item-text" class', () => {
-    const wrapper = shallow(<ListGroupItemText>Yo!</ListGroupItemText>);
-    expect(wrapper.hasClass('list-group-item-text')).toBe(true);
+    testForDefaultClass(ListGroupItemText, 'list-group-item-text');
   });
 });
diff --git a/src/__tests__/ListInlineItem.spec.js b/src/__tests__/ListInlineItem.spec.js
@@ -1,37 +1,25 @@
-import React from 'react';
-import { shallow } from 'enzyme';
 import { ListInlineItem } from '..';
+import {
+  testForChildrenInComponent,
+  testForCustomClass,
+  testForCustomTag,
+  testForDefaultClass,
+} from '../testUtils';
 
 describe('ListInlineItem', () => {
   it('should render children', () => {
-    const listInlineItem = shallow(<ListInlineItem>Yo!</ListInlineItem>).find(
-      'li',
-    );
-    expect(listInlineItem.text()).toBe('Yo!');
+    testForChildrenInComponent(ListInlineItem);
   });
 
   it('should render with "list-inline-item" class', () => {
-    const wrapper = shallow(<ListInlineItem>Yo!</ListInlineItem>);
-
-    expect(wrapper.text()).toBe('Yo!');
-    expect(wrapper.hasClass('list-inline-item')).toBe(true);
+    testForDefaultClass(ListInlineItem, 'list-inline-item');
   });
 
   it('should render additional classes', () => {
-    const wrapper = shallow(
-      <ListInlineItem className="other">Yo!</ListInlineItem>,
-    );
-
-    expect(wrapper.text()).toBe('Yo!');
-    expect(wrapper.hasClass('other')).toBe(true);
-    expect(wrapper.hasClass('list-inline-item')).toBe(true);
+    testForCustomClass(ListInlineItem);
   });
 
   it('should render custom tag', () => {
-    const wrapper = shallow(<ListInlineItem tag="span">Yo!</ListInlineItem>);
-
-    expect(wrapper.text()).toBe('Yo!');
-    expect(wrapper.hasClass('list-inline-item')).toBe(true);
-    expect(wrapper.find('span').length).toBe(1);
+    testForCustomTag(ListInlineItem);
   });
 });