Migrate KeyboardShortcut tests from Enzyme to RTL (#9405)

* Migrate tests from Enzyme to RTL

* Fix languageHandler tests

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

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

@@ -16,17 +16,14 @@ limitations under the License.
 */
 
 import React from "react";
-// eslint-disable-next-line deprecate/import
-import { mount, ReactWrapper } from "enzyme";
+import { render } from "@testing-library/react";
 
 import { Key } from "../../../../src/Keyboard";
 import { mockPlatformPeg, unmockPlatformPeg } from "../../../test-utils/platform";
+import { KeyboardKey, KeyboardShortcut } from "../../../../src/components/views/settings/KeyboardShortcut";
 
-const PATH_TO_COMPONENT = "../../../../src/components/views/settings/KeyboardShortcut.tsx";
-
-const renderKeyboardShortcut = async (component, props?): Promise<ReactWrapper> => {
-    const Component = (await import(PATH_TO_COMPONENT))[component];
-    return mount(<Component {...props} />);
+const renderKeyboardShortcut = (Component, props?) => {
+    return render(<Component {...props} />).container;
 };
 
 describe("KeyboardShortcut", () => {
@@ -35,24 +32,24 @@ describe("KeyboardShortcut", () => {
         unmockPlatformPeg();
     });
 
-    it("renders key icon", async () => {
-        const body = await renderKeyboardShortcut("KeyboardKey", { name: Key.ARROW_DOWN });
+    it("renders key icon", () => {
+        const body = renderKeyboardShortcut(KeyboardKey, { name: Key.ARROW_DOWN });
         expect(body).toMatchSnapshot();
     });
 
-    it("renders alternative key name", async () => {
-        const body = await renderKeyboardShortcut("KeyboardKey", { name: Key.PAGE_DOWN });
+    it("renders alternative key name", () => {
+        const body = renderKeyboardShortcut(KeyboardKey, { name: Key.PAGE_DOWN });
         expect(body).toMatchSnapshot();
     });
 
-    it("doesn't render + if last", async () => {
-        const body = await renderKeyboardShortcut("KeyboardKey", { name: Key.A, last: true });
+    it("doesn't render + if last", () => {
+        const body = renderKeyboardShortcut(KeyboardKey, { name: Key.A, last: true });
         expect(body).toMatchSnapshot();
     });
 
-    it("doesn't render same modifier twice", async () => {
+    it("doesn't render same modifier twice", () => {
         mockPlatformPeg({ overrideBrowserShortcuts: jest.fn().mockReturnValue(false) });
-        const body1 = await renderKeyboardShortcut("KeyboardShortcut", {
+        const body1 = renderKeyboardShortcut(KeyboardShortcut, {
             value: {
                 key: Key.A,
                 ctrlOrCmdKey: true,
@@ -61,7 +58,7 @@ describe("KeyboardShortcut", () => {
         });
         expect(body1).toMatchSnapshot();
 
-        const body2 = await renderKeyboardShortcut("KeyboardShortcut", {
+        const body2 = renderKeyboardShortcut(KeyboardShortcut, {
             value: {
                 key: Key.A,
                 ctrlOrCmdKey: true,

test/components/views/settings/__snapshots__/KeyboardShortcut-test.tsx.snap

@@ -1,116 +1,73 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`KeyboardShortcut doesn't render + if last 1`] = `
-<KeyboardKey
-  last={true}
-  name="a"
->
+<div>
   <kbd>
      
     a
      
   </kbd>
-</KeyboardKey>
+</div>
 `;
 
 exports[`KeyboardShortcut doesn't render same modifier twice 1`] = `
-<KeyboardShortcut
-  value={
-    Object {
-      "ctrlOrCmdKey": true,
-      "key": "a",
-      "metaKey": true,
-    }
-  }
->
+<div>
   <div
-    className="mx_KeyboardShortcut"
+    class="mx_KeyboardShortcut"
   >
-    <KeyboardKey
-      key="ctrlOrCmdKey"
-      name="Control"
-    >
-      <kbd>
-         
-        Ctrl
-         
-      </kbd>
-      +
-    </KeyboardKey>
-    <KeyboardKey
-      last={true}
-      name="a"
-    >
-      <kbd>
-         
-        a
-         
-      </kbd>
-    </KeyboardKey>
+    <kbd>
+       
+      Ctrl
+       
+    </kbd>
+    +
+    <kbd>
+       
+      a
+       
+    </kbd>
   </div>
-</KeyboardShortcut>
+</div>
 `;
 
 exports[`KeyboardShortcut doesn't render same modifier twice 2`] = `
-<KeyboardShortcut
-  value={
-    Object {
-      "ctrlKey": true,
-      "ctrlOrCmdKey": true,
-      "key": "a",
-    }
-  }
->
+<div>
   <div
-    className="mx_KeyboardShortcut"
+    class="mx_KeyboardShortcut"
   >
-    <KeyboardKey
-      key="ctrlOrCmdKey"
-      name="Control"
-    >
-      <kbd>
-         
-        Ctrl
-         
-      </kbd>
-      +
-    </KeyboardKey>
-    <KeyboardKey
-      last={true}
-      name="a"
-    >
-      <kbd>
-         
-        a
-         
-      </kbd>
-    </KeyboardKey>
+    <kbd>
+       
+      Ctrl
+       
+    </kbd>
+    +
+    <kbd>
+       
+      a
+       
+    </kbd>
   </div>
-</KeyboardShortcut>
+</div>
 `;
 
 exports[`KeyboardShortcut renders alternative key name 1`] = `
-<KeyboardKey
-  name="PageDown"
->
+<div>
   <kbd>
      
     Page Down
      
   </kbd>
   +
-</KeyboardKey>
+</div>
 `;
 
 exports[`KeyboardShortcut renders key icon 1`] = `
-<KeyboardKey
-  name="ArrowDown"
->
+<div>
   <kbd>
      
     ↓
      
   </kbd>
   +
-</KeyboardKey>
+</div>
 `;

test/components/views/settings/tabs/user/KeyboardUserSettingsTab-test.tsx

@@ -15,15 +15,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { render } from "@testing-library/react";
 import React from "react";
-// eslint-disable-next-line deprecate/import
-import { mount, ReactWrapper } from "enzyme";
 
+import KeyboardUserSettingsTab from
+    "../../../../../../src/components/views/settings/tabs/user/KeyboardUserSettingsTab";
 import { Key } from "../../../../../../src/Keyboard";
+import { mockPlatformPeg } from "../../../../../test-utils/platform";
 
 const PATH_TO_KEYBOARD_SHORTCUTS = "../../../../../../src/accessibility/KeyboardShortcuts";
 const PATH_TO_KEYBOARD_SHORTCUT_UTILS = "../../../../../../src/accessibility/KeyboardShortcutUtils";
-const PATH_TO_COMPONENT = "../../../../../../src/components/views/settings/tabs/user/KeyboardUserSettingsTab";
 
 const mockKeyboardShortcuts = (override) => {
     jest.doMock(PATH_TO_KEYBOARD_SHORTCUTS, () => {
@@ -45,17 +46,17 @@ const mockKeyboardShortcutUtils = (override) => {
     });
 };
 
-const renderKeyboardUserSettingsTab = async (component): Promise<ReactWrapper> => {
-    const Component = (await import(PATH_TO_COMPONENT))[component];
-    return mount(<Component />);
+const renderKeyboardUserSettingsTab = () => {
+    return render(<KeyboardUserSettingsTab />).container;
 };
 
 describe("KeyboardUserSettingsTab", () => {
     beforeEach(() => {
         jest.resetModules();
+        mockPlatformPeg();
     });
 
-    it("renders list of keyboard shortcuts", async () => {
+    it("renders list of keyboard shortcuts", () => {
         mockKeyboardShortcuts({
             "CATEGORIES": {
                 "Composer": {
@@ -101,7 +102,7 @@ describe("KeyboardUserSettingsTab", () => {
             },
         });
 
-        const body = await renderKeyboardUserSettingsTab("default");
+        const body = renderKeyboardUserSettingsTab();
         expect(body).toMatchSnapshot();
     });
 });

test/i18n-test/languageHandler-test.tsx

@@ -100,6 +100,16 @@ describe('languageHandler', function() {
         ],
     ];
 
+    let oldNodeEnv;
+    beforeAll(() => {
+        oldNodeEnv = process.env.NODE_ENV;
+        process.env.NODE_ENV = "test";
+    });
+
+    afterAll(() => {
+        process.env.NODE_ENV = oldNodeEnv;
+    });
+
     describe('when translations exist in language', () => {
         beforeEach(function(done) {
             stubClient();
@@ -115,7 +125,7 @@ describe('languageHandler', function() {
             }).then(done);
         });
 
-        it.each(testCasesEn)("%s", async (_d, translationString, variables, tags, result) => {
+        it.each(testCasesEn)("%s", (_d, translationString, variables, tags, result) => {
             expect(_t(translationString, variables, tags)).toEqual(result);
         });
 
@@ -137,9 +147,9 @@ describe('languageHandler', function() {
     });
 
     describe('for a non-en language', () => {
-        beforeEach(async () => {
+        beforeEach(() => {
             stubClient();
-            await setLanguage('lv');
+            setLanguage('lv');
             // counterpart doesnt expose any way to restore default config
             // missingEntryGenerator is mocked in the root setup file
             // reset to default here
@@ -178,7 +188,7 @@ describe('languageHandler', function() {
                 });
                 it.each(pluralCases)(
                     "%s",
-                    async (_d, translationString, variables, tags, result) => {
+                    (_d, translationString, variables, tags, result) => {
                         expect(_t(translationString, variables, tags)).toEqual(result);
                     },
                 );
@@ -192,7 +202,7 @@ describe('languageHandler', function() {
                 });
                 it.each(pluralCases)(
                     "%s and translates with fallback locale, attributes fallback locale",
-                    async (_d, translationString, variables, tags, result) => {
+                    (_d, translationString, variables, tags, result) => {
                         expect(_tDom(translationString, variables, tags)).toEqual(<span lang="en">{ result }</span>);
                     },
                 );
@@ -203,7 +213,7 @@ describe('languageHandler', function() {
             describe('_t', () => {
                 it.each(testCasesEn)(
                     "%s and translates with fallback locale",
-                    async (_d, translationString, variables, tags, result) => {
+                    (_d, translationString, variables, tags, result) => {
                         expect(_t(translationString, variables, tags)).toEqual(result);
                     },
                 );
@@ -212,7 +222,7 @@ describe('languageHandler', function() {
             describe('_tDom()', () => {
                 it.each(testCasesEn)(
                     "%s and translates with fallback locale, attributes fallback locale",
-                    async (_d, translationString, variables, tags, result) => {
+                    (_d, translationString, variables, tags, result) => {
                         expect(_tDom(translationString, variables, tags)).toEqual(<span lang="en">{ result }</span>);
                     },
                 );
@@ -221,12 +231,12 @@ describe('languageHandler', function() {
     });
 
     describe('when languages dont load', () => {
-        it('_t', async () => {
+        it('_t', () => {
             const STRING_NOT_IN_THE_DICTIONARY = "a string that isn't in the translations dictionary";
             expect(_t(STRING_NOT_IN_THE_DICTIONARY, {}, undefined)).toEqual(STRING_NOT_IN_THE_DICTIONARY);
         });
 
-        it('_tDom', async () => {
+        it('_tDom', () => {
             const STRING_NOT_IN_THE_DICTIONARY = "a string that isn't in the translations dictionary";
             expect(_tDom(STRING_NOT_IN_THE_DICTIONARY, {}, undefined)).toEqual(
                 <span lang="en">{ STRING_NOT_IN_THE_DICTIONARY }</span>);