WIP ⚠ configure jest with enzyme

__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",

src/components/file/FileCard.js

@@ -106,6 +106,11 @@ FileCard.propTypes = {
     }),
     name: PropTypes.string.isRequired,
     avatar_url: PropTypes.string,
+    permissions: PropTypes.shape({
+      push: PropTypes.bool,
+    }).isRequired,
+    full_name: PropTypes.string.isRequired,
+    default_branch: PropTypes.string.isRequired, 
   }).isRequired,
   /** Pass a previously returned file object to bypass the selection. */
   file: PropTypes.shape({
@@ -115,6 +120,9 @@ FileCard.propTypes = {
     content: PropTypes.string,
     branch: PropTypes.string,
     filepath: PropTypes.string,
+    save: PropTypes.func.isRequired,
+    dangerouslyDelete: PropTypes.func.isRequired,
+    close: PropTypes.func.isRequired
   }),
   /** Pass a previously returned authentication object to bypass login. */
   authentication: PropTypes.shape({

src/components/file/FileForm.js

@@ -17,28 +17,35 @@ function FileForm({
   const disabled = !(filepath);
 
   return (
-    <Paper style={{ marginBottom: '1em', padding: '1.3em' }}>
+    <Paper 
+      style={{ marginBottom: '1em', padding: '1.3em' }}
+      data-test="component-fileForm"
+    >
       <form>
         <button type="submit" disabled style={{ display: 'none' }} aria-hidden="true"></button>
         <TextField
           name='branch' label='branch' type='text' autoComplete={null}
-          variant="outlined" margin="normal" fullWidth defaultValue={branch}
+          variant="outlined" margin="normal" fullWidth defaultValue={'branch'}
           onChange={(e) => setBranch(e.target.value)}
+          data-test="branch-textField"
         />
         <TextField
           name='filepath' label='filepath' type='text' autoComplete={null}
           variant="outlined" margin="normal" fullWidth defaultValue={filepath}
           onChange={(e) => setFilepath(e.target.value)}
+          data-test="filepath-textField"
         />
         <TextField
           name='defaultContent' label='defaultContent' type='text' multiline={true} autoComplete={null}
           variant="outlined" margin="normal" fullWidth defaultValue={defaultContent}
           onChange={(e) => setDefaultContent(e.target.value)}
+          data-test="defaultContent-textField"
         />
         <Button type="button" disabled={disabled} fullWidth variant="contained" color="primary"
           onClick={() => onSubmit({
             branch, filepath, defaultContent,
           })}
+          data-test="submit-button"
         >
           {submitText}
         </Button>
@@ -52,6 +59,9 @@ FileForm.propTypes = {
   submitText: PropTypes.string,
   /** Function run when submit button is clicked */
   onSubmit: PropTypes.func.isRequired,
+  branch: PropTypes.string,
+  filepath: PropTypes.string,
+  defaultContent: PropTypes.string,
 };
 
 FileForm.defaultProps = { submitText: 'Submit' };