diff --git a/test/visits/charts/ChartCard.test.tsx b/test/visits/charts/ChartCard.test.tsx index c9745e59..fce343a2 100644 --- a/test/visits/charts/ChartCard.test.tsx +++ b/test/visits/charts/ChartCard.test.tsx @@ -1,46 +1,22 @@ import { ReactNode } from 'react'; -import { shallow, ShallowWrapper } from 'enzyme'; -import { Card, CardBody, CardHeader, CardFooter } from 'reactstrap'; +import { render, screen } from '@testing-library/react'; import { ChartCard } from '../../../src/visits/charts/ChartCard'; describe('<ChartCard />', () => { - let wrapper: ShallowWrapper; - const createWrapper = (title: Function | string = '', footer?: ReactNode) => { - wrapper = shallow(<ChartCard title={title} footer={footer} />); - - return wrapper; - }; - - afterEach(() => wrapper?.unmount()); - - it('renders expected components', () => { - const wrapper = createWrapper(); - const card = wrapper.find(Card); - const header = wrapper.find(CardHeader); - const body = wrapper.find(CardBody); - const footer = wrapper.find(CardFooter); - - expect(card).toHaveLength(1); - expect(header).toHaveLength(1); - expect(body).toHaveLength(1); - expect(footer).toHaveLength(0); - }); + const setUp = (title: Function | string = '', footer?: ReactNode) => render( + <ChartCard title={title} footer={footer} />, + ); it.each([ ['the title', 'the title'], [() => 'the title from func', 'the title from func'], ])('properly renders title by parsing provided value', (title, expectedTitle) => { - const wrapper = createWrapper(title); - const header = wrapper.find(CardHeader); - - expect(header.html()).toContain(expectedTitle); + setUp(title); + expect(screen.getByText(expectedTitle)).toBeInTheDocument(); }); it('renders footer only when provided', () => { - const wrapper = createWrapper('', 'the footer'); - const footer = wrapper.find(CardFooter); - - expect(footer).toHaveLength(1); - expect(footer.html()).toContain('the footer'); + setUp('', 'the footer'); + expect(screen.getByText('the footer')).toBeInTheDocument(); }); });