From 81fbddd21104a99e26df642aa6599a4da607519e Mon Sep 17 00:00:00 2001 From: monteri Date: Fri, 7 Jul 2023 16:54:04 +0300 Subject: [PATCH 1/8] refactor: move enzyme to react testing library --- src/Alert/Alert.test.jsx | 23 +++---- src/Annotation/Annotation.test.jsx | 16 +++-- src/Annotation/index.jsx | 2 + src/Breadcrumb/Breadcrumb.test.jsx | 101 +++++++++++++++------------- src/Breadcrumb/index.jsx | 8 ++- src/Bubble/Bubble.test.tsx | 33 ++++----- src/Button/Button.test.jsx | 47 +++++++------ src/Card/tests/CardBody.test.jsx | 19 +++--- src/Card/tests/CardContext.test.jsx | 14 ++-- 9 files changed, 146 insertions(+), 117 deletions(-) diff --git a/src/Alert/Alert.test.jsx b/src/Alert/Alert.test.jsx index 76af95f281..ec974b378b 100644 --- a/src/Alert/Alert.test.jsx +++ b/src/Alert/Alert.test.jsx @@ -1,12 +1,13 @@ import React from 'react'; -import { mount } from 'enzyme'; import { IntlProvider } from 'react-intl'; import renderer, { act } from 'react-test-renderer'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import { Context as ResponsiveContext } from 'react-responsive'; import { Info } from '../../icons'; import breakpoints from '../utils/breakpoints'; import Button from '../Button'; -import Alert from './index'; +import Alert from '.'; // eslint-disable-next-line react/prop-types function AlertWrapper({ children, ...props }) { @@ -38,12 +39,11 @@ describe('', () => { )).toJSON(); expect(tree).toMatchSnapshot(); }); - it('handles dismissible onClose', () => { + it('handles dismissible onClose', async () => { const mockOnClose = jest.fn(); - const wrapper = mount(( - Alert - )); - wrapper.find('.btn').simulate('click'); + render(Alert); + const button = screen.getByRole('button'); + await userEvent.click(button); expect(mockOnClose).toHaveBeenCalledTimes(1); }); it('renders with button prop', () => { @@ -52,12 +52,11 @@ describe('', () => { )).toJSON(); expect(tree).toMatchSnapshot(); }); - it('handles button onClick', () => { + it('handles button onClick', async () => { const mockOnClick = jest.fn(); - const wrapper = mount(( - Hello]}>Alert - )); - wrapper.find('.btn').simulate('click'); + render(Hello]}>Alert); + const button = screen.getByRole('button'); + await userEvent.click(button); expect(mockOnClick).toHaveBeenCalledTimes(1); }); it('renders with button and dismissible props', () => { diff --git a/src/Annotation/Annotation.test.jsx b/src/Annotation/Annotation.test.jsx index 23dac1afe5..0eb3190c1f 100644 --- a/src/Annotation/Annotation.test.jsx +++ b/src/Annotation/Annotation.test.jsx @@ -1,6 +1,6 @@ import React from 'react'; import renderer from 'react-test-renderer'; -import { mount } from 'enzyme'; +import { render, screen } from '@testing-library/react'; import Annotation from './index'; const VARIANTS = ['error', 'success', 'warning', 'light', 'dark']; @@ -34,9 +34,17 @@ describe('Annotation', () => { test.each(classNameTestData)( 'renders with correct className for variant: %s, with arrow placement: %s', (variant, arrowPlacement, expectedClassName) => { - const wrapper = mount(Test text); - const annotation = wrapper.find('.pgn__annotation'); - expect(annotation.hasClass(expectedClassName)).toEqual(true); + render( + + Test text + , + ); + const annotation = screen.getByTestId('annotation'); + expect(annotation.className).toContain(expectedClassName); }, ); }); diff --git a/src/Annotation/index.jsx b/src/Annotation/index.jsx index 05c1043c60..32daf07abf 100644 --- a/src/Annotation/index.jsx +++ b/src/Annotation/index.jsx @@ -7,6 +7,7 @@ const Annotation = React.forwardRef(({ variant, children, arrowPlacement, + ...props }, ref) => ( {children} diff --git a/src/Breadcrumb/Breadcrumb.test.jsx b/src/Breadcrumb/Breadcrumb.test.jsx index 5072e64e44..a8cf8ad743 100644 --- a/src/Breadcrumb/Breadcrumb.test.jsx +++ b/src/Breadcrumb/Breadcrumb.test.jsx @@ -1,5 +1,6 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import Breadcrumb from './index'; @@ -8,83 +9,88 @@ const baseProps = { { label: 'Link 1', href: '/link-1', + 'data-testid': 'link', }, { label: 'Link 2', href: '/link-2', + 'data-testid': 'link', }, { label: 'Link 3', href: '/link-3', + 'data-testid': 'link', }, ], + 'data-testid': 'breadcrumb', }; describe('', () => { - let wrapper; - it('renders with just links', () => { - wrapper = mount(); - - const list = wrapper.find('ol li'); - expect(list.length).toEqual(5); - expect(list.find('a').length).toEqual(3); + render(); + const breadcrumb = screen.getByTestId('breadcrumb'); + const list = breadcrumb.querySelectorAll('ol li'); + expect(list.length).toBe(5); + expect(screen.getAllByTestId('link').length).toBe(3); }); it('renders with links and active label', () => { const label = 'Current Page'; - wrapper = mount(); + render(); - const list = wrapper.find('ol li'); - expect(list.length).toEqual(7); - expect(list.find('a').length).toEqual(3); - expect(list.last().text()).toEqual(label); + const breadcrumb = screen.getByTestId('breadcrumb'); + const list = breadcrumb.querySelectorAll('ol li'); + expect(list.length).toBe(7); + expect(screen.getAllByTestId('link').length).toBe(3); + expect(list[list.length - 1].textContent).toBe(label); }); it('renders custom spacer', () => { - wrapper = mount(/} - />); - - const list = wrapper.find('ol li'); - expect(list.length).toEqual(5); - expect(list.find('a').length).toEqual(3); - expect(list.find('.custom-spacer').length).toEqual(2); + render( + /} + />, + ); + + const breadcrumb = screen.getByTestId('breadcrumb'); + const list = breadcrumb.querySelectorAll('ol li'); + expect(list.length).toBe(5); + expect(screen.getAllByTestId('link').length).toBe(3); + expect(screen.getAllByTestId('custom-spacer').length).toBe(2); }); - it('fires the passed in click handler', () => { + it('fires the passed in click handler', async () => { const clickHandler = jest.fn(); - wrapper = mount(); + render(); - const list = wrapper.find('ol li'); - expect(list.length).toEqual(5); + const links = screen.getAllByTestId('link'); + expect(links.length).toBe(3); - const links = list.find('a'); - expect(links.length).toEqual(3); - - links.first().simulate('click'); + await userEvent.click(links[0]); expect(clickHandler).toHaveBeenCalled(); }); it('renders in mobile view', () => { - wrapper = mount(); + render(); + const breadcrumb = screen.getByTestId('breadcrumb'); - const list = wrapper.find('ol'); - const listElements = list.find('li'); - expect(listElements.length).toEqual(2); - expect(list.hasClass('is-mobile')).toEqual(true); + const list = breadcrumb.querySelector('ol'); + const listItems = breadcrumb.querySelectorAll('ol li'); + expect(listItems.length).toBe(2); + expect(list.className).toContain('is-mobile'); }); it('renders links as custom elements', () => { - wrapper = mount(); + render(); + const breadcrumb = screen.getByTestId('breadcrumb'); + const list = breadcrumb.querySelector('ol'); - const list = wrapper.find('ol'); - const anchors = list.find('a'); - expect(anchors.length).toEqual(0); + const anchors = list.querySelectorAll('a'); + expect(anchors.length).toBe(0); - const customLinks = list.find('div'); - expect(customLinks.length).toEqual(3); + const customLinks = list.querySelectorAll('div'); + expect(customLinks.length).toBe(3); }); it('passes down link props to link elements', () => { @@ -93,15 +99,14 @@ describe('', () => { href: '/link-1', className: 'my-link', target: '_blank', + 'data-testid': 'link', }; - wrapper = mount(); - - const list = wrapper.find('ol'); - const renderedLink = list.find('a').first(); + render(); - expect(renderedLink.hasClass('my-link')).toEqual(true); - expect(renderedLink.prop('target')).toEqual('_blank'); - expect(renderedLink.prop('href')).toEqual('/link-1'); + const links = screen.getAllByTestId('link'); + expect(links[0].className).toContain('my-link'); + expect(links[0].getAttribute('target')).toBe('_blank'); + expect(links[0].getAttribute('href')).toBe('/link-1'); }); }); diff --git a/src/Breadcrumb/index.jsx b/src/Breadcrumb/index.jsx index 41cc7fd23d..0e3f0e38c5 100644 --- a/src/Breadcrumb/index.jsx +++ b/src/Breadcrumb/index.jsx @@ -8,13 +8,17 @@ import Icon from '../Icon'; function Breadcrumb({ links, activeLabel, spacer, clickHandler, - variant, isMobile, ariaLabel, linkAs, + variant, isMobile, ariaLabel, linkAs, ...props }) { const linkCount = links.length; const displayLinks = isMobile ? [links[linkCount - 1]] : links; return ( -