WIP ⚠ configure jest with enzyme

__mocks__/FileCard.test.js

@@ -0,0 +1,172 @@
+import React from "react";
+import Enzyme, {shallow} from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import FileCard from '../src/components/file/FileCard';
+import { findByAttribute, checkProps } from './testUtils';
+
+Enzyme.configure({
+    adapter: new Adapter(),
+});
+
+const mockSetPreview = jest.fn();
+
+jest.mock('react', () => ({
+    ...jest.requireActual('react'),
+    useState: jest.fn(),
+}))
+
+import { useState } from 'react';
+
+const defaultProps = {
+    repository: {
+        owner: {
+            username: 'username',
+            avatar_url: 'avatar_url',
+        },
+        name: 'name',
+        avatar_url: 'avatar_url',
+        permissions: {
+            push: true,
+        },
+        full_name: 'full_name',
+        default_branch: 'default_branch'
+    },
+    file:{
+        name: 'file.name',
+        path: 'file.path',
+        sha: 'file.sha',
+        content: 'file.content',
+        branch: 'file.branch',
+        filepath: 'filepath',
+        save: () => {},
+        dangerouslyDelete: () => {},
+        close: () => {}
+    },
+    isAuthenticated: true
+}
+
+const setupWrapper = (props = {}) => {
+    const setupProps = {...defaultProps, ...props}
+    return shallow(<FileCard {...setupProps}/>)
+}
+
+
+test('FileForm PropTypes', () => {
+    const conformingProps = {
+        repository: {
+            owner: {
+                username: 'username',
+                avatar_url: 'avatar_url',
+            },
+            name: 'name',
+            avatar_url: 'avatar_url',
+            permissions: {
+                push: true,
+            },
+            full_name: 'full_name',
+            default_branch: 'default_branch'
+        },
+        file:{
+            name: 'file.name',
+            path: 'file.path',
+            sha: 'file.sha',
+            content: 'file.content',
+            branch: 'file.branch',
+            filepath: 'filepath',
+            save: () => {},
+            dangerouslyDelete: () => {},
+            close: () => {}
+        },
+        isAuthenticated: true,
+    }
+    checkProps(FileCard, conformingProps);
+});
+
+// render tests
+describe('render fileCard elements',() => {
+    beforeEach(()=>{
+        useState.mockImplementation(jest.requireActual('react').useState);
+    })
+    test('render fileCard', () => {
+        const wrapper = setupWrapper();
+        const fileCard = findByAttribute(wrapper, 'component-fileCard');
+        expect(fileCard.length).toBe(1);
+    });
+
+    test('render cardHeader', () => {
+        const wrapper = setupWrapper();
+        const cardHeader = findByAttribute(wrapper, 'cardHeader');
+        expect(cardHeader.length).toBe(1);
+    });
+
+    test('render blockEditable', () => {
+        const wrapper = setupWrapper();
+        const blockEditable = findByAttribute(wrapper, 'blockEditable');
+        expect(blockEditable.length).toBe(1);
+    });
+
+    test('render previewButton', () => {
+        const wrapper = setupWrapper();
+        const previewButton = findByAttribute(wrapper, 'previewButton');
+        expect(previewButton.length).toBe(1);
+    });
+
+    test('render saveButton', () => {
+        const wrapper = setupWrapper();
+        const saveButton = findByAttribute(wrapper, 'saveButton');
+        expect(saveButton.length).toBe(1);
+    });
+
+    test('render deleteButton', () => {
+        const wrapper = setupWrapper();
+        const deleteButton = findByAttribute(wrapper, 'deleteButton');
+        expect(deleteButton.length).toBe(1);
+    });
+
+    test('render closeButton', () => {
+        const wrapper = setupWrapper();
+        const closeButton = findByAttribute(wrapper, 'closeButton');
+        expect(closeButton.length).toBe(1);
+    });
+});
+
+
+// conditional rendering
+describe('conditional rendering',() => {
+    beforeEach(()=>{
+        useState.mockImplementation(jest.requireActual('react').useState);
+    })
+    test('conditional rendering preview', () => {
+        const wrapper = setupWrapper();
+        let previewIcon = findByAttribute(wrapper, 'previewIcon');
+        let previewIconOutlined = findByAttribute(wrapper, 'previewIconOutlined');
+        expect(previewIcon.length).toBe(0);
+        expect(previewIconOutlined.length).toBe(1);
+        const previewButton = findByAttribute(wrapper, 'previewButton');
+        previewButton.simulate('click');
+        previewIcon = findByAttribute(wrapper, 'previewIcon');
+        previewIconOutlined = findByAttribute(wrapper, 'previewIconOutlined');
+        expect(previewIcon.length).toBe(1);
+        expect(previewIconOutlined.length).toBe(0);
+    });
+});
+
+describe('switch the preview state',() => {    
+    test('switch the preview state from true to false', () => {
+        useState.mockReturnValue([true, mockSetPreview]);
+        const wrapper = setupWrapper();
+        const blockEditable = findByAttribute(wrapper, 'blockEditable');
+        expect(blockEditable.props().preview).toBeTruthy();
+        const previewButton = findByAttribute(wrapper, 'previewButton');
+        previewButton.simulate('click');
+        expect(mockSetPreview).toBeCalledWith(false);
+    });
+
+    test('switch the preview state from false to true', () => {
+        useState.mockReturnValue([false, mockSetPreview]);
+        const wrapper = setupWrapper();
+        const previewButton = findByAttribute(wrapper, 'previewButton');
+        previewButton.simulate('click');
+        expect(mockSetPreview).toBeCalledWith(true);
+    });
+})

__mocks__/FileForm.test.js

@@ -0,0 +1,96 @@
+import React from "react";
+import Enzyme, {shallow} from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import FileForm from '../src/components/file/FileForm';
+import { findByAttribute, checkProps } from './testUtils';
+
+Enzyme.configure({
+    adapter: new Adapter(),
+});
+
+const defaultProps = { onSubmit: () => {} }
+
+const setupWrapper = (props = {}) => {
+    const setupProps = {...defaultProps, ...props}
+    return shallow(<FileForm {...setupProps}/>)
+}
+
+const mockSetBranch = jest.fn();
+
+jest.mock('react', () => ({
+    ...jest.requireActual('react'),
+    useState: (initialState) => [initialState, mockSetBranch]
+}))
+
+// render tests
+describe('render fileForm elements',() => {
+    test('render fileForm', () => {
+        const wrapper = setupWrapper();
+        const fileForm = findByAttribute(wrapper, 'component-fileForm');
+        expect(fileForm.length).toBe(1);
+    });
+
+    test('render branch-textField', () => {
+        const wrapper = setupWrapper();
+        const branch = findByAttribute(wrapper, 'branch-textField');
+        expect(branch.length).toBe(1);
+    });
+
+    test('render filepath-textField', () => {
+        const wrapper = setupWrapper();
+        const filepath = findByAttribute(wrapper, 'filepath-textField');
+        expect(filepath.length).toBe(1);
+    });
+
+    test('render defaultContent-textField', () => {
+        const wrapper = setupWrapper();
+        const defaultContent = findByAttribute(wrapper, 'defaultContent-textField');
+        expect(defaultContent.length).toBe(1);
+    });
+
+    test('render submit-button', () => {
+        const wrapper = setupWrapper();
+        const submit = findByAttribute(wrapper, 'submit-button');
+        expect(submit.length).toBe(1);
+    });
+});
+
+// PropTypes tests
+test('FileForm PropTypes', () => {
+    const conformingProps = {
+        submitText: "text",
+        onSubmit: () => {},
+        branch: 'branch',
+        filepath: 'filepath',
+        defaultContent: 'defaultContent',
+    }
+    checkProps(FileForm, conformingProps)
+});
+
+
+// input text 
+describe('text input change',() => {
+    test('update the state with the input value of branch', () => {
+        const wrapper = setupWrapper();
+        const textField = findByAttribute(wrapper, 'branch-textField');
+        const mockEvent = { target: { value: 'branch' } };
+        textField.simulate('change', mockEvent);
+        expect(mockSetBranch).toBeCalledWith('branch')
+    });
+
+    test('update the state with the input value of filepath', () => {
+        const wrapper = setupWrapper();
+        const textField = findByAttribute(wrapper, 'filepath-textField');
+        const mockEvent = { target: { value: 'filepath' } };
+        textField.simulate('change', mockEvent);
+        expect(mockSetBranch).toBeCalledWith('filepath')
+    });
+
+    test('update the state with the input value of defaultContent', () => {
+        const wrapper = setupWrapper();
+        const textField = findByAttribute(wrapper, 'defaultContent-textField');
+        const mockEvent = { target: { value: 'defaultContent' } };
+        textField.simulate('change', mockEvent);
+        expect(mockSetBranch).toBeCalledWith('defaultContent')
+    });
+})

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

__mocks__/testUtils.js

@@ -0,0 +1,12 @@
+import checkPropTypes from 'check-prop-types';
+
+export const findByAttribute = (wrapper, attribute) => wrapper.find(`[data-test='${attribute}']`)
+
+export const checkProps = (component, conformingProps) => {
+    const propError = checkPropTypes(
+        component.propTypes,
+        conformingProps,
+        'prop',
+        component.name);
+    expect(propError).toBeUndefined();
+}

jest.enzyme.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+    'roots': [
+      '<rootDir>/__mocks__',
+    ],
+    'moduleNameMapper': {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
+      "\\.(css|less)$": "identity-obj-proxy"
+    }
+  };

package.json

@@ -29,6 +29,7 @@
     "test:e2e": "NODE_ENV=test start-test 6060 cypress:run && nyc report --reporter=json-summary",
     "test:unit": "NODE_ENV=test jest ./src/core --coverage && cat ./coverage/lcov.info | coveralls",
     "test": "nyc --exclude-after-remap=false npm run test:e2e",
+    "testJestEnzyme": "jest --watch -c ./jest.enzyme.config.js",
     "create-coverage-badge": "bash scripts/create-badge-json.sh"
   },
   "browserslist": [
@@ -66,14 +67,18 @@
     "babel-jest": "24.9.0",
     "babel-loader": "^8.0.6",
     "babel-plugin-istanbul": "6.0.0",
+    "check-prop-types": "^1.1.2",
     "coveralls": "3.0.7",
     "cypress": "^6.8.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.6",
     "eslint": "6.6.0",
     "eslint-config-prettier": "6.5.0",
     "eslint-plugin-chai-friendly": "0.5.0",
     "eslint-plugin-cypress": "^2.11.1",
     "eslint-plugin-mdx": "1.0.1",
     "eslint-plugin-react": "7.19.0",
+    "identity-obj-proxy": "^3.0.0",
     "istanbul-lib-coverage": "2.0.5",
     "jest": "24.9.0",
     "lorem-ipsum": "2.0.1",