AKR:OTR:VKT:YKI:SHARED(Frontend) OPHAKRKEH-515 jest migration test fixes

jrkkp · jrkkp · commit fdb2e6d3e61a · 2023-11-09T12:30:28.000+02:00
diff --git a/frontend/package.json b/frontend/package.json
@@ -90,8 +90,9 @@
     "git-revision-webpack-plugin": "^5.0.0",
     "html-webpack-plugin": "^5.5.3",
     "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "mini-css-extract-plugin": "^2.7.6",
-    "msw": "^2.0.3",
+    "msw": "^2.0.4",
     "postcss": "^8.4.31",
     "prettier": "^3.0.3",
     "react-test-renderer": "^18.2.0",
diff --git a/frontend/packages/akr/jest-environment-patched-jsdom.js b/frontend/packages/akr/jest-environment-patched-jsdom.js
@@ -0,0 +1,13 @@
+// test.environment.js
+
+const JSDOMEnvironment = require("jest-environment-jsdom").default;
+
+module.exports = class CustomTestEnvironment extends JSDOMEnvironment {
+    async setup() {
+        await super.setup();
+        this.global.TextEncoder = TextEncoder;
+        this.global.TextDecoder = TextDecoder;
+        this.global.Response = Response;
+        this.global.Request = Request;
+    }
+};
diff --git a/frontend/packages/akr/jest.config.json b/frontend/packages/akr/jest.config.json
@@ -14,10 +14,13 @@
   "setupFilesAfterEnv": [
     "./jest-setup.ts"
   ],
-  "testEnvironment": "jsdom",
+  "testEnvironment": "./jest-environment-patched-jsdom.js",
   "testPathIgnorePatterns": [
     "./src/tests/cypress"
   ],
+  "testEnvironmentOptions": {
+    "customExportConditions": [""]
+  },
   "transform": {
     "^.+\\.(ts|tsx)$": "babel-jest"
   },
diff --git a/frontend/packages/akr/src/tests/jest/components/layouts/__snapshots__/Header.test.tsx.snap b/frontend/packages/akr/src/tests/jest/components/layouts/__snapshots__/Header.test.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Header should render Header correctly 1`] = `
-Array [
+[
   <a
-    className="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways skip-link css-tvmhkj-MuiTypography-root-MuiLink-root"
+    className="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways skip-link css-1vrl3mg-MuiTypography-root-MuiLink-root"
     href="#main-content"
     onBlur={[Function]}
     onFocus={[Function]}
diff --git a/frontend/packages/otr/jest-environment-patched-jsdom.js b/frontend/packages/otr/jest-environment-patched-jsdom.js
@@ -0,0 +1,13 @@
+// test.environment.js
+
+const JSDOMEnvironment = require("jest-environment-jsdom").default;
+
+module.exports = class CustomTestEnvironment extends JSDOMEnvironment {
+    async setup() {
+        await super.setup();
+        this.global.TextEncoder = TextEncoder;
+        this.global.TextDecoder = TextDecoder;
+        this.global.Response = Response;
+        this.global.Request = Request;
+    }
+};
diff --git a/frontend/packages/otr/jest.config.json b/frontend/packages/otr/jest.config.json
@@ -15,10 +15,13 @@
   "setupFilesAfterEnv": [
     "./jest-setup.ts"
   ],
-  "testEnvironment": "jsdom",
+  "testEnvironment": "./jest-environment-patched-jsdom.js",
   "testPathIgnorePatterns": [
     "./src/tests/cypress"
   ],
+  "testEnvironmentOptions": {
+    "customExportConditions": [""]
+  },
   "testTimeout": 10000,
   "transform": {
     "^.+\\.(ts|tsx)$": "babel-jest"
diff --git a/frontend/packages/otr/src/tests/jest/pages/PublicHomePage.test.tsx b/frontend/packages/otr/src/tests/jest/pages/PublicHomePage.test.tsx
@@ -1,5 +1,5 @@
 import { screen } from '@testing-library/dom';
-import { act } from '@testing-library/react';
+import { waitFor } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 
 import { PublicHomePage } from 'pages/PublicHomePage';
@@ -8,9 +8,9 @@ import { publicInterpreters10 } from 'tests/msw/fixtures/publicInterpreters10';
 
 describe('PublicHomePage', () => {
   it('should show number of loaded interpreters in the search button', async () => {
-    await act(async () => {
-      render(<PublicHomePage />);
-    });
+    await waitFor(() =>
+      render(<PublicHomePage />)
+    );
     const searchBtnEl = await screen.findByRole('button', {
       name: `buttons.search (${publicInterpreters10.length})`,
     });
@@ -19,53 +19,52 @@ describe('PublicHomePage', () => {
   });
 
   it('should filter data based on active filters', async () => {
-    await act(async () => {
-      render(<PublicHomePage />);
-    });
+    await waitFor(() =>
+      render(<PublicHomePage />)
+    );
 
     // Check initial number of interpreters
     expect(
       await screen.findByTestId('public-interpreter-filters__search-btn'),
     ).toHaveTextContent('10');
 
-    // Select to field
-    await act(async () => {
-      await userEvent.click(
-        await screen.findByRole('combobox', {
+    const comboBox = await screen.findByRole('combobox', {
           name: 'languagePair.toPlaceholder',
-        }),
-      );
-    });
-    await act(async () => {
-      await userEvent.click(screen.getByRole('option', { name: /DA/ }));
+        });
+    // Select to field
+    await waitFor(() =>
+      userEvent.click(
+        comboBox,
+      )
+    );
+    const optionDA = await screen.getByRole('option', { name: /DA/ });
+    await waitFor(() => {
+      userEvent.click(optionDA)
     });
     expect(
       await screen.findByTestId('public-interpreter-filters__search-btn'),
     ).toHaveTextContent('4');
 
     // Select the region
-    await act(async () => {
-      await userEvent.click(
+    await waitFor(() =>
+      userEvent.click(
         screen.getByRole('combobox', {
           name: 'region.placeholder',
         }),
-      );
-    });
-    await act(async () => {
-      await userEvent.click(screen.getByRole('option', { name: /05/ }));
-    });
+      )
+    );
+    const option05 = await screen.getByRole('option', { name: /05/ });
+    await waitFor(() =>
+      userEvent.click(option05)
+    );
     expect(
       await screen.findByTestId('public-interpreter-filters__search-btn'),
     ).toHaveTextContent('3');
 
+    const input = await screen.getByLabelText('name.placeholder', { selector: 'input' });
     // Type the name
-    await act(async () => {
-      await userEvent.type(
-        screen.getByLabelText('name.placeholder', { selector: 'input' }),
-        'ville',
-        { delay: 300 },
-      );
-    });
+    await userEvent.type(input, 'ville', { delay: 300 });
+
     expect(
       await screen.findByTestId('public-interpreter-filters__search-btn'),
     ).toHaveTextContent('2');
diff --git a/frontend/packages/vkt/jest-environment-patched-jsdom.js b/frontend/packages/vkt/jest-environment-patched-jsdom.js
@@ -0,0 +1,13 @@
+// test.environment.js
+
+const JSDOMEnvironment = require("jest-environment-jsdom").default;
+
+module.exports = class CustomTestEnvironment extends JSDOMEnvironment {
+    async setup() {
+        await super.setup();
+        this.global.TextEncoder = TextEncoder;
+        this.global.TextDecoder = TextDecoder;
+        this.global.Response = Response;
+        this.global.Request = Request;
+    }
+};
diff --git a/frontend/packages/vkt/jest.config.json b/frontend/packages/vkt/jest.config.json
@@ -15,10 +15,13 @@
   "setupFilesAfterEnv": [
     "./jest-setup.ts"
   ],
-  "testEnvironment": "jsdom",
+  "testEnvironment": "./jest-environment-patched-jsdom.js",
   "testPathIgnorePatterns": [
     "./src/tests/cypress"
   ],
+  "testEnvironmentOptions": {
+    "customExportConditions": [""]
+  },
   "testTimeout": 10000,
   "transform": {
     "^.+\\.(ts|tsx)$": "babel-jest"
diff --git a/frontend/packages/vkt/src/tests/jest/components/layouts/__snapshots__/Header.test.tsx.snap b/frontend/packages/vkt/src/tests/jest/components/layouts/__snapshots__/Header.test.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Header should render Header correctly 1`] = `
-Array [
+[
   <a
-    className="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways skip-link css-tvmhkj-MuiTypography-root-MuiLink-root"
+    className="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways skip-link css-1vrl3mg-MuiTypography-root-MuiLink-root"
     href="#main-content"
     onBlur={[Function]}
     onFocus={[Function]}
diff --git a/frontend/packages/yki/jest-environment-patched-jsdom.js b/frontend/packages/yki/jest-environment-patched-jsdom.js
@@ -0,0 +1,13 @@
+// test.environment.js
+
+const JSDOMEnvironment = require("jest-environment-jsdom").default;
+
+module.exports = class CustomTestEnvironment extends JSDOMEnvironment {
+    async setup() {
+        await super.setup();
+        this.global.TextEncoder = TextEncoder;
+        this.global.TextDecoder = TextDecoder;
+        this.global.Response = Response;
+        this.global.Request = Request;
+    }
+};
diff --git a/frontend/packages/yki/jest-setup.ts b/frontend/packages/yki/jest-setup.ts
@@ -8,3 +8,4 @@ beforeAll(() => server.listen());
 afterEach(() => server.resetHandlers());
 
 afterAll(() => server.close());
+
diff --git a/frontend/packages/yki/jest.config.json b/frontend/packages/yki/jest.config.json
@@ -15,10 +15,13 @@
   "setupFilesAfterEnv": [
     "./jest-setup.ts"
   ],
-  "testEnvironment": "jsdom",
+  "testEnvironment": "./jest-environment-patched-jsdom.js",
   "testPathIgnorePatterns": [
     "./src/tests/cypress"
   ],
+  "testEnvironmentOptions": {
+    "customExportConditions": [""]
+  },
   "testTimeout": 10000,
   "transform": {
     "^.+\\.(ts|tsx)$": "babel-jest"
diff --git a/frontend/packages/yki/package.json b/frontend/packages/yki/package.json
@@ -22,7 +22,7 @@
     "yki:stylelint": "yarn g:stylelint --fix \"./src/**/*.scss\"",
     "yki:test:cypress": "TZ=Europe/Helsinki yarn g:cypress run",
     "yki:test:cypress:open": "TZ=Europe/Helsinki yarn g:cypress open",
-    "yki:test:jest": "yarn g:jest",
+    "yki:test:jest": "yarn g:jest --verbose --runInBand --detectOpenHandles --forceExit",
     "yki:tslint": "yarn g:tsc --pretty --noEmit"
   },
   "dependencies": {
diff --git a/frontend/packages/yki/public/mockServiceWorker.js b/frontend/packages/yki/public/mockServiceWorker.js
diff --git a/frontend/packages/yki/src/tests/jest/components/layouts/__snapshots__/Header.test.tsx.snap b/frontend/packages/yki/src/tests/jest/components/layouts/__snapshots__/Header.test.tsx.snap
diff --git a/frontend/packages/yki/src/tests/jest/components/reassessment/__snapshots__/EvaluationOrderPage.test.tsx.snap b/frontend/packages/yki/src/tests/jest/components/reassessment/__snapshots__/EvaluationOrderPage.test.tsx.snap
diff --git a/frontend/packages/yki/src/tests/jest/components/reassessment/__snapshots__/PublicEvaluationPeriodListing.test.tsx.snap b/frontend/packages/yki/src/tests/jest/components/reassessment/__snapshots__/PublicEvaluationPeriodListing.test.tsx.snap
diff --git a/frontend/packages/yki/src/tests/jest/components/registration/examSession/__snapshots__/PublicExamSessionListing.test.tsx.snap b/frontend/packages/yki/src/tests/jest/components/registration/examSession/__snapshots__/PublicExamSessionListing.test.tsx.snap
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
