From 02128ceed3807a7896a9c389561751b15b33e24b Mon Sep 17 00:00:00 2001 From: Zac Ioannidis Date: Mon, 14 Dec 2020 13:30:49 +0000 Subject: [PATCH] Added Jest test suite --- config/env.js | 6 ------ config/jest/cssTransform.js | 6 +++--- config/jest/fileTransform.js | 6 +++--- config/jest/setEnvVars.js | 2 ++ package.json | 19 ++++++++++++------- src/common/utilities.js | 1 - src/components/CardStack.jsx | 3 +-- src/setupTests.js | 11 +++++++++++ src/test/App.test.js | 16 ++++++++++++++++ 9 files changed, 48 insertions(+), 22 deletions(-) create mode 100644 config/jest/setEnvVars.js create mode 100644 src/setupTests.js create mode 100644 src/test/App.test.js diff --git a/config/env.js b/config/env.js index a904b08..60d188b 100644 --- a/config/env.js +++ b/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, } ), }; diff --git a/config/jest/cssTransform.js b/config/jest/cssTransform.js index 8f65114..606cc27 100644 --- a/config/jest/cssTransform.js +++ b/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"; }, }; diff --git a/config/jest/fileTransform.js b/config/jest/fileTransform.js index aab6761..ca3edd0 100644 --- a/config/jest/fileTransform.js +++ b/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 diff --git a/config/jest/setEnvVars.js b/config/jest/setEnvVars.js new file mode 100644 index 0000000..36d31f8 --- /dev/null +++ b/config/jest/setEnvVars.js @@ -0,0 +1,2 @@ +const envConfig = require("../../" + process.env.CONFIG); +process.env = { ...process.env, ...envConfig }; diff --git a/package.json b/package.json index b856094..b60c83b 100644 --- a/package.json +++ b/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": [ + "/src/setupTests.js", + "/config/jest/setEnvVars.js" + ], "testMatch": [ "/src/**/__tests__/**/*.{js,jsx,ts,tsx}", "/src/**/*.{spec,test}.{js,jsx,ts,tsx}" ], "testEnvironment": "jsdom", - "testRunner": "/Users/zac/Developer/Forensic Architecture/timemap/node_modules/jest-circus/runner.js", + "testRunner": "/node_modules/jest-circus/runner.js", "transform": { "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "/node_modules/babel-jest", "^.+\\.css$": "/config/jest/cssTransform.js", diff --git a/src/common/utilities.js b/src/common/utilities.js index b40184a..52516d6 100644 --- a/src/common/utilities.js +++ b/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) { diff --git a/src/components/CardStack.jsx b/src/components/CardStack.jsx index 7f79a5f..1ad79dc 100644 --- a/src/components/CardStack.jsx +++ b/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 { diff --git a/src/setupTests.js b/src/setupTests.js new file mode 100644 index 0000000..3d908b7 --- /dev/null +++ b/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(), +// }; diff --git a/src/test/App.test.js b/src/test/App.test.js new file mode 100644 index 0000000..cbadc95 --- /dev/null +++ b/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( + + + + ); + expect(screen.getByText("Categories")).toBeInTheDocument(); +});