diff --git a/test/servers/helpers/HighlightCard.test.tsx b/test/servers/helpers/HighlightCard.test.tsx index 52815fd9..199fe4c9 100644 --- a/test/servers/helpers/HighlightCard.test.tsx +++ b/test/servers/helpers/HighlightCard.test.tsx @@ -1,32 +1,23 @@ -import { shallow, ShallowWrapper } from 'enzyme'; +import { render, screen } from '@testing-library/react'; import { ReactNode } from 'react'; -import { Card, CardText, CardTitle } from 'reactstrap'; -import { Link } from 'react-router-dom'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { MemoryRouter } from 'react-router-dom'; import { HighlightCard, HighlightCardProps } from '../../../src/servers/helpers/HighlightCard'; describe('', () => { - let wrapper: ShallowWrapper; - const createWrapper = (props: HighlightCardProps & { children?: ReactNode }) => { - wrapper = shallow(); - - return wrapper; - }; - - afterEach(() => wrapper?.unmount()); + const setUp = (props: HighlightCardProps & { children?: ReactNode }) => render( + + + , + ); it.each([ [undefined], [false], - ])('renders expected components', (link) => { - const wrapper = createWrapper({ title: 'foo', link: link as undefined | false }); + ])('does not render icon when there is no link', (link) => { + setUp({ title: 'foo', link: link as undefined | false }); - expect(wrapper.find(Card)).toHaveLength(1); - expect(wrapper.find(CardTitle)).toHaveLength(1); - expect(wrapper.find(CardText)).toHaveLength(1); - expect(wrapper.find(FontAwesomeIcon)).toHaveLength(0); - expect(wrapper.prop('tag')).not.toEqual(Link); - expect(wrapper.prop('to')).not.toBeDefined(); + expect(screen.queryByRole('img', { hidden: true })).not.toBeInTheDocument(); + expect(screen.queryByRole('link')).not.toBeInTheDocument(); }); it.each([ @@ -34,10 +25,8 @@ describe('', () => { ['bar'], ['baz'], ])('renders provided title', (title) => { - const wrapper = createWrapper({ title }); - const cardTitle = wrapper.find(CardTitle); - - expect(cardTitle.html()).toContain(`>${title}<`); + setUp({ title }); + expect(screen.getByText(title)).toHaveAttribute('class', expect.stringContaining('highlight-card__title')); }); it.each([ @@ -45,10 +34,8 @@ describe('', () => { ['bar'], ['baz'], ])('renders provided children', (children) => { - const wrapper = createWrapper({ title: 'foo', children }); - const cardText = wrapper.find(CardText); - - expect(cardText.html()).toContain(`>${children}<`); + setUp({ title: 'title', children }); + expect(screen.getByText(children)).toHaveAttribute('class', expect.stringContaining('card-text')); }); it.each([ @@ -56,10 +43,9 @@ describe('', () => { ['bar'], ['baz'], ])('adds extra props when a link is provided', (link) => { - const wrapper = createWrapper({ title: 'foo', link }); + setUp({ title: 'title', link }); - expect(wrapper.find(FontAwesomeIcon)).toHaveLength(1); - expect(wrapper.prop('tag')).toEqual(Link); - expect(wrapper.prop('to')).toEqual(link); + expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument(); + expect(screen.getByRole('link')).toHaveAttribute('href', `/${link}`); }); });