diff --git a/test/short-urls/helpers/qr-codes/QrFormatDropdown.test.tsx b/test/short-urls/helpers/qr-codes/QrFormatDropdown.test.tsx index c40e05d0..2a005ea7 100644 --- a/test/short-urls/helpers/qr-codes/QrFormatDropdown.test.tsx +++ b/test/short-urls/helpers/qr-codes/QrFormatDropdown.test.tsx @@ -1,37 +1,43 @@ -import { shallow, ShallowWrapper } from 'enzyme'; -import { DropdownItem } from 'reactstrap'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import { QrCodeFormat } from '../../../../src/utils/helpers/qrCodes'; import { QrFormatDropdown } from '../../../../src/short-urls/helpers/qr-codes/QrFormatDropdown'; describe('', () => { const initialFormat: QrCodeFormat = 'svg'; const setFormat = jest.fn(); - let wrapper: ShallowWrapper; - - beforeEach(() => { - wrapper = shallow(); + const setUp = () => ({ + user: userEvent.setup(), + ...render(), }); - afterEach(() => wrapper?.unmount()); afterEach(jest.clearAllMocks); - it('renders initial state', () => { - const items = wrapper.find(DropdownItem); + it('renders initial state', async () => { + const { user } = setUp(); + const btn = screen.getByRole('button'); - expect(wrapper.prop('text')).toEqual('Format (svg)'); - expect(items.at(0).prop('active')).toEqual(false); - expect(items.at(1).prop('active')).toEqual(true); + expect(btn).toHaveTextContent('Format (svg'); + await user.click(btn); + const items = screen.getAllByRole('menuitem'); + + expect(items[0]).not.toHaveClass('active'); + expect(items[1]).toHaveClass('active'); }); - it('invokes callback when items are clicked', () => { - const items = wrapper.find(DropdownItem); + it('invokes callback when items are clicked', async () => { + const { user } = setUp(); + const clickItem = async (name: string) => { + await user.click(screen.getByRole('button')); + await user.click(screen.getByRole('menuitem', { name })); + }; expect(setFormat).not.toHaveBeenCalled(); - items.at(0).simulate('click'); + await clickItem('PNG'); expect(setFormat).toHaveBeenCalledWith('png'); - items.at(1).simulate('click'); + await clickItem('SVG'); expect(setFormat).toHaveBeenCalledWith('svg'); }); });