Add a basic framework for testing and a single demo test

jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  roots: ["<rootDir>/src"],
+  transform: {
+    "^.+\\.tsx?$": "ts-jest"
+  },
+  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"]
+};

package.json

@@ -66,6 +66,7 @@
   "devDependencies": {
     "husky": "^1.3.1",
     "lint-staged": "^8.1.5",
+    "react-testing-library": "^6.1.2",
     "stylelint": "^9.10.1",
     "stylelint-config-recommended-scss": "^3.2.0",
     "stylelint-scss": "^3.5.4"

src/App.test.tsx

@@ -1,9 +1,36 @@
+import { ConnectedRouter } from "connected-react-router";
+import { createMemoryHistory } from "history";
 import React from "react";
-import ReactDOM from "react-dom";
+import { Provider } from "react-redux";
+import { withRouter } from "react-router";
+import { cleanup, render } from "react-testing-library";
 import App from "./App";
+import store from "./store/createStore";
 
-it("renders without crashing", () => {
-  const div = document.createElement("div");
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
+afterEach(cleanup);
+
+jest.mock("react-ga");
+
+function renderWithRouter(
+  ui: any,
+  {
+    route = "/",
+    history = createMemoryHistory({ initialEntries: [route] })
+  } = {}
+) {
+  return {
+    ...render(
+      <Provider store={store}>
+        <ConnectedRouter history={history}>{ui}</ConnectedRouter>
+      </Provider>
+    ),
+    // adding `history` to the returned utilities to allow us
+    // to reference it in our tests (just try to avoid using
+    // this to test implementation details).
+    history
+  };
+}
+test("App renders without crashing", () => {
+  const { container } = renderWithRouter(<App />);
+  expect(container).toMatchSnapshot();
 });

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,7 +30,10 @@ 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>

tsconfig.json

@@ -23,6 +23,9 @@
     "skipLibCheck": true,
     "esModuleInterop": true
   },
+  "typeAcquisition": {
+    "include": ["jest"]
+  },
   "exclude": [
     "node_modules",
     "build",