update jest setup and move config to its own file (#8258)

frontend/test/envSetup.js

@@ -1,104 +0,0 @@
-// used for babel polyfills.
-import "core-js/stable";
-import "regenerator-runtime/runtime";
-
-import nock from "nock";
-
-// for testing-library utils
-import "@testing-library/jest-dom";
-
-// Uncomment for verbose unhandled promise rejection warnings
-// process.on('unhandledRejection', (reason) => {
-//   console.error('REJECTION', reason);
-// });
-
-nock.disableNetConnect();
-
-nock.emitter.on("no match", (req) => {
-  console.log("NOCK NO MATCH ", req);
-});
-
-// nock.emitter.on('request', (req, interceptor) => {
-//   console.error('interceptor matched request: ', req, interceptor)
-// });
-// nock.emitter.on('replied', (req, interceptor) => {
-//   console.error('response replied with nocked payload', req, interceptor)
-// });
-
-// Many tests will output unhandled promise rejection warnings if this is not
-// included to mock the common HTTP request.
-
-nock("http://localhost:8080")
-  .persist()
-  .post("/api/latest/fleet/targets")
-  .reply(200, {
-    targets_count: 1234,
-    targets: [
-      {
-        id: 3,
-        label: "OS X El Capitan 10.11",
-        name: "osx-10.11",
-        platform: "darwin",
-        target_type: "hosts",
-      },
-    ],
-  });
-
-nock("http://localhost:8080")
-  .persist()
-  .get("/api/latest/fleet/status/live_query")
-  .reply(200, {});
-
-nock("http://localhost:8080")
-  .persist()
-  .get("/api/latest/fleet/version")
-  .reply(200, {
-    version: "3.10.0",
-    branch: "master",
-    revision: "83d608962af583375bc20c644c5ac4b00b408461",
-    go_version: "go1.16.2",
-    build_date: "2021-03-31T20:05:51Z",
-    build_user: "zwass",
-  });
-
-global.document.queryCommandEnabled = jest.fn();
-global.document.execCommand = jest.fn();
-global.window.getSelection = () => {
-  return {
-    removeAllRanges: () => {
-      return true;
-    },
-  };
-};
-global.window.scrollTo = jest.fn();
-global.window.URL = new URL("http://localhost:8080");
-global.navigator = global.window.navigator;
-window.URL.createObjectURL = () => undefined;
-
-function mockStorage() {
-  let storage = {};
-
-  return {
-    setItem(key, value = "") {
-      storage[key] = value;
-    },
-    getItem(key) {
-      return storage[key];
-    },
-    removeItem(key) {
-      delete storage[key];
-    },
-    get length() {
-      return Object.keys(storage).length;
-    },
-    key(i) {
-      return Object.keys(storage)[i] || null;
-    },
-    clear() {
-      storage = {};
-    },
-  };
-}
-
-global.localStorage = mockStorage();
-window.localStorage = global.localStorage;

frontend/test/jest.config.ts

@@ -0,0 +1,20 @@
+import type { Config } from "jest";
+
+const config: Config = {
+  rootDir: "../",
+  moduleDirectories: ["node_modules", "frontend"],
+  testEnvironment: "jsdom",
+  moduleNameMapper: {
+    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+      "<rootDir>/__mocks__/fileMock.js",
+    "\\.(css|scss|sass)$": "identity-obj-proxy",
+  },
+  testMatch: ["**/*tests.[jt]s?(x)"],
+  setupFilesAfterEnv: ["<rootDir>/test/test-setup.ts"],
+  clearMocks: true,
+  testEnvironmentOptions: {
+    url: "http://localhost:8080",
+  },
+};
+
+export default config;

frontend/test/test-setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

frontend/utilities/copy_text.ts

@@ -1,33 +1,4 @@
 // @ts-nocheck - may need to be reworked
-import select from "select";
-
-const removeSelectedText = () => {
-  return global.window.getSelection().removeAllRanges();
-};
-
-export const copyText = (elementSelector: string) => {
-  const { document } = global;
-
-  const element = document.querySelector(elementSelector);
-  const input = element.querySelector("input");
-  input.type = "text";
-  input.disabled = false;
-
-  select(input);
-
-  const canCopy = document.queryCommandEnabled("copy");
-
-  if (!canCopy) {
-    return false;
-  }
-
-  document.execCommand("copy");
-  input.type = "password";
-  input.disabled = true;
-  removeSelectedText();
-  return true;
-};
-
 export const stringToClipboard = (string) => {
   const { navigator } = global;
 
@@ -36,5 +7,3 @@ export const stringToClipboard = (string) => {
 
 export const COPY_TEXT_SUCCESS = "Text copied to clipboard";
 export const COPY_TEXT_ERROR = "Text not copied. Please copy manually.";
-
-export default copyText;

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "lint": "eslint frontend cypress --ext .js,.jsx,.ts,.tsx",
     "prettier:check": "prettier --check frontend/**/*.{jsx,js,tsx,ts} ./cypress/**/*.{js,ts}",
-    "test": "jest",
+    "test": "jest --config ./frontend/test/jest.config.ts",
     "e2e-browser": "cypress open",
     "e2e-browser:free": "yarn cypress open --config-file cypress/cypress-free.json",
     "e2e-browser:premium": "yarn cypress open --config-file cypress/cypress-premium.json",
@@ -197,7 +197,8 @@
     "html-webpack-plugin": "4.5.2",
     "identity-obj-proxy": "3.0.0",
     "ignore-styles": "5.0.1",
-    "jest": "26.6.3",
+    "jest": "29.2.0",
+    "jest-environment-jsdom": "29.2.0",
     "jest-environment-jsdom-sixteen": "1.0.3",
     "jsdom": "16.7.0",
     "json-loader": "0.5.7",
@@ -224,27 +225,5 @@
   "browserslist": [
     "defaults"
   ],
-  "jest": {
-    "rootDir": "frontend",
-    "moduleDirectories": [
-      "node_modules",
-      "frontend"
-    ],
-    "moduleNameMapper": {
-      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
-      "\\.(css|scss|sass)$": "identity-obj-proxy"
-    },
-    "testMatch": [
-      "**/*tests.[jt]s?(x)"
-    ],
-    "setupFilesAfterEnv": [
-      "<rootDir>/test/envSetup.js"
-    ],
-    "setupFiles": [
-      "trace-unhandled/register"
-    ],
-    "clearMocks": true,
-    "testURL": "http://localhost:8080"
-  },
   "license": "SEE LICENSE IN ./LICENSE"
 }