Add Jest testing framework for unit tests

Add scripts for CI and for local code coverage
- test:ci for CI
- test:cov to see code coverage locally. Because running with coverage
  slows down the test suite, this was added as an optional script.
  The --watchAll flag was added to `test:cov` because there is an issue
  where coverage reports 0/0% when tests run in interactive mode.
  jestjs/jest#7331
  jest-community/vscode-jest#433

Have ESLint and Git ignore the coverage output

Add tests for the App component

Update README with unit test instructions

tdrs-frontend/.eslintignore

@@ -1,4 +1,5 @@
 node_modules
 build
 public
-serviceWorker.js
+serviceWorker.js
+coverage

tdrs-frontend/.eslintrc.json

@@ -14,6 +14,7 @@
   "rules": {
     "jsx-a11y/href-no-hash": ["off"],
     "react/jsx-filename-extension": ["warn", { "extensions": [".js", ".jsx"] }],
+    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
     "max-len": [
       "warn",
       {

tdrs-frontend/.gitignore

@@ -1,5 +1,6 @@
 node_modules/
 build/
+coverage/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

tdrs-frontend/README.md

@@ -32,6 +32,30 @@ yarn lint
 
 If you use [VSCode](https://code.visualstudio.com/) as an [IDE](https://en.wikipedia.org/wiki/Integrated_development_environment), it will be helpful to add the extensions, [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode). These make it possible to catch lint errors as they occur, and even auto-fix style errors (with Prettier).
 
+### Running Tests
+
+This project uses [Jest](https://jestjs.io/) for unit tests.
+
+**Unit Tests with Jest**
+
+Jest provides an interactive test consolde that's helpful for development. After running the following commands, you will see options to run all the tests, run only failing tests, run specific tests, and more.
+- To run unit tests locally:
+  ```
+  yarn test
+  ```
+- To run unit tests with code coverage report:
+  ```
+  yarn test:cov
+  ```
+- To run unit tests as a CI environment would, which runs the tests once (without the interactive console):
+  ```
+  yarn test:ci
+  ```
+
+Another simple way to run only one test (focus on only one test at a time) is to change `it()` to `fit()`. You can skip tests by changing `it()` to `xit()`. [These](https://create-react-app.dev/docs/running-tests/#focusing-and-excluding-tests) can be used in addition to the [methods](https://jestjs.io/docs/en/api) Jest provides.
+
+In addition to [Jest's matchers](https://jestjs.io/docs/en/expect), this project uses [enzyme-matchers](https://github.com/FormidableLabs/enzyme-matchers) to simplify tests and make them more readable. Enzyme matchers is integrated with Jest using the [`jest-enzyme` package](https://github.com/FormidableLabs/enzyme-matchers/blob/master/packages/jest-enzyme/README.md#assertions) which provides many useful assertions for testing React components.
+
 ## To build for deployment
 
 - From `TANF-app/tdrs-frontend` run

tdrs-frontend/package.json

@@ -17,6 +17,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
+    "test:cov": "react-scripts test --coverage --watchAll",
+    "test:ci": "CI=1 react-scripts test --coverage",
     "eject": "react-scripts eject",
     "lint": "eslint src/ && echo 'Lint complete.'"
   },
@@ -37,14 +39,31 @@
   },
   "devDependencies": {
     "babel-eslint": "^10.1.0",
-    "eslint": "^7.5.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.5",
     "eslint-plugin-react-hooks": "^4.0.8",
+    "jest-enzyme": "^7.1.2",
     "prettier": "^2.0.5"
+  },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx}",
+      "!src/index.js",
+      "!src/serviceWorker.js"
+    ],
+    "coverageThreshold": {
+      "global": {
+        "statements": 90,
+        "branches": 90,
+        "functions": 90,
+        "lines": 90
+      }
+    }
   }
 }

tdrs-frontend/src/App.test.js

@@ -1,9 +1,16 @@
 import React from 'react'
-import { render } from '@testing-library/react'
+import { shallow } from 'enzyme'
+
+import { GovBanner } from '@trussworks/react-uswds'
 import App from './App'
 
-test('renders learn react link', () => {
-  const { getByText } = render(<App />)
-  const linkElement = getByText(/learn react/i)
-  expect(linkElement).toBeInTheDocument()
+describe('App.js', () => {
+  it('renders the Gov Banner', () => {
+    const wrapper = shallow(<App />)
+    expect(wrapper.find(GovBanner)).toExist()
+  })
+  it('renders a welcome message', () => {
+    const wrapper = shallow(<App />)
+    expect(wrapper.find('h1')).toIncludeText('Welcome to TDRS!')
+  })
 })

tdrs-frontend/src/setupTests.js

@@ -1,5 +1,12 @@
+/* eslint-disable import/no-extraneous-dependencies */
+
 // jest-dom adds custom jest matchers for asserting on DOM nodes.
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom/extend-expect'
+import 'jest-enzyme'
+import Enzyme from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
+Enzyme.configure({ adapter: new Adapter() })