Upgrade to jest 27 (#7699)

* use jest@27.4.0, replace jest-environment-jsdom-sixteen with jest-environment-jsdom

Signed-off-by: Kerry Archibald <kerrya@element.io>

* polyfill setImmediate

Signed-off-by: Kerry Archibald <kerrya@element.io>

* remove done from async test cases

* useRealTimers in test relying on promise flushing

Signed-off-by: Kerry Archibald <kerrya@element.io>

* remove jest environment file

Signed-off-by: Kerry Archibald <kerrya@element.io>

* replace ts-jest mocked with jest utils mocked

Signed-off-by: Kerry Archibald <kerrya@element.io>

__test-utils__/environment.js

@@ -1,17 +0,0 @@
-const BaseEnvironment = require("jest-environment-jsdom-sixteen");
-
-class Environment extends BaseEnvironment {
-    constructor(config, options) {
-        super(Object.assign({}, config, {
-            globals: Object.assign({}, config.globals, {
-                // Explicitly specify the correct globals to workaround Jest bug
-                // https://github.com/facebook/jest/issues/7780
-                Uint32Array: Uint32Array,
-                Uint8Array: Uint8Array,
-                ArrayBuffer: ArrayBuffer,
-            }),
-        }), options);
-    }
-}
-
-module.exports = Environment;

package.json

@@ -176,9 +176,9 @@
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "glob": "^7.1.6",
-    "jest": "^26.6.3",
+    "jest": "^27.4.0",
     "jest-canvas-mock": "^2.3.0",
-    "jest-environment-jsdom-sixteen": "^1.0.3",
+    "jest-environment-jsdom": "^27.0.6",
     "jest-fetch-mock": "^3.0.3",
     "jest-raw-loader": "^1.0.1",
     "matrix-mock-request": "^1.2.3",
@@ -191,7 +191,6 @@
     "stylelint": "^13.9.0",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-scss": "^3.18.0",
-    "ts-jest": "^27.1.3",
     "typescript": "4.5.3",
     "walk": "^2.3.14"
   },
@@ -202,7 +201,7 @@
     "snapshotSerializers": [
       "enzyme-to-json/serializer"
     ],
-    "testEnvironment": "./__test-utils__/environment.js",
+    "testEnvironment": "jsdom",
     "testMatch": [
       "<rootDir>/test/**/*-test.[jt]s?(x)"
     ],

test/components/views/dialogs/AccessSecretStorageDialog-test.js

@@ -59,7 +59,7 @@ describe("AccessSecretStorageDialog", function() {
         expect(recoveryKeyValid).toBe(true);
     });
 
-    it("Notifies the user if they input an invalid Security Key", async function(done) {
+    it("Notifies the user if they input an invalid Security Key", async function() {
         const testInstance = TestRenderer.create(
             <AccessSecretStorageDialog
                 checkPrivateKey={async () => false}
@@ -82,10 +82,9 @@ describe("AccessSecretStorageDialog", function() {
                 "mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid",
         });
         expect(notification.props.children).toEqual("Invalid Security Key");
-        done();
     });
 
-    it("Notifies the user if they input an invalid passphrase", async function(done) {
+    it("Notifies the user if they input an invalid passphrase", async function() {
         const testInstance = TestRenderer.create(
             <AccessSecretStorageDialog
                 checkPrivateKey={() => false}
@@ -109,6 +108,5 @@ describe("AccessSecretStorageDialog", function() {
         expect(notification.props.children).toEqual(
             ["\uD83D\uDC4E ", "Unable to access secret storage. Please verify that you " +
                 "entered the correct Security Phrase."]);
-        done();
     });
 });

test/components/views/dialogs/ExportDialog-test.tsx

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import { mount } from 'enzyme';
-import { mocked } from 'ts-jest/utils';
+import { mocked } from 'jest-mock';
 import '../../../skinned-sdk';
 import { act } from "react-dom/test-utils";
 import { Room } from 'matrix-js-sdk';

test/components/views/rooms/RoomPreviewBar-test.tsx

@@ -35,7 +35,7 @@ jest.mock('../../../../src/IdentityAuthClient', () => {
     });
 });
 
-jest.useFakeTimers();
+jest.useRealTimers();
 
 const createRoom = (roomId: string, userId: string): Room => {
     const newRoom = new Room(

test/components/views/settings/Notifications-test.tsx

@@ -19,7 +19,6 @@ import { IPushRule, IPushRules, RuleId } from 'matrix-js-sdk';
 import { ThreepidMedium } from 'matrix-js-sdk/src/@types/threepids';
 import { act } from 'react-dom/test-utils';
 
-import { createTestClient } from '../../../test-utils';
 import Notifications from '../../../../src/components/views/settings/Notifications';
 import SettingsStore from "../../../../src/settings/SettingsStore";
 import { MatrixClientPeg } from '../../../../src/MatrixClientPeg';
@@ -34,7 +33,7 @@ jest.mock('../../../../src/settings/SettingsStore', () => ({
 // don't pollute test output with error logs from mock rejections
 jest.mock("matrix-js-sdk/src/logger");
 
-jest.useFakeTimers();
+jest.useRealTimers();
 
 const masterRule = {
     actions: ["dont_notify"],
@@ -52,7 +51,7 @@ const encryptedGroupRule = { "conditions": [{ "kind": "event_match", "key": "typ
 // eslint-disable-next-line max-len
 const pushRules: IPushRules = { "global": { "underride": [{ "conditions": [{ "kind": "event_match", "key": "type", "pattern": "m.call.invite" }], "actions": ["notify", { "set_tweak": "sound", "value": "ring" }, { "set_tweak": "highlight", "value": false }], "rule_id": ".m.rule.call", "default": true, "enabled": true }, oneToOneRule, encryptedOneToOneRule, { "conditions": [{ "kind": "event_match", "key": "type", "pattern": "m.room.message" }], "actions": ["notify", { "set_tweak": "sound", "value": "default" }, { "set_tweak": "highlight", "value": false }], "rule_id": ".m.rule.message", "default": true, "enabled": true }, encryptedGroupRule, { "conditions": [{ "kind": "event_match", "key": "type", "pattern": "im.vector.modular.widgets" }, { "kind": "event_match", "key": "content.type", "pattern": "jitsi" }, { "kind": "event_match", "key": "state_key", "pattern": "*" }], "actions": ["notify", { "set_tweak": "highlight", "value": false }], "rule_id": ".im.vector.jitsi", "default": true, "enabled": true }], "sender": [], "room": [{ "actions": ["dont_notify"], "rule_id": "!zJPyWqpMorfCcWObge:matrix.org", "default": false, "enabled": true }], "content": [{ "actions": ["notify", { "set_tweak": "highlight", "value": false }], "pattern": "banana", "rule_id": "banana", "default": false, "enabled": true }, { "actions": ["notify", { "set_tweak": "sound", "value": "default" }, { "set_tweak": "highlight" }], "pattern": "kadev1", "rule_id": ".m.rule.contains_user_name", "default": true, "enabled": true }], "override": [{ "conditions": [], "actions": ["dont_notify"], "rule_id": ".m.rule.master", "default": true, "enabled": false }, { "conditions": [{ "kind": "event_match", "key": "content.msgtype", "pattern": "m.notice" }], "actions": ["dont_notify"], "rule_id": ".m.rule.suppress_notices", "default": true, "enabled": true }, { "conditions": [{ "kind": "event_match", "key": "type", "pattern": "m.room.member" }, { "kind": "event_match", "key": "content.membership", "pattern": "invite" }, { "kind": "event_match", "key": "state_key", "pattern": "@kadev1:matrix.org" }], "actions": ["notify", { "set_tweak": "sound", "value": "default" }, { "set_tweak": "highlight", "value": false }], "rule_id": ".m.rule.invite_for_me", "default": true, "enabled": true }, { "conditions": [{ "kind": "event_match", "key": "type", "pattern": "m.room.member" }], "actions": ["dont_notify"], "rule_id": ".m.rule.member_event", "default": true, "enabled": true }, { "conditions": [{ "kind": "contains_display_name" }], "actions": ["notify", { "set_tweak": "sound", "value": "default" }, { "set_tweak": "highlight" }], "rule_id": ".m.rule.contains_display_name", "default": true, "enabled": true }, { "conditions": [{ "kind": "event_match", "key": "content.body", "pattern": "@room" }, { "kind": "sender_notification_permission", "key": "room" }], "actions": ["notify", { "set_tweak": "highlight", "value": true }], "rule_id": ".m.rule.roomnotif", "default": true, "enabled": true }, { "conditions": [{ "kind": "event_match", "key": "type", "pattern": "m.room.tombstone" }, { "kind": "event_match", "key": "state_key", "pattern": "" }], "actions": ["notify", { "set_tweak": "highlight", "value": true }], "rule_id": ".m.rule.tombstone", "default": true, "enabled": true }, { "conditions": [{ "kind": "event_match", "key": "type", "pattern": "m.reaction" }], "actions": ["dont_notify"], "rule_id": ".m.rule.reaction", "default": true, "enabled": true }] }, "device": {} } as IPushRules;
 
-const flushPromises = async () => await new Promise(process.nextTick);
+const flushPromises = async () => await new Promise(resolve => setTimeout(resolve));
 
 describe('<Notifications />', () => {
     const getComponent = () => mount(<Notifications />);
@@ -65,7 +64,15 @@ describe('<Notifications />', () => {
         return component;
     };
 
-    const mockClient = createTestClient();
+    const mockClient = {
+        getPushRules: jest.fn(),
+        getPushers: jest.fn(),
+        getThreePids: jest.fn(),
+        setPusher: jest.fn(),
+        setPushRuleEnabled: jest.fn(),
+        setPushRuleActions: jest.fn(),
+        getRooms: jest.fn().mockReturnValue([]),
+    };
     mockClient.getPushRules.mockResolvedValue(pushRules);
 
     const findByTestId = (component, id) => component.find(`[data-test-id="${id}"]`);
@@ -90,22 +97,22 @@ describe('<Notifications />', () => {
     });
 
     it('renders error message when fetching push rules fails', async () => {
-        mockClient.getPushRules.mockRejectedValue();
+        mockClient.getPushRules.mockRejectedValue({});
         const component = await getComponentAndWait();
         expect(findByTestId(component, 'error-message').length).toBeTruthy();
     });
     it('renders error message when fetching push rules fails', async () => {
-        mockClient.getPushRules.mockRejectedValue();
+        mockClient.getPushRules.mockRejectedValue({});
         const component = await getComponentAndWait();
         expect(findByTestId(component, 'error-message').length).toBeTruthy();
     });
     it('renders error message when fetching pushers fails', async () => {
-        mockClient.getPushers.mockRejectedValue();
+        mockClient.getPushers.mockRejectedValue({});
         const component = await getComponentAndWait();
         expect(findByTestId(component, 'error-message').length).toBeTruthy();
     });
     it('renders error message when fetching threepids fails', async () => {
-        mockClient.getThreePids.mockRejectedValue();
+        mockClient.getThreePids.mockRejectedValue({});
         const component = await getComponentAndWait();
         expect(findByTestId(component, 'error-message').length).toBeTruthy();
     });
@@ -180,7 +187,7 @@ describe('<Notifications />', () => {
             });
 
             it('displays error when pusher update fails', async () => {
-                mockClient.setPusher.mockRejectedValue();
+                mockClient.setPusher.mockRejectedValue({});
                 const component = await getComponentAndWait();
 
                 const emailToggle = findByTestId(component, 'notif-email-switch')

test/createRoom-test.js

@@ -53,21 +53,19 @@ describe("canEncryptToAllUsers", () => {
         "@badUser:localhost": {},
     };
 
-    it("returns true if all devices have crypto", async (done) => {
+    it("returns true if all devices have crypto", async () => {
         const client = {
             downloadKeys: async function(userIds) { return trueUser; },
         };
         const response = await canEncryptToAllUsers(client, ["@goodUser:localhost"]);
         expect(response).toBe(true);
-        done();
     });
 
-    it("returns false if not all users have crypto", async (done) => {
+    it("returns false if not all users have crypto", async () => {
         const client = {
             downloadKeys: async function(userIds) { return { ...trueUser, ...falseUser }; },
         };
         const response = await canEncryptToAllUsers(client, ["@goodUser:localhost", "@badUser:localhost"]);
         expect(response).toBe(false);
-        done();
     });
 });

test/setupTests.js

@@ -9,6 +9,10 @@ languageHandler.setMissingEntryGenerator(key => key.split("|", 2)[1]);
 
 require('jest-fetch-mock').enableMocks();
 
+// jest 27 removes setImmediate from jsdom
+// polyfill until setImmediate use in client can be removed
+global.setImmediate = callback => setTimeout(callback, 0);
+
 // polyfilling TextEncoder as it is not available on JSDOM
 // view https://github.com/facebook/jest/issues/9983
 global.TextEncoder = TextEncoder;

test/utils/MegolmExportEncryption-test.js

@@ -117,10 +117,9 @@ cissyYBxjsfsAn
         });
 
         // TODO find a subtlecrypto shim which doesn't break this test
-        it.skip('should decrypt a range of inputs', function(done) {
+        it.skip('should decrypt a range of inputs', function() {
             function next(i) {
                 if (i >= TEST_VECTORS.length) {
-                    done();
                     return;
                 }
 
@@ -132,12 +131,12 @@ cissyYBxjsfsAn
                     return next(i+1);
                 });
             }
-            return next(0).catch(done);
+            return next(0);
         });
     });
 
     describe('encrypt', function() {
-        it('should round-trip', function(done) {
+        it('should round-trip', function() {
             const input =
                   'words words many words in plain text here'.repeat(100);
 
@@ -151,8 +150,7 @@ cissyYBxjsfsAn
                 );
             }).then((plaintext) => {
                 expect(plaintext).toEqual(input);
-                done();
+            });
-            }).catch(done);
         });
     });
 });