feat: rewriting tests from Enzyme to RTL

src/SelectableBox/tests/SelectableBox.test.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import renderer from 'react-test-renderer';
 
 import SelectableBox from '..';
-import { RadioControl, CheckboxControl } from '../../Form';
 
 const checkboxType = 'checkbox';
 const checkboxText = 'SelectableCheckbox';
@@ -28,98 +28,99 @@ describe('<SelectableBox />', () => {
       expect(tree).toMatchSnapshot();
     });
     it('correct render when type prop is changed', () => {
-      const boxWrapper = mount(<SelectableRadio />);
-      expect(boxWrapper.find(RadioControl).length).toBeGreaterThan(0);
-      boxWrapper.setProps({ type: 'radio' });
-      expect(boxWrapper.find(RadioControl).length).toBeGreaterThan(0);
-      boxWrapper.setProps({ type: 'checkbox' });
-      expect(boxWrapper.find(CheckboxControl).length).toBeGreaterThan(0);
+      const { rerender } = render(<SelectableRadio type="checkbox" />);
+      const checkboxControl = screen.getByText('SelectableRadio', { type: 'checkbox' });
+      expect(checkboxControl).toBeTruthy();
+      rerender(<SelectableRadio type="radio" />);
+      const radioControl = screen.getByText('SelectableRadio', { type: 'radio' });
+      expect(radioControl).toBeTruthy();
     });
     it('renders with radio input type if neither checkbox nor radio is passed', () => {
       // Mock the `console.error` is intentional because an invalid `type` prop
       // with `wrongType` specified for `ForwardRef` expects one of the ['radio','flag'] parameters.
       // eslint-disable-next-line no-console
-      console.error = jest.fn();
-      const wrapper = mount(<SelectableRadio type="wrongType" />);
-      const selectableBox = wrapper.find('input');
-      expect(selectableBox.prop('type')).toEqual(radioType);
-      // eslint-disable-next-line no-console
-      console.error.mockRestore();
+      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+      const { getByRole } = render(<SelectableRadio type="wrongType" />);
+      const selectableBox = getByRole('button');
+      expect(selectableBox).toBeTruthy();
+      consoleErrorSpy.mockRestore();
     });
     it('renders with checkbox input type', () => {
-      const wrapper = mount(<SelectableCheckbox />);
-      const selectableBox = wrapper.find('input');
-      expect(selectableBox.prop('type')).toEqual(checkboxType);
+      render(<SelectableCheckbox />);
+      const selectableBox = screen.getByText('SelectableCheckbox', { type: checkboxType });
+      expect(selectableBox).toBeTruthy();
     });
     it('renders with radio input type', () => {
-      const wrapper = mount(<SelectableRadio />);
-      const selectableBox = wrapper.find('input');
-      expect(selectableBox.prop('type')).toEqual(radioType);
+      render(<SelectableCheckbox />);
+      const selectableBox = screen.getByText('SelectableCheckbox', { type: radioType });
+      expect(selectableBox).toBeTruthy();
     });
     it('renders with correct children', () => {
-      const wrapper = mount(<SelectableRadio />);
-      const selectableBox = wrapper.find('.pgn__selectable_box');
-      expect(selectableBox.text()).toContain(radioText);
+      const { getByText } = render(<SelectableRadio />);
+      const selectableBox = getByText(radioText);
+      expect(selectableBox).toBeTruthy();
     });
     it('renders with correct class', () => {
       const className = 'myClass';
-      const wrapper = mount(<SelectableRadio className={className} />);
-      const selectableBox = wrapper.find('.pgn__selectable_box');
-      expect(selectableBox.hasClass(className)).toEqual(true);
+      const { container } = render(<SelectableRadio className={className} />);
+      const selectableBox = container.querySelector('.pgn__selectable_box');
+      expect(selectableBox.classList.contains(className)).toEqual(true);
     });
     it('renders as active when checked is passed', () => {
-      const wrapper = mount(<SelectableRadio checked />);
-      const selectableBox = wrapper.find('.pgn__selectable_box');
-      expect(selectableBox.hasClass('pgn__selectable_box-active')).toEqual(true);
-      expect(selectableBox.find('input').prop('checked')).toEqual(true);
+      const { container } = render(<SelectableRadio checked />);
+      const selectableBox = container.querySelector('.pgn__selectable_box');
+      const inputElement = container.querySelector('.pgn__selectable_box input');
+      expect(selectableBox.classList.contains('pgn__selectable_box-active')).toEqual(true);
+      expect(inputElement.checked).toEqual(true);
     });
     it('renders as invalid when isInvalid is passed', () => {
-      const wrapper = mount(<SelectableRadio isInvalid />);
-      const selectableBox = wrapper.find('.pgn__selectable_box');
-      expect(selectableBox.hasClass('pgn__selectable_box-invalid')).toEqual(true);
+      const { container } = render(<SelectableRadio isInvalid />);
+      const selectableBox = container.querySelector('.pgn__selectable_box');
+      expect(selectableBox.classList.contains('pgn__selectable_box-invalid')).toEqual(true);
     });
     it('renders with on click event when onClick is passed', () => {
-      const wrapper = mount(<SelectableCheckbox onClick={undefined} />);
-      wrapper.find('.pgn__selectable_box').simulate('click');
       const onClickSpy = jest.fn();
-      wrapper.setProps({ onClick: onClickSpy });
-      wrapper.find('.pgn__selectable_box').simulate('click');
+      const { container } = render(<SelectableCheckbox onClick={onClickSpy} />);
+      const selectableBox = container.querySelector('.pgn__selectable_box');
+      fireEvent.click(selectableBox);
       expect(onClickSpy).toHaveBeenCalledTimes(1);
     });
     it('renders with on key press event when onClick is passed', () => {
       const onClickSpy = jest.fn();
-      const wrapper = mount(<SelectableCheckbox onClick={onClickSpy} />);
-      const selectableBox = wrapper.find('.pgn__selectable_box');
-      selectableBox.simulate('keypress', { key: 'Enter' });
+      const { container } = render(<SelectableCheckbox onClick={onClickSpy} />);
+      const selectableBox = container.querySelector('.pgn__selectable_box');
+      fireEvent.keyPress(selectableBox, { key: 'Enter', code: 'Enter', charCode: 13 });
       expect(onClickSpy).toHaveBeenCalledTimes(1);
     });
     it('renders with hidden input when inputHidden is passed', () => {
-      const wrapper = mount(<SelectableCheckbox />);
-      expect(wrapper.find('.pgn__selectable_box input').prop('hidden')).toEqual(true);
-      wrapper.setProps({ inputHidden: false });
-      expect(wrapper.find('.pgn__selectable_box input').prop('hidden')).toEqual(false);
+      const { container, rerender } = render(<SelectableCheckbox inputHidden />);
+      const inputElement = container.querySelector('.pgn__selectable_box input');
+      expect(inputElement.getAttribute('hidden')).toEqual('');
+      rerender(<SelectableCheckbox inputHidden={false} />);
+      expect(inputElement.getAttribute('hidden')).toBeNull();
     });
   });
   describe('correct interactions', () => {
     it('correct checkbox state change when checked is changed', () => {
-      const wrapper = mount(<SelectableCheckbox />);
-      wrapper.setProps({ checked: true });
-      expect(wrapper.find('.pgn__selectable_box').hasClass('pgn__selectable_box-active')).toEqual(true);
-      wrapper.setProps({ checked: false });
-      expect(wrapper.find('.pgn__selectable_box').hasClass('pgn__selectable_box-active')).toEqual(false);
+      const { container, rerender } = render(<SelectableCheckbox checked={false} />);
+      const checkbox = container.querySelector('.pgn__selectable_box');
+      expect(checkbox.className).not.toContain('pgn__selectable_box-active');
+      rerender(<SelectableCheckbox checked />);
+      expect(checkbox.className).toContain('pgn__selectable_box-active');
     });
     it('correct radio state change when checked is changed', () => {
-      const wrapper = mount(<SelectableRadio />);
-      wrapper.setProps({ checked: true });
-      expect(wrapper.find('.pgn__selectable_box').hasClass('pgn__selectable_box-active')).toEqual(true);
-      wrapper.setProps({ checked: false });
-      expect(wrapper.find('.pgn__selectable_box').hasClass('pgn__selectable_box-active')).toEqual(true);
+      const { container, rerender } = render(<SelectableRadio checked={false} />);
+      const radio = container.querySelector('.pgn__selectable_box');
+      expect(radio.className).toContain('pgn__selectable_box-active');
+      rerender(<SelectableRadio checked />);
+      expect(radio.className).toContain('pgn__selectable_box-active');
     });
     it('ref is passed to onClick function', () => {
       let inputRef;
       const onClick = (ref) => { inputRef = ref; };
-      const wrapper = mount(<SelectableRadio onClick={onClick} />);
-      wrapper.find('.pgn__selectable_box').simulate('click');
+      render(<SelectableRadio onClick={onClick} />);
+      const radio = screen.getByRole('button');
+      userEvent.click(radio);
       expect(inputRef).not.toBeFalsy();
     });
   });

src/Sheet/Sheet.test.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import Sheet, { POSITIONS, VARIANTS } from './index';
+import { render } from '@testing-library/react';
+
+import Sheet, { POSITIONS, VARIANTS } from '.';
 
 /* eslint-disable react/prop-types */
 jest.mock('./SheetContainer', () => function SheetContainerMock(props) {
@@ -46,8 +48,10 @@ describe('<Sheet />', () => {
   });
   describe('correct rendering', () => {
     it('returns empty render if show is false', () => {
-      expect(renderJSON(<Sheet show={false} />)).toEqual(null);
-      expect(renderJSON(<Sheet />)).not.toEqual(null);
+      const { container } = render(<Sheet show={false} />);
+      expect(container.firstChild).toBeNull();
+      const { container: container2 } = render(<Sheet />);
+      expect(container2.firstChild).not.toBeNull();
     });
   });
 });

src/Sheet/SheetContainer.jsx

@@ -14,6 +14,7 @@ class SheetContainer extends React.Component {
       const rootElement = document.createElement('div');
       rootElement.setAttribute('id', this.sheetRootName);
       rootElement.setAttribute('class', 'sheet-container');
+      rootElement.setAttribute('data-testid', 'sheet-container');
       this.rootElement = document.body.appendChild(rootElement);
     }
   }

src/Sheet/SheetContainer.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import SheetContainer from './SheetContainer';
 
 const childId1 = 'sheet-container-TEST-child1';
@@ -12,22 +12,23 @@ const child2 = (<div id={childId2}>{childContent2}</div>);
 
 describe('<SheetContainer />', () => {
   it('adds itself to the dom if none exist', () => {
-    mount(<SheetContainer>{child1}</SheetContainer>);
-    const rootEl = document.getElementById('sheet-root');
-    expect(rootEl).not.toBeNull();
-    expect(rootEl.classList.contains('sheet-container')).toEqual(true);
-    const childEl = rootEl.querySelector(`#${childId1}`);
-    expect(childEl.innerHTML).toEqual(childContent1);
+    render(<SheetContainer>{child1}</SheetContainer>);
+    const rootEl = screen.getByTestId('sheet-container');
+    expect(rootEl).toBeTruthy();
+    expect(rootEl.className).toContain('sheet-container');
+    const childEl = screen.getByText(childContent1);
+    expect(childEl).toBeTruthy();
   });
 
   it('only adds itself once, when invoked multiple times', () => {
-    mount(<SheetContainer>{child1}</SheetContainer>);
-    mount(<SheetContainer>{child2}</SheetContainer>);
-    const rootEls = document.querySelectorAll('#sheet-root');
-    expect(rootEls.length).toEqual(1);
-    const childEl1 = rootEls[0].querySelector(`#${childId1}`);
-    expect(childEl1.innerHTML).toEqual(childContent1);
-    const childEl2 = rootEls[0].querySelector(`#${childId2}`);
-    expect(childEl2.innerHTML).toEqual(childContent2);
+    render(<SheetContainer>{child1}</SheetContainer>);
+    render(<SheetContainer>{child2}</SheetContainer>);
+    const rootEl = screen.getByTestId('sheet-container');
+    expect(rootEl).toBeTruthy();
+    expect(rootEl.className).toContain('sheet-container');
+    const childEl1 = screen.getByText(childContent1);
+    expect(childEl1).toBeTruthy();
+    const childEl2 = screen.getByText(childContent2);
+    expect(childEl2).toBeTruthy();
   });
 });

src/Spinner/Spinner.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import Spinner from './index';
+import Spinner from '.';
 
 describe('Spinner', () => {
   it('should render a spinner', () => {

src/Stack/Stack.test.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import renderer from 'react-test-renderer';
 
-import Stack from './index';
+import Stack from '.';
 
 describe('<Stack />', () => {
   describe('correct rendering', () => {
@@ -13,24 +13,29 @@ describe('<Stack />', () => {
       expect(tree).toMatchSnapshot();
     });
     it('renders with the vertical direction', () => {
-      const wrapper = mount(<Stack>Content</Stack>);
-      expect(wrapper.find('.pgn__vstack').length).toBeGreaterThan(0);
-      wrapper.setProps({ direction: 'vertical' });
-      expect(wrapper.find('.pgn__vstack').length).toBeGreaterThan(0);
+      render(<Stack data-testid="vstack">Content</Stack>);
+      const vStack = screen.getByTestId('vstack');
+      expect(vStack).toBeTruthy();
+
+      render(<Stack direction="vertical">Content</Stack>);
+      expect(vStack).toBeTruthy();
     });
     it('renders with the horizontal direction', () => {
-      const wrapper = mount(<Stack direction="horizontal">Content</Stack>);
-      expect(wrapper.find('.pgn__hstack').length).toBeGreaterThan(0);
+      render(<Stack data-testid="hstack" direction="horizontal">Content</Stack>);
+      const hStack = screen.getByTestId('hstack');
+      expect(hStack).toBeTruthy();
     });
     it('renders with the correct gap', () => {
       const gap = 3;
-      const wrapper = mount(<Stack gap={gap}>Content</Stack>);
-      expect(wrapper.find('.pgn__vstack').hasClass(`pgn__stack-gap--${gap}`)).toEqual(true);
+      render(<Stack data-testid="vstack" gap={gap}>Content</Stack>);
+      const vStack = screen.getByTestId('vstack');
+      expect(vStack.className).toContain(`pgn__stack-gap--${gap}`);
     });
     it('renders with the className prop', () => {
       const className = 'className';
-      const wrapper = mount(<Stack className={className}>Content</Stack>);
-      expect(wrapper.find('.pgn__vstack').hasClass('className')).toEqual(true);
+      render(<Stack data-testid="vstack" className={className}>Content</Stack>);
+      const vStack = screen.getByTestId('vstack');
+      expect(vStack.className).toContain(className);
     });
   });
 });