diff --git a/src/short-urls/ShortUrlForm.tsx b/src/short-urls/ShortUrlForm.tsx
index c6b9800d..23406833 100644
--- a/src/short-urls/ShortUrlForm.tsx
+++ b/src/short-urls/ShortUrlForm.tsx
@@ -12,7 +12,7 @@ import { SelectedServer } from '../servers/data';
import { TagsSelectorProps } from '../tags/helpers/TagsSelector';
import { DomainSelectorProps } from '../domains/DomainSelector';
import { formatIsoDate } from '../utils/helpers/date';
-import UseExistingIfFoundInfoIcon from './UseExistingIfFoundInfoIcon';
+import { UseExistingIfFoundInfoIcon } from './UseExistingIfFoundInfoIcon';
import { ShortUrlData } from './data';
import { ShortUrlFormCheckboxGroup } from './helpers/ShortUrlFormCheckboxGroup';
import './ShortUrlForm.scss';
diff --git a/src/short-urls/UseExistingIfFoundInfoIcon.tsx b/src/short-urls/UseExistingIfFoundInfoIcon.tsx
index 6024c810..2732247e 100644
--- a/src/short-urls/UseExistingIfFoundInfoIcon.tsx
+++ b/src/short-urls/UseExistingIfFoundInfoIcon.tsx
@@ -36,7 +36,7 @@ const InfoModal = ({ isOpen, toggle }: { isOpen: boolean; toggle: () => void })
);
-const UseExistingIfFoundInfoIcon = () => {
+export const UseExistingIfFoundInfoIcon = () => {
const [isModalOpen, toggleModal] = useToggle();
return (
@@ -48,5 +48,3 @@ const UseExistingIfFoundInfoIcon = () => {
>
);
};
-
-export default UseExistingIfFoundInfoIcon;
diff --git a/test/short-urls/UseExistingIfFoundInfoIcon.test.tsx b/test/short-urls/UseExistingIfFoundInfoIcon.test.tsx
index 354bd4d9..86a792c7 100644
--- a/test/short-urls/UseExistingIfFoundInfoIcon.test.tsx
+++ b/test/short-urls/UseExistingIfFoundInfoIcon.test.tsx
@@ -1,22 +1,12 @@
-import { mount, ReactWrapper } from 'enzyme';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Modal } from 'reactstrap';
-import UseExistingIfFoundInfoIcon from '../../src/short-urls/UseExistingIfFoundInfoIcon';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { UseExistingIfFoundInfoIcon } from '../../src/short-urls/UseExistingIfFoundInfoIcon';
describe('', () => {
- let wrapped: ReactWrapper;
+ it('shows modal when icon is clicked', async () => {
+ render();
- beforeEach(() => {
- wrapped = mount();
- });
-
- afterEach(() => wrapped.unmount());
-
- it('shows modal when icon is clicked', () => {
- const icon = wrapped.find(FontAwesomeIcon);
-
- expect(wrapped.find(Modal).prop('isOpen')).toEqual(false);
- icon.simulate('click');
- expect(wrapped.find(Modal).prop('isOpen')).toEqual(true);
+ expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+ fireEvent.click(screen.getByTitle('What does this mean?').firstChild as Node);
+ expect(await screen.findByRole('dialog')).toBeInTheDocument();
});
});