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();
     });
 });