Added Jest test suite

config/env.js

@@ -12,15 +12,10 @@ const CONFIG = process.env.CONFIG || "config.js";
 const envConfig = require("../" + CONFIG);
 
 const userConfig = {};
-const userFeatures = {};
 for (const k in envConfig) {
   userConfig[k] = JSON.stringify(envConfig[k]);
 }
 
-for (const k in envConfig["features"]) {
-  userFeatures[k] = JSON.stringify(envConfig["features"][k]);
-}
-
 const NODE_ENV = process.env.NODE_ENV;
 if (!NODE_ENV) {
   throw new Error(
@@ -115,7 +110,6 @@ function getClientEnvironment(publicUrl) {
       },
       {
         ...userConfig,
-        features: userFeatures,
       }
     ),
   };

config/jest/cssTransform.js

@@ -1,14 +1,14 @@
-'use strict';
+"use strict";
 
 // This is a custom Jest transformer turning style imports into empty objects.
 // http://facebook.github.io/jest/docs/en/webpack.html
 
 module.exports = {
   process() {
-    return 'module.exports = {};';
+    return "module.exports = {};";
   },
   getCacheKey() {
     // The output is always the same.
-    return 'cssTransform';
+    return "cssTransform";
   },
 };

config/jest/fileTransform.js

@@ -1,7 +1,7 @@
-'use strict';
+"use strict";
 
-const path = require('path');
-const camelcase = require('camelcase');
+const path = require("path");
+const camelcase = require("camelcase");
 
 // This is a custom Jest transformer turning file imports into filenames.
 // http://facebook.github.io/jest/docs/en/webpack.html

config/jest/setEnvVars.js

@@ -0,0 +1,2 @@
+const envConfig = require("../../" + process.env.CONFIG);
+process.env = { ...process.env, ...envConfig };

package.json

@@ -5,11 +5,11 @@
   "homepage": "",
   "private": true,
   "scripts": {
-    "react-scripts:start": "node scripts/start.js",
-    "react-scripts:build": "NODE_ENV=production node scripts/build.js",
-    "react-scripts:eject": "node scripts/eject.js",
-    "dev:wsl": "npm run dev -- --host 0.0.0.0",
-    "test": "ava --verbose",
+    "dev": "node scripts/start.js",
+    "build": "NODE_ENV=production node scripts/build.js",
+    "dev:wsl": "HOST=0.0.0.0 npm run dev",
+    "test": "node scripts/test.js --silent",
+    "test:ava": "NODE_ENV=production ava --verbose",
     "test-watch": "ava --watch",
     "lint:fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\""
   },
@@ -18,6 +18,8 @@
     "@forensic-architecture/design-system": "0.6.2",
     "@pmmmwh/react-refresh-webpack-plugin": "0.4.2",
     "@svgr/webpack": "5.4.0",
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^11.2.2",
     "@typescript-eslint/eslint-plugin": "^4.5.0",
     "@typescript-eslint/parser": "^4.5.0",
     "babel-eslint": "^10.1.0",
@@ -142,13 +144,16 @@
     "setupFiles": [
       "react-app-polyfill/jsdom"
     ],
-    "setupFilesAfterEnv": [],
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/setupTests.js",
+      "<rootDir>/config/jest/setEnvVars.js"
+    ],
     "testMatch": [
       "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
       "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
     ],
     "testEnvironment": "jsdom",
-    "testRunner": "/Users/zac/Developer/Forensic Architecture/timemap/node_modules/jest-circus/runner.js",
+    "testRunner": "<rootDir>/node_modules/jest-circus/runner.js",
     "transform": {
       "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",

src/common/utilities.js

@@ -5,7 +5,6 @@ let { DATE_FMT, TIME_FMT } = process.env;
 if (!DATE_FMT) DATE_FMT = "MM/DD/YYYY";
 if (!TIME_FMT) TIME_FMT = "HH:mm";
 
-console.log(process.env);
 export const language = process.env.store.app.language || "en-US";
 
 export function calcDatetime(date, time) {

src/components/CardStack.jsx

@@ -1,11 +1,10 @@
 import React from "react";
 import { connect } from "react-redux";
-import { generateCardLayout } from "@forensic-architecture/design-system/react";
+import { Card, generateCardLayout } from "@forensic-architecture/design-system";
 
 import * as selectors from "../selectors";
 import { getFilterIdxFromColorSet } from "../common/utilities";
 // import Card from './Card.jsx'
-import { Card } from "@forensic-architecture/design-system/react";
 import copy from "../common/data/copy.json";
 
 class CardStack extends React.Component {

src/setupTests.js

@@ -0,0 +1,11 @@
+// Add globals here
+// ---
+// In the example below we're providing no-ops for the logging functions
+
+// global.console = {
+//   log: jest.fn(),
+//   error: jest.fn(),
+//   warn: jest.fn(),
+//   info: jest.fn(),
+//   debug: jest.fn(),
+// };

src/test/App.test.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { Provider } from "react-redux";
+
+import store from "../store/";
+import App from "../components/App";
+
+it("renders an option to view categories", () => {
+  render(
+    <Provider store={store}>
+      <App />
+    </Provider>
+  );
+  expect(screen.getByText("Categories")).toBeInTheDocument();
+});