Chore/setup testing environment (#755)

* chore: setup environment for unit tests

* fix: remove extra character from json

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/*"]
     }
   }
 }