Chore/setup testing environment (#755)

* chore: setup environment for unit tests

* fix: remove extra character from json

.eslintrc

@@ -11,7 +11,7 @@
   "parserOptions": {
     "project": "./app/assets/javascripts/tsconfig.json"
   },
-  "ignorePatterns": [".eslintrc.js", "webpack.*.js", "webpack-defaults.js"],
+  "ignorePatterns": [".eslintrc.js", "webpack.*.js", "webpack-defaults.js", "jest.config.js"],
   "rules": {
     "standard/no-callback-literal": 0, // Disable this as we have too many callbacks relying on literals
     "no-throw-literal": 0,

app/assets/javascripts/components/ComponentView/index.tsx

@@ -45,7 +45,7 @@ export const ComponentView: FunctionalComponent<IProps> = observer(
     const [isIssueOnLoading, setIsIssueOnLoading] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     const [isReloading, setIsReloading] = useState(false);
-    const [loadTimeout, setLoadTimeout] = useState<number | undefined>(undefined);
+    const [loadTimeout, setLoadTimeout] = useState<ReturnType<typeof setTimeout> | undefined>(undefined);
     const [featureStatus, setFeatureStatus] = useState<FeatureStatus | undefined>(FeatureStatus.Entitled);
     const [isComponentValid, setIsComponentValid] = useState(true);
     const [error, setError] = useState<'offline-restricted' | 'url-missing' | undefined>(undefined);
@@ -158,7 +158,7 @@ export const ComponentView: FunctionalComponent<IProps> = observer(
         } catch (e) {
         }
       }
-      clearTimeout(loadTimeout);
+      loadTimeout && clearTimeout(loadTimeout);
       await application.componentManager.registerComponentWindow(
         component,
         iframe.contentWindow!

app/assets/javascripts/jest.config.js

@@ -0,0 +1,28 @@
+const pathsToModuleNameMapper = require('ts-jest/utils').pathsToModuleNameMapper;
+const tsConfig = require('./tsconfig.json');
+
+const pathsFromTsconfig = tsConfig.compilerOptions.paths;
+
+module.exports = {
+  clearMocks: true,
+  moduleNameMapper: {
+    ...pathsToModuleNameMapper(pathsFromTsconfig, {
+      prefix: '<rootDir>',
+    }),
+    '^react$': ['preact/compat'],
+    '^react-dom$': 'preact',
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+  },
+  globals: {
+    window: {},
+    __VERSION__: '1.0.0',
+    __DESKTOP__: false,
+    __WEB__: true,
+    self: {}, // fixes error happening on `import { SKAlert } from 'sn-stylekit'`
+  },
+  transform: {
+    '\\.(pug)$': '../../../node_modules/jest-transform-pug',
+    '^.+\\.(ts|tsx)?$': 'ts-jest',
+    '\\.svg$': 'svg-jest',
+  },
+};

app/assets/javascripts/tsconfig.json

@@ -8,6 +8,7 @@
     "strict": true,
     "isolatedModules": false,
     "esModuleInterop": true,
+    "resolveJsonModule": true,
     "declaration": true,
     "newLine": "lf",
     "declarationDir": "../../../dist/@types",
@@ -15,13 +16,14 @@
     "jsx": "react-jsx",
     "jsxImportSource": "preact",
     "typeRoots": ["./@types"],
+    "types": ["@types/jest"],
     "paths": {
       "%/*": ["../templates/*"],
       "@/*": ["./*"],
       "@Controllers/*": ["./controllers/*"],
       "@Views/*": ["./views/*"],
       "@Services/*": ["./services/*"],
-      "@node_modules/*": ["../../../node_modules/*"],
+      "@node_modules/*": ["../../../node_modules/*"]
     }
   }
 }

package.json

@@ -16,7 +16,8 @@
     "bundle:desktop:beta": "webpack --config webpack.prod.js --env platform='desktop' --env public_beta='true'",
     "build": "bundle install && yarn install --frozen-lockfile && bundle exec rails assets:precompile && yarn bundle",
     "lint": "eslint --fix app/assets/javascripts",
-    "tsc": "tsc --project app/assets/javascripts/tsconfig.json"
+    "tsc": "tsc --project app/assets/javascripts/tsconfig.json",
+    "test": "jest --config app/assets/javascripts/jest.config.js"
   },
   "devDependencies": {
     "@babel/core": "^7.15.8",
@@ -27,6 +28,7 @@
     "@reach/visually-hidden": "^0.16.0",
     "@svgr/webpack": "^5.5.0",
     "@types/angular": "^1.8.3",
+    "@types/jest": "^27.0.3",
     "@types/lodash": "^4.14.176",
     "@types/pug": "^2.0.5",
     "@types/react": "^17.0.31",
@@ -46,15 +48,21 @@
     "eslint-plugin-react-hooks": "^4.2.1-beta-149b420f6-20211119",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.4.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^27.3.1",
+    "jest-transform-pug": "^0.1.0",
     "lodash": "^4.17.21",
     "mini-css-extract-plugin": "^2.4.3",
     "ng-cache-loader": "0.0.26",
     "node-sass": "^6.0.1",
     "pug": "^3.0.2",
+    "pug-jest": "^1.0.1",
     "pug-loader": "^2.4.0",
     "sass-loader": "^12.2.0",
     "serve-static": "^1.14.1",
     "sn-stylekit": "5.2.15",
+    "svg-jest": "^1.0.1",
+    "ts-jest": "^27.0.7",
     "ts-loader": "^9.2.6",
     "typescript": "4.4.4",
     "typescript-eslint": "0.0.1-alpha.0",
@@ -74,7 +82,7 @@
     "@standardnotes/sncrypto-web": "1.5.3",
     "@standardnotes/snjs": "2.18.2",
     "mobx": "^6.3.5",
-    "mobx-react-lite": "^3.2.1",
+    "mobx-react-lite": "^3.2.2",
     "preact": "^10.5.15",
     "qrcode.react": "^1.0.1"
   }