Merge pull request #169 from CreateThrive/feature/react-testing-library

Feature: react testing library

Author: TOPOFGR

.eslintrc

@@ -39,8 +39,7 @@
     "Request": true,
     "fetch": true,
     "reducerTester": true,
-    "mountWithProviders": true,
-    "shallowWithProviders": true
+    "renderWithProviders": true
   },
   "parser": "babel-eslint",
   "settings": {

README.md

@@ -92,7 +92,7 @@ React Firebase Admin is our in-house admin dashboard boilerplate, used in many o
 ### Unit Testing
 
 - [Jest](https://jestjs.io/) (★ 29.9k) as testing framework (see [docs](https://jestjs.io/docs/en/getting-started)).
-- [Enzyme](https://airbnb.io/enzyme/) (★ 18.5k) to test react components in Jest.
+- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) (★ 12.7k) to test react components in Jest.
 - [Redux-mock-store](https://github.com/dmitry-zaets/redux-mock-store) (★ 2.1k) to test redux actions, reducers and store state in Jest.
 
 ### Linting

functions/tsconfig.json

@@ -7,7 +7,8 @@
     "sourceMap": true,
     "strict": true,
     "target": "es2017",
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "skipLibCheck": true
   },
   "compileOnSave": true,
   "include": ["src"]

package-lock.json

@@ -56,14 +56,13 @@
     ]
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.0.2",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
     "cross-env": "^7.0.2",
     "deep-freeze": "^0.0.1",
     "dotenv": "^8.2.0",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.3",
-    "enzyme-to-json": "^3.4.4",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.11.0",
@@ -88,9 +87,6 @@
     }
   },
   "jest": {
-    "snapshotSerializers": [
-      "enzyme-to-json/serializer"
-    ],
     "collectCoverageFrom": [
       "src/**/*.{js,jsx}"
     ],

package.json

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, fireEvent } from '@testing-library/react';
 
 import ConfirmationModal from '.';
 
@@ -13,7 +13,7 @@ describe('<ConfirmationModal /> rendering', () => {
   });
 
   it('should render without crashing', () => {
-    const component = shallow(
+    const component = render(
       <ConfirmationModal
         isActive
         confirmButtonMessage="test message"
@@ -25,11 +25,11 @@ describe('<ConfirmationModal /> rendering', () => {
       />
     );
 
-    expect(component).toMatchSnapshot();
+    expect(component.asFragment()).toMatchSnapshot();
   });
 
   it('should set the active modifier if the isActive prop is passed down', () => {
-    const component = shallow(
+    const component = render(
       <ConfirmationModal
         isActive
         confirmButtonMessage="test message"
@@ -41,11 +41,13 @@ describe('<ConfirmationModal /> rendering', () => {
       />
     );
 
-    expect(component.exists('div.modal.is-active')).toBeTruthy();
+    expect(
+      component.container.querySelector('div.modal.is-active')
+    ).toBeTruthy();
   });
 
   it('should not set the active modifier if the isActive prop is not passed down', () => {
-    const component = shallow(
+    const component = render(
       <ConfirmationModal
         confirmButtonMessage="test message"
         onConfirmation={onConfirm}
@@ -56,11 +58,11 @@ describe('<ConfirmationModal /> rendering', () => {
       />
     );
 
-    expect(component.exists('div.modal.is-active')).toBeFalsy();
+    expect(component.container.querySelector('div.modal.is-active')).toBeNull();
   });
 
   it('should call onConfirm when the confirmation button is clicked', () => {
-    const component = shallow(
+    const component = render(
       <ConfirmationModal
         isActive
         confirmButtonMessage="confirm test message"
@@ -72,13 +74,12 @@ describe('<ConfirmationModal /> rendering', () => {
       />
     );
 
-    component.find('button[children="confirm test message"]').simulate('click');
-
+    fireEvent.click(component.getByText('confirm test message'));
     expect(onConfirm).toHaveBeenCalled();
   });
 
   it('should call onCancel when the cancel button is clicked', () => {
-    const component = shallow(
+    const component = render(
       <ConfirmationModal
         isActive
         confirmButtonMessage="test message"
@@ -90,13 +91,13 @@ describe('<ConfirmationModal /> rendering', () => {
       />
     );
 
-    component.find('button[children="cancel test message"]').simulate('click');
+    fireEvent.click(component.getByText('cancel test message'));
 
     expect(onCancel).toHaveBeenCalled();
   });
 
   it('should set the title of the modal', () => {
-    const component = shallow(
+    const component = render(
       <ConfirmationModal
         isActive
         confirmButtonMessage="test message"
@@ -108,11 +109,11 @@ describe('<ConfirmationModal /> rendering', () => {
       />
     );
 
-    expect(component.exists('p[children="test title"]')).toBeTruthy();
+    expect(component.getByText('test title')).toBeTruthy();
   });
 
   it('should set the body of the modal', () => {
-    const component = shallow(
+    const component = render(
       <ConfirmationModal
         isActive
         confirmButtonMessage="test message"
@@ -124,11 +125,11 @@ describe('<ConfirmationModal /> rendering', () => {
       />
     );
 
-    expect(component.exists('section[children="test body"]')).toBeTruthy();
+    expect(component.getByText('test body')).toBeTruthy();
   });
 
   it('should set the confirm button message', () => {
-    const component = shallow(
+    const component = render(
       <ConfirmationModal
         isActive
         confirmButtonMessage="confirm test message"
@@ -140,13 +141,11 @@ describe('<ConfirmationModal /> rendering', () => {
       />
     );
 
-    expect(
-      component.exists('button[children="confirm test message"]')
-    ).toBeTruthy();
+    expect(component.getByText('confirm test message')).toBeTruthy();
   });
 
   it('should set the cancel button message', () => {
-    const component = shallow(
+    const component = render(
       <ConfirmationModal
         isActive
         confirmButtonMessage="test message"
@@ -158,8 +157,6 @@ describe('<ConfirmationModal /> rendering', () => {
       />
     );
 
-    expect(
-      component.exists('button[children="cancel test message"]')
-    ).toBeTruthy();
+    expect(component.getByText('cancel test message')).toBeTruthy();
   });
 });

src/components/ConfirmationModal/ConfirmationModal.test.js

@@ -1,48 +1,47 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ConfirmationModal /> rendering should render without crashing 1`] = `
-<div
-  className="modal is-active"
->
+<DocumentFragment>
   <div
-    className="modal-background"
-    onClick={[MockFunction]}
-  />
-  <div
-    className="modal-card"
+    class="modal is-active"
   >
-    <header
-      className="modal-card-head"
+    <div
+      class="modal-background"
+    />
+    <div
+      class="modal-card"
     >
-      <p
-        className="modal-card-title"
+      <header
+        class="modal-card-head"
       >
-        test title
-      </p>
-    </header>
-    <section
-      className="modal-card-body"
-    >
-      test body
-    </section>
-    <footer
-      className="modal-card-foot"
-    >
-      <button
-        className="button is-danger undefined"
-        onClick={[MockFunction]}
-        type="button"
+        <p
+          class="modal-card-title"
+        >
+          test title
+        </p>
+      </header>
+      <section
+        class="modal-card-body"
       >
-        test message
-      </button>
-      <button
-        className="button"
-        onClick={[MockFunction]}
-        type="button"
+        test body
+      </section>
+      <footer
+        class="modal-card-foot"
       >
-        test message
-      </button>
-    </footer>
+        <button
+          class="button is-danger undefined"
+          type="button"
+        >
+          test message
+        </button>
+        <button
+          class="button"
+          type="button"
+        >
+          test message
+        </button>
+      </footer>
+    </div>
   </div>
-</div>
+</DocumentFragment>
 `;

src/components/ConfirmationModal/__snapshots__/ConfirmationModal.test.js.snap

@@ -11,7 +11,7 @@ const ConfirmationModal = ({
   confirmButtonMessage,
   onConfirmation,
   cancelButtonMessage,
-  onCancel
+  onCancel,
 }) => {
   const modifiers = isActive && 'is-active';
   const loadingModifier = isLoading && 'is-loading';
@@ -57,7 +57,7 @@ ConfirmationModal.propTypes = {
   confirmButtonMessage: PropTypes.string.isRequired,
   onConfirmation: PropTypes.func.isRequired,
   cancelButtonMessage: PropTypes.string.isRequired,
-  onCancel: PropTypes.func.isRequired
+  onCancel: PropTypes.func.isRequired,
 };
 
 export default ConfirmationModal;

src/components/ConfirmationModal/index.jsx

@@ -1,26 +1,25 @@
 import React from 'react';
-import DatePicker from 'react-datepicker';
 
 import DatePickerStyled from '.';
 
 describe('<DatePickerStyled /> rendering', () => {
   const onChange = jest.fn();
 
   it('should render without crashing', () => {
-    const { component } = shallowWithProviders(
+    const { component } = renderWithProviders(
       <DatePickerStyled
         name="test"
         dateFormat="en-US"
-        date={new Date('Thu Nov 12 2020 00:00:00 GMT-0000')}
+        date={new Date('11/12/2020')}
         onChange={onChange}
       />
     )({});
 
-    expect(component).toMatchSnapshot();
+    expect(component.asFragment()).toMatchSnapshot();
   });
 
   it('should render <DatePicker /> component correctly', () => {
-    const { component } = mountWithProviders(
+    const { component } = renderWithProviders(
       <DatePickerStyled
         name="test"
         dateFormat="en-US"
@@ -29,11 +28,11 @@ describe('<DatePickerStyled /> rendering', () => {
       />
     )({});
 
-    expect(component.exists(DatePicker)).toBeTruthy();
+    expect(component.container.querySelector('input')).toBeTruthy();
   });
 
   it('should pass the date prop to <DatePicker selected={date} /> correctly', () => {
-    const { component } = mountWithProviders(
+    const { component } = renderWithProviders(
       <DatePickerStyled
         name="test"
         dateFormat="en-US"
@@ -42,8 +41,6 @@ describe('<DatePickerStyled /> rendering', () => {
       />
     )({});
 
-    expect(component.find(DatePicker).prop('selected')).toEqual(
-      new Date('11/12/2020')
-    );
+    expect(component.container.querySelector('input').value).toBe('11-12-20');
   });
 });