Add a basic framework for testing and a single demo test

jest.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  preset: "ts-jest",
+  testEnvironment: "node",
+  setupFiles: ["./src/setupTests.ts"],
+  moduleNameMapper: {
+    "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+      "<rootDir>/mocks/fileMock.js",
+    "\\.(css|less)$": "<rootDir>/mocks/fileMock.js"
+  }
+};

mocks/fileMock.js

@@ -0,0 +1 @@
+module.exports = "";

package.json

@@ -64,11 +64,19 @@
     "utility-types": "^3.4.1"
   },
   "devDependencies": {
+    "@types/enzyme": "^3.9.1",
+    "@types/enzyme-adapter-react-16": "^1.0.5",
+    "enzyme": "^3.9.0",
+    "enzyme-adapter-react-16": "^1.11.2",
     "husky": "^1.3.1",
+    "jest": "^24.5.0",
+    "jest-dom": "^3.1.3",
     "lint-staged": "^8.1.5",
+    "react-testing-library": "^6.0.1",
     "stylelint": "^9.10.1",
     "stylelint-config-recommended-scss": "^3.2.0",
-    "stylelint-scss": "^3.5.4"
+    "stylelint-scss": "^3.5.4",
+    "ts-jest": "^24.0.0"
   },
   "husky": {
     "hooks": {
@@ -96,7 +104,7 @@
     "start-js": "react-scripts-ts start",
     "start": "npm-run-all -p watch-css start-js",
     "build": "yarn build-css && react-scripts-ts build && ncp build dist",
-    "test": "react-scripts-ts test --env=jsdom",
+    "test": "jest --watch",
     "eject": "react-scripts-ts eject",
     "deploy": "yarn build",
     "postinstall": "node postinstall.js"

src/components/FixMeNavbar/FixMeNavbar.test.tsx

@@ -0,0 +1,9 @@
+import { shallow } from "enzyme";
+import React from "react";
+import FixmeNavbar from "./FixMeNavbar";
+
+describe("<FixmeNavBar />", () => {
+  it("renders without errors", () => {
+    shallow(<FixmeNavbar />);
+  });
+});

src/components/FixMeNavbar/FixMeNavbar.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { OutboundLink } from "react-ga";
-import { FaFacebook, FaGithub, FaTwitter } from 'react-icons/fa';
+import { FaFacebook, FaGithub, FaTwitter } from "react-icons/fa";
 import { NavLink } from "react-router-dom";
 import { Collapse, Nav, Navbar, NavbarToggler, NavItem } from "reactstrap";
 import Logo from "./logo-fixme.svg";
@@ -12,7 +12,7 @@ export interface IFixMeNavbarState {
 export default class FixMeNavbar extends React.Component<
   { white?: boolean },
   IFixMeNavbarState
-  > {
+> {
   public readonly state = {
     isOpen: false
   };
@@ -30,11 +30,18 @@ export default class FixMeNavbar extends React.Component<
           <NavLink className="mr-auto navbar-brand" to="/">
             <img src={Logo} className="d-inline-block align-top" alt="FixMe" />
           </NavLink>
-          <NavbarToggler aria-label="Navigation Toggler" onClick={this.toggleNavbar} />
+          <NavbarToggler
+            aria-label="Navigation Toggler"
+            onClick={this.toggleNavbar}
+          />
           <Collapse isOpen={this.state.isOpen} navbar={true}>
             <Nav className="ml-auto" navbar={true}>
               <NavItem>
-                <NavLink className="nav-link" to="/issues">
+                <NavLink
+                  className="nav-link"
+                  to="/issues"
+                  data-testid="issue-link"
+                >
                   Issues
                 </NavLink>
               </NavItem>

src/setupTests.ts

@@ -0,0 +1,4 @@
+import Enzyme from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+
+Enzyme.configure({ adapter: new Adapter() });