Migrated ExportBtn test to react testing library, and changed icon

src/utils/ExportBtn.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { Button, ButtonProps } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faFileDownload } from '@fortawesome/free-solid-svg-icons';
+import { faFileCsv } from '@fortawesome/free-solid-svg-icons';
 import { prettify } from './helpers/numbers';
 
 interface ExportBtnProps extends Omit<ButtonProps, 'outline' | 'color' | 'disabled'> {
@@ -11,6 +11,6 @@ interface ExportBtnProps extends Omit<ButtonProps, 'outline' | 'color' | 'disabl
 
 export const ExportBtn: FC<ExportBtnProps> = ({ amount = 0, loading = false, ...rest }) => (
   <Button {...rest} outline color="primary" disabled={loading}>
-    <FontAwesomeIcon icon={faFileDownload} /> {loading ? 'Exporting...' : <>Export ({prettify(amount)})</>}
+    <FontAwesomeIcon icon={faFileCsv} /> {loading ? 'Exporting...' : <>Export ({prettify(amount)})</>}
   </Button>
 );

test/utils/ExportBtn.test.tsx

@@ -1,29 +1,22 @@
-import { shallow, ShallowWrapper } from 'enzyme';
+import { render, screen } from '@testing-library/react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faFileDownload } from '@fortawesome/free-solid-svg-icons';
 import { ExportBtn } from '../../src/utils/ExportBtn';
 
 describe('<ExportBtn />', () => {
-  let wrapper: ShallowWrapper;
+  const setUp = (amount?: number, loading = false) => render(<ExportBtn amount={amount} loading={loading} />);
-  const createWrapper = (amount?: number, loading = false) => {
-    wrapper = shallow(<ExportBtn amount={amount} loading={loading} />);
-
-    return wrapper;
-  };
-
-  afterEach(jest.clearAllMocks);
-  afterEach(() => wrapper?.unmount());
 
   it.each([
     [true, 'Exporting...'],
-    [false, 'Export ('],
+    [false, 'Export (0)'],
-  ])('renders a button', (loading, text) => {
+  ])('renders loading state when expected', async (loading, text) => {
-    const wrapper = createWrapper(undefined, loading);
+    setUp(undefined, loading);
+    const btn = await screen.findByRole('button');
 
-    expect(wrapper.prop('outline')).toEqual(true);
+    expect(btn).toHaveTextContent(text);
-    expect(wrapper.prop('color')).toEqual('primary');
+    if (loading) {
-    expect(wrapper.prop('disabled')).toEqual(loading);
+      expect(btn).toHaveAttribute('disabled');
-    expect(wrapper.html()).toContain(text);
+    } else {
+      expect(btn).not.toHaveAttribute('disabled');
+    }
   });
 
   it.each([
@@ -31,17 +24,13 @@ describe('<ExportBtn />', () => {
     [10, '10'],
     [10_000, '10,000'],
     [10_000_000, '10,000,000'],
-  ])('renders expected amount', (amount, expectedRenderedAmount) => {
+  ])('renders expected amount', async (amount, expectedRenderedAmount) => {
-    const wrapper = createWrapper(amount);
+    setUp(amount);
-
+    expect(await screen.findByRole('button')).toHaveTextContent(`Export (${expectedRenderedAmount})`);
-    expect(wrapper.html()).toContain(`Export (${expectedRenderedAmount})`);
   });
 
   it('renders expected icon', () => {
-    const wrapper = createWrapper();
+    setUp();
-    const icon = wrapper.find(FontAwesomeIcon);
+    expect(screen.getByRole('img', { hidden: true })).toMatchSnapshot();
-
-    expect(icon).toHaveLength(1);
-    expect(icon.prop('icon')).toEqual(faFileDownload);
   });
 });

test/utils/__snapshots__/ExportBtn.test.tsx.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ExportBtn /> renders expected icon 1`] = `
+<svg
+  aria-hidden="true"
+  class="svg-inline--fa fa-file-csv "
+  data-icon="file-csv"
+  data-prefix="fas"
+  focusable="false"
+  role="img"
+  viewBox="0 0 384 512"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M256 0v128h128L256 0zM224 128L224 0H48C21.49 0 0 21.49 0 48v416C0 490.5 21.49 512 48 512h288c26.51 0 48-21.49 48-48V160h-127.1C238.3 160 224 145.7 224 128zM128 280C128 284.4 124.4 288 120 288H112C103.1 288 96 295.1 96 304v32C96 344.9 103.1 352 112 352h8C124.4 352 128 355.6 128 360v16C128 380.4 124.4 384 120 384H112C85.5 384 64 362.5 64 336v-32C64 277.5 85.5 256 112 256h8C124.4 256 128 259.6 128 264V280zM172.3 384H160c-4.375 0-8-3.625-8-8v-16C152 355.6 155.6 352 160 352h12.25c6 0 10.38-3.5 10.38-6.625c0-1.25-.75-2.625-2.125-3.875l-21.88-18.75C150.3 315.5 145.4 305.3 145.4 294.6C145.4 273.4 164.4 256 187.8 256H200c4.375 0 8 3.625 8 8v16C208 284.4 204.4 288 200 288H187.8c-6 0-10.38 3.5-10.38 6.625c0 1.25 .75 2.625 2.125 3.875l21.88 18.75c8.375 7.25 13.25 17.5 13.25 28.12C214.6 366.6 195.6 384 172.3 384zM288 284.8V264C288 259.6 291.6 256 296 256h16C316.4 256 320 259.6 320 264v20.75c0 35.5-12.88 69-36.25 94.13C280.8 382.1 276.5 384 272 384s-8.75-1.875-11.75-5.125C236.9 353.8 224 320.3 224 284.8V264C224 259.6 227.6 256 232 256h16C252.4 256 256 259.6 256 264v20.75c0 20.38 5.75 40.25 16 56.88C282.3 325 288 305.1 288 284.8z"
+    fill="currentColor"
+  />
+</svg>
+`;