chore(tests): Migrate from Enzyme to RTL (1st batch) (#1535)

* chore(tests): First batch of tests conversion * chore(tests): Conver Settings-test to RTL * chore(tests): Convert SliderControl test to RTL * chore(tests): Convert ArchiveExplorer test to RTL * chore(tests): The next batch of tests conversion * chore(tests): Bump types * chore(tests): Apply user-events where possible * chore(tests): Apply suggestions and clean up * chore(tests): Update button focus test
box · Sep 23, 2024 · 9a2ed15 · 9a2ed15
1 parent ea172c1
commit 9a2ed15
Show file tree

Hide file tree

Showing 43 changed files with 2,581 additions and 1,791 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -28,6 +28,12 @@ module.exports = {
                 '@typescript-eslint/no-unused-vars': 'off',
             },
         },
+        {
+            files: ['**/*test.ts', '**/*test.tsx'],
+            rules: {
+                '@typescript-eslint/no-non-null-assertion': 'off',
+            },
+        },
     ],
     parser: '@typescript-eslint/parser',
     rules: {

diff --git a/build/jest/envGlobals.js b/build/jest/envGlobals.js
@@ -1,3 +1,4 @@
+/* eslint-disable max-classes-per-file */
 const i18n = require('../../src/i18n/json/en-US.json');
 const fixture = require('./fixtureLoader');
 const Worker = require('./workerMock');
@@ -13,3 +14,21 @@ global.fixture = fixture;
 global.URL.createObjectURL = () => '';
 global.URL.revokeObjectURL = () => '';
 global.Worker = Worker;
+
+/**
+ * Older versions of JSDOM (<21.1.2) don't support pageX and pageY attributes in MouseEvent which breaks mouse move simulation in unit tests.
+ * Jest v30 comes with JSDOM version 22 which has this issue resolved. After upgrade to Jest v30 this patch can be removed.
+ * More details:  https://github.com/jestjs/jest/pull/13825#issuecomment-1452037295
+ */
+class MouseEventExtended extends MouseEvent {
+    constructor(type, values) {
+        const { pageX, pageY, ...mouseValues } = values;
+        super(type, mouseValues);
+        Object.assign(this, {
+            pageX: pageX || 0,
+            pageY: pageY || 0,
+        });
+    }
+}
+
+global.MouseEventExtended = MouseEventExtended;
diff --git a/build/jest/envWindow.js b/build/jest/envWindow.js
@@ -4,23 +4,6 @@ Object.defineProperty(global.navigator, 'mimeTypes', {
     writable: true,
 });
 
-Object.defineProperty(document, 'createRange', {
-    value: () => ({
-        commonAncestorContainer: {
-            nodeName: 'BODY',
-            ownerDocument: document,
-        },
-        createContextualFragment: fragment => {
-            const el = document.createElement('div');
-            el.innerHTML = fragment;
-            return el.children[0];
-        },
-        selectNode: () => {},
-        setStart: () => {},
-        setEnd: () => {},
-    }),
-});
-
 Object.defineProperty(HTMLElement.prototype, 'offsetParent', {
     get() {
         return this.parentNode;

diff --git a/build/jest/react-intl-mock.js b/build/jest/react-intl-mock.js
@@ -26,3 +26,6 @@ export const injectIntl = Component => {
     WrapperComponent.displayName = Component.displayName || Component.name || 'Component';
     return WrapperComponent;
 };
+
+// eslint-disable-next-line react/prop-types
+export const IntlProvider = ({ children }) => <div>{children}</div>;
diff --git a/jest.config.js b/jest.config.js
@@ -18,6 +18,7 @@ module.exports = {
     restoreMocks: true,
     roots: ['src'],
     setupFiles: [
+        '<rootDir>/src/lib/types/jest-global.d.ts',
         '<rootDir>/build/jest/envGlobals.js',
         '<rootDir>/build/jest/envWindow.js',
         'jest-canvas-mock',

diff --git a/package.json b/package.json
@@ -22,11 +22,15 @@
         "@commitlint/cli": "^8.2.0",
         "@commitlint/config-conventional": "^8.2.0",
         "@commitlint/travis-cli": "^8.2.0",
-        "@testing-library/jest-dom": "^5.11.4",
+        "@testing-library/dom": "^10.4.0",
+        "@testing-library/jest-dom": "^6.5.0",
+        "@testing-library/react": "^12.1.2",
+        "@testing-library/user-event": "^14.5.2",
         "@types/classnames": "^2.2.11",
         "@types/enzyme": "^3.10.8",
+        "@types/jest": "^29.5.13",
         "@types/lodash": "^4.14.149",
-        "@types/react": "^17.0.2",
+        "@types/react": "^17.0.38",
         "@types/react-dom": "^17.0.1",
         "@typescript-eslint/eslint-plugin": "^5.60.1",
         "@typescript-eslint/parser": "^5.60.1",
@@ -44,7 +48,7 @@
         "create-react-class": "^15.6.2",
         "css-loader": "^3.1.0",
         "cypress": "^12.15.0",
-        "enzyme": "^3.10.0",
+        "enzyme": "^3.11.0",
         "eslint": "^8.43.0",
         "eslint-config-airbnb": "^18.0.1",
         "eslint-config-prettier": "^6.7.0",
@@ -153,6 +157,7 @@
     },
     "resolutions": {
         "mojito-rb-gen/merge": "1.2.1",
-        "**/react-intl/**/@types/react": "^17.0.2"
+        "**/react-intl/**/@types/react": "^17.0.2",
+        "cheerio": "1.0.0-rc.12"
     }
 }
diff --git a/src/lib/types/jest-global.d.ts b/src/lib/types/jest-global.d.ts
@@ -0,0 +1,15 @@
+declare global {
+    // eslint-disable-next-line vars-on-top, no-var
+    var MouseEventExtended: {
+        new (
+            type: string,
+            eventInitDict?: MouseEventInit & {
+                pageX?: number;
+                pageY?: number;
+            },
+        ): MouseEvent;
+        prototype: MouseEvent;
+    };
+}
+
+export {};
diff --git a/src/lib/viewers/archive/ArchiveExplorer.js b/src/lib/viewers/archive/ArchiveExplorer.js
@@ -210,7 +210,7 @@ class ArchiveExplorer extends React.Component {
 
         return (
             <Internationalize language={language} messages={elementsMessages}>
-                <div className="bp-ArchiveExplorer" data-resin-feature="archive">
+                <div className="bp-ArchiveExplorer" data-resin-feature="archive" data-testid="bp-archive-explorer">
                     <SearchBar onSearch={this.handleSearch} searchQuery={searchQuery} />
                     <Breadcrumbs
                         filename={filename}