@khanacademy/wonder-blocks-form 3.1.5 → 3.1.6

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @khanacademy/wonder-blocks-form
 
+## 3.1.6
+
+### Patch Changes
+
+-   Updated dependencies [4c682709]
+    -   @khanacademy/wonder-blocks-clickable@2.4.1
+
 ## 3.1.5
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "3.1.5",
+  "version": "3.1.6",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^2.4.0",
+    "@khanacademy/wonder-blocks-clickable": "^2.4.1",
     "@khanacademy/wonder-blocks-color": "^1.2.0",
     "@khanacademy/wonder-blocks-core": "^4.5.0",
     "@khanacademy/wonder-blocks-icon": "^1.2.32",

package/src/components/__tests__/field-heading.test.js

@@ -1,15 +1,10 @@
 // @flow
 import * as React from "react";
-import {mount} from "enzyme";
-import "jest-enzyme";
+import {render, screen} from "@testing-library/react";
 import {StyleSheet} from "aphrodite";
 
 import {I18nInlineMarkup} from "@khanacademy/wonder-blocks-i18n";
-import {
-    Body,
-    LabelMedium,
-    LabelSmall,
-} from "@khanacademy/wonder-blocks-typography";
+import {Body} from "@khanacademy/wonder-blocks-typography";
 
 import FieldHeading from "../field-heading.js";
 import TextField from "../text-field.js";
@@ -20,7 +15,7 @@ describe("FieldHeading", () => {
         const label = "Label";
 
         // Act
-        const wrapper = mount(
+        render(
             <FieldHeading
                 field={<TextField id="tf-1" value="" onChange={() => {}} />}
                 label={label}
@@ -28,7 +23,7 @@ describe("FieldHeading", () => {
         );
 
         // Assert
-        expect(wrapper).toIncludeText(label);
+        expect(screen.getByText(label)).toBeInTheDocument();
     });
 
     it("fieldheading renders the description text", () => {
@@ -36,7 +31,7 @@ describe("FieldHeading", () => {
         const description = "Description";
 
         // Act
-        const wrapper = mount(
+        render(
             <FieldHeading
                 field={<TextField id="tf-1" value="" onChange={() => {}} />}
                 label="Label"
@@ -45,7 +40,7 @@ describe("FieldHeading", () => {
         );
 
         // Assert
-        expect(wrapper).toIncludeText(description);
+        expect(screen.getByText(description)).toBeInTheDocument();
     });
 
     it("fieldheading renders the error text", () => {
@@ -53,7 +48,7 @@ describe("FieldHeading", () => {
         const error = "Error";
 
         // Act
-        const wrapper = mount(
+        render(
             <FieldHeading
                 field={<TextField id="tf-1" value="" onChange={() => {}} />}
                 label="Label"
@@ -62,7 +57,7 @@ describe("FieldHeading", () => {
         );
 
         // Assert
-        expect(wrapper).toIncludeText(error);
+        expect(screen.getByRole("alert")).toBeInTheDocument();
     });
 
     it("fieldheading adds testId to label", () => {
@@ -70,7 +65,7 @@ describe("FieldHeading", () => {
         const testId = "testid";
 
         // Act
-        const wrapper = mount(
+        render(
             <FieldHeading
                 field={<TextField id="tf-1" value="" onChange={() => {}} />}
                 label="Label"
@@ -79,8 +74,8 @@ describe("FieldHeading", () => {
         );
 
         // Assert
-        const label = wrapper.find(`[data-test-id="${testId}-label"]`);
-        expect(label).toExist();
+        const label = screen.getByTestId(`${testId}-label`);
+        expect(label).toBeInTheDocument();
     });
 
     it("fieldheading adds testId to description", () => {
@@ -88,7 +83,7 @@ describe("FieldHeading", () => {
         const testId = "testid";
 
         // Act
-        const wrapper = mount(
+        render(
             <FieldHeading
                 field={<TextField id="tf-1" value="" onChange={() => {}} />}
                 label="Label"
@@ -98,10 +93,8 @@ describe("FieldHeading", () => {
         );
 
         // Assert
-        const description = wrapper.find(
-            `[data-test-id="${testId}-description"]`,
-        );
-        expect(description).toExist();
+        const description = screen.getByTestId(`${testId}-description`);
+        expect(description).toBeInTheDocument();
     });
 
     it("fieldheading adds testId to error", () => {
@@ -109,7 +102,7 @@ describe("FieldHeading", () => {
         const testId = "testid";
 
         // Act
-        const wrapper = mount(
+        render(
             <FieldHeading
                 field={<TextField id="tf-1" value="" onChange={() => {}} />}
                 label="Label"
@@ -119,8 +112,8 @@ describe("FieldHeading", () => {
         );
 
         // Assert
-        const error = wrapper.find(`[data-test-id="${testId}-error"]`);
-        expect(error).toExist();
+        const error = screen.getByTestId(`${testId}-error`);
+        expect(error).toBeInTheDocument();
     });
 
     it("fieldheading adds the correctly formatted id to label's htmlFor", () => {
@@ -129,7 +122,7 @@ describe("FieldHeading", () => {
         const testId = "testid";
 
         // Act
-        const wrapper = mount(
+        render(
             <FieldHeading
                 field={<TextField id="tf-1" value="" onChange={() => {}} />}
                 label="Label"
@@ -139,8 +132,8 @@ describe("FieldHeading", () => {
         );
 
         // Assert
-        const label = wrapper.find(`[data-test-id="${testId}-label"]`);
-        expect(label).toContainMatchingElement(`[htmlFor="${id}-field"]`);
+        const label = screen.getByTestId(`${testId}-label`);
+        expect(label).toHaveAttribute("for", `${id}-field`);
     });
 
     it("fieldheading adds the correctly formatted id to error's id", () => {
@@ -149,7 +142,7 @@ describe("FieldHeading", () => {
         const testId = "testid";
 
         // Act
-        const wrapper = mount(
+        render(
             <FieldHeading
                 field={<TextField id="tf-1" value="" onChange={() => {}} />}
                 label="Label"
@@ -160,8 +153,8 @@ describe("FieldHeading", () => {
         );
 
         // Assert
-        const error = wrapper.find(`[data-test-id="${testId}-error"]`);
-        expect(error).toContainMatchingElement(`[id="${id}-error"]`);
+        const error = screen.getByRole("alert");
+        expect(error).toHaveAttribute("id", `${id}-error`);
     });
 
     it("stype prop applies to the fieldheading container", () => {
@@ -174,7 +167,7 @@ describe("FieldHeading", () => {
         });
 
         // Act
-        const wrapper = mount(
+        const {container} = render(
             <FieldHeading
                 field={<TextField id="tf-1" value="" onChange={() => {}} />}
                 label="Label"
@@ -184,15 +177,15 @@ describe("FieldHeading", () => {
         );
 
         // Assert
-        const container = wrapper.find("View").at(0);
-        expect(container).toHaveStyle(styles.style1);
+        const fieldHeading = container.childNodes[0];
+        expect(fieldHeading).toHaveStyle("background: blue");
     });
 
-    it("should render a LabelSmall when the 'label' prop is a I18nInlineMarkup", () => {
+    it("should render a LabelMedium when the 'label' prop is a I18nInlineMarkup", () => {
         // Arrange
 
         // Act
-        const wrapper = mount(
+        render(
             <FieldHeading
                 field={<TextField id="tf-1" value="" onChange={() => {}} />}
                 label={<I18nInlineMarkup>Hello, world!</I18nInlineMarkup>}
@@ -200,15 +193,16 @@ describe("FieldHeading", () => {
         );
 
         // Assert
-        const label = wrapper.find(LabelMedium);
-        expect(label).toExist();
+        const label = screen.getByText("Hello, world!");
+        // LabelMedium has a font-size of 16px
+        expect(label).toHaveStyle("font-size: 16px");
     });
 
     it("should render a LabelSmall when the 'description' prop is a I18nInlineMarkup", () => {
         // Arrange
 
         // Act
-        const wrapper = mount(
+        render(
             <FieldHeading
                 field={<TextField id="tf-1" value="" onChange={() => {}} />}
                 label={<Body>Hello, world</Body>}
@@ -217,7 +211,8 @@ describe("FieldHeading", () => {
         );
 
         // Assert
-        const label = wrapper.find(LabelSmall);
-        expect(label).toExist();
+        const description = screen.getByText("description");
+        // LabelSmall has a font-size of 16px
+        expect(description).toHaveStyle("font-size: 14px");
     });
 });

package/src/components/__tests__/labeled-text-field.test.js

@@ -1,54 +1,37 @@
 //@flow
 import * as React from "react";
-import {mount} from "enzyme";
-import "jest-enzyme";
-import {render, screen} from "@testing-library/react";
+import {render, screen, fireEvent} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import {StyleSheet} from "aphrodite";
 import LabeledTextField from "../labeled-text-field.js";
 
-const wait = (delay: number = 0) =>
-    new Promise((resolve, reject) => {
-        // eslint-disable-next-line no-restricted-syntax
-        return setTimeout(resolve, delay);
-    });
-
 describe("LabeledTextField", () => {
     it("labeledtextfield becomes focused", () => {
         // Arrange
-        const wrapper = mount(
-            <LabeledTextField label="Label" value="" onChange={() => {}} />,
-        );
-        const field = wrapper.find("TextFieldInternal");
+        render(<LabeledTextField label="Label" value="" onChange={() => {}} />);
+        const field = screen.getByRole("textbox");
 
         // Act
-        field.simulate("focus");
+        userEvent.tab();
 
         // Assert
-        expect(wrapper.find("LabeledTextFieldInternal")).toHaveState(
-            "focused",
-            true,
-        );
+        expect(field).toHaveFocus();
     });
 
     it("labeledtextfield becomes blurred", async () => {
         // Arrange
-        const wrapper = mount(
-            <LabeledTextField label="Label" value="" onChange={() => {}} />,
-        );
-        const field = wrapper.find("TextFieldInternal");
+        render(<LabeledTextField label="Label" value="" onChange={() => {}} />);
+
+        // focus
+        userEvent.tab();
 
         // Act
-        field.simulate("focus");
-        await wait(0);
-        field.simulate("blur");
+        // blur
+        userEvent.tab();
 
         // Assert
-        expect(wrapper.find("LabeledTextFieldInternal")).toHaveState(
-            "focused",
-            false,
-        );
+        expect(screen.getByRole("textbox")).not.toHaveFocus();
     });
 
     it("id prop is passed to input", () => {
@@ -56,7 +39,7 @@ describe("LabeledTextField", () => {
         const id = "exampleid";
 
         // Act
-        const wrapper = mount(
+        render(
             <LabeledTextField
                 id={id}
                 label="Label"
@@ -67,23 +50,21 @@ describe("LabeledTextField", () => {
         );
 
         // Assert
-        const input = wrapper.find("input");
-        expect(input).toContainMatchingElement(`[id="${id}-field"]`);
+        const input = screen.getByRole("textbox");
+        expect(input).toHaveAttribute("id", `${id}-field`);
     });
 
     it("auto-generated id is passed to input when id prop is not set", () => {
         // Arrange
 
         // Act
-        const wrapper = mount(
-            <LabeledTextField label="Label" value="" onChange={() => {}} />,
-        );
+        render(<LabeledTextField label="Label" value="" onChange={() => {}} />);
 
         // Assert
         // Since the generated id is unique, we cannot know what it will be.
         // We only test if the id attribute starts with "uid-" and ends with "-field".
-        const input = wrapper.find("input");
-        expect(input.props()["id"]).toMatch(/uid-.*-field/);
+        const input = screen.getByRole("textbox");
+        expect(input.getAttribute("id")).toMatch(/uid-.*-field/);
     });
 
     it("type prop is passed to input", () => {
@@ -91,7 +72,7 @@ describe("LabeledTextField", () => {
         const type = "email";
 
         // Act
-        const wrapper = mount(
+        render(
             <LabeledTextField
                 type={type}
                 label="Label"
@@ -101,8 +82,8 @@ describe("LabeledTextField", () => {
         );
 
         // Assert
-        const input = wrapper.find("input");
-        expect(input).toContainMatchingElement(`[type="${type}"]`);
+        const input = screen.getByRole("textbox");
+        expect(input).toHaveAttribute("type", type);
     });
 
     it("label prop is rendered", () => {
@@ -110,12 +91,10 @@ describe("LabeledTextField", () => {
         const label = "Label";
 
         // Act
-        const wrapper = mount(
-            <LabeledTextField label={label} value="" onChange={() => {}} />,
-        );
+        render(<LabeledTextField label={label} value="" onChange={() => {}} />);
 
         // Assert
-        expect(wrapper).toIncludeText(label);
+        expect(screen.getByText(label)).toBeInTheDocument();
     });
 
     it("description prop is rendered", () => {
@@ -123,7 +102,7 @@ describe("LabeledTextField", () => {
         const description = "Description";
 
         // Act
-        const wrapper = mount(
+        render(
             <LabeledTextField
                 label="Label"
                 description={description}
@@ -133,7 +112,7 @@ describe("LabeledTextField", () => {
         );
 
         // Assert
-        expect(wrapper).toIncludeText(description);
+        expect(screen.getByText(description)).toBeInTheDocument();
     });
 
     it("value prop is set on mount", () => {
@@ -141,7 +120,7 @@ describe("LabeledTextField", () => {
         const value = "Value";
 
         // Act
-        const wrapper = mount(
+        render(
             <LabeledTextField
                 label="Label"
                 value={value}
@@ -150,32 +129,38 @@ describe("LabeledTextField", () => {
         );
 
         // Assert
-        const input = wrapper.find("input");
-        expect(input).toHaveValue(value);
+        const input = screen.getByRole("textbox");
+        expect(input).toHaveAttribute("value", value);
     });
 
     it("value prop change from parent reflects on input value", async () => {
         // Arrange
         const handleChange = jest.fn((newValue: string) => {});
 
-        const wrapper = mount(
+        const {rerender} = render(
             <LabeledTextField label="Label" value="" onChange={handleChange} />,
         );
 
         // Act
         const newValue = "new value";
-        wrapper.setProps({value: newValue});
+        rerender(
+            <LabeledTextField
+                label="Label"
+                value={newValue}
+                onChange={handleChange}
+            />,
+        );
 
         // Assert
-        const input = wrapper.find("input");
-        expect(input).toHaveValue(newValue);
+        const input = screen.getByRole("textbox");
+        expect(input).toHaveAttribute("value", newValue);
     });
 
     it("disabled prop disables the input", () => {
         // Arrange
 
         // Act
-        const wrapper = mount(
+        render(
             <LabeledTextField
                 label="Label"
                 value=""
@@ -185,7 +170,7 @@ describe("LabeledTextField", () => {
         );
 
         // Assert
-        const input = wrapper.find("input");
+        const input = screen.getByRole("textbox");
         expect(input).toBeDisabled();
     });
 
@@ -235,7 +220,7 @@ describe("LabeledTextField", () => {
     it("validate prop is called when input changes", () => {
         // Arrange
         const validate = jest.fn((value: string): ?string => {});
-        const wrapper = mount(
+        render(
             <LabeledTextField
                 label="Label"
                 value=""
@@ -246,8 +231,11 @@ describe("LabeledTextField", () => {
 
         // Act
         const newValue = "New Value";
-        const input = wrapper.find("input");
-        input.simulate("change", {target: {value: newValue}});
+        const input = screen.getByRole("textbox");
+        // @see https://testing-library.com/docs/react-testing-library/faq
+        // How do I test input onChange handlers?
+        // eslint-disable-next-line testing-library/prefer-user-event
+        fireEvent.change(input, {target: {value: newValue}});
 
         // Assert
         expect(validate).toHaveBeenCalledWith(newValue);
@@ -264,7 +252,7 @@ describe("LabeledTextField", () => {
             }
         };
 
-        const wrapper = mount(
+        render(
             <LabeledTextField
                 label="Label"
                 value="LongerThan8Chars"
@@ -275,8 +263,8 @@ describe("LabeledTextField", () => {
         );
 
         // Act
-        const input = wrapper.find("input");
-        input.simulate("change", {target: {value: "Short"}});
+        // Select all text and replace it with the new value.
+        userEvent.type(screen.getByRole("textbox"), `{selectall}Short`);
 
         // Assert
         expect(handleValidate).toHaveBeenCalledWith(errorMessage);
@@ -286,14 +274,17 @@ describe("LabeledTextField", () => {
         // Arrange
         const handleChange = jest.fn((newValue: string) => {});
 
-        const wrapper = mount(
+        render(
             <LabeledTextField label="Label" value="" onChange={handleChange} />,
         );
 
         // Act
         const newValue = "new value";
-        const input = wrapper.find("input");
-        input.simulate("change", {target: {value: newValue}});
+        const input = screen.getByRole("textbox");
+        // @see https://testing-library.com/docs/react-testing-library/faq
+        // How do I test input onChange handlers?
+        // eslint-disable-next-line testing-library/prefer-user-event
+        fireEvent.change(input, {target: {value: newValue}});
 
         // Assert
         expect(handleChange).toHaveBeenCalledWith(newValue);
@@ -307,7 +298,7 @@ describe("LabeledTextField", () => {
             },
         );
 
-        const wrapper = mount(
+        render(
             <LabeledTextField
                 label="Label"
                 value=""
@@ -317,18 +308,16 @@ describe("LabeledTextField", () => {
         );
 
         // Act
-        const key = "Enter";
-        const input = wrapper.find("input");
-        input.simulate("keyDown", {key: key});
+        userEvent.type(screen.getByRole("textbox"), "{enter}");
 
         // Assert
-        expect(handleKeyDown).toHaveReturnedWith(key);
+        expect(handleKeyDown).toHaveReturnedWith("Enter");
     });
 
     it("onFocus prop is called when field is focused", () => {
         // Arrange
         const handleFocus = jest.fn(() => {});
-        const wrapper = mount(
+        render(
             <LabeledTextField
                 label="Label"
                 value=""
@@ -338,8 +327,8 @@ describe("LabeledTextField", () => {
         );
 
         // Act
-        const field = wrapper.find("TextFieldInternal");
-        field.simulate("focus");
+        const field = screen.getByRole("textbox");
+        field.focus();
 
         // Assert
         expect(handleFocus).toHaveBeenCalled();
@@ -348,7 +337,7 @@ describe("LabeledTextField", () => {
     it("onBlur prop is called when field is blurred", async () => {
         // Arrange
         const handleBlur = jest.fn(() => {});
-        const wrapper = mount(
+        render(
             <LabeledTextField
                 label="Label"
                 value=""
@@ -357,11 +346,12 @@ describe("LabeledTextField", () => {
             />,
         );
 
+        // focus
+        userEvent.tab();
+
         // Act
-        const field = wrapper.find("TextFieldInternal");
-        field.simulate("focus");
-        await wait(0);
-        field.simulate("blur");
+        // blur
+        userEvent.tab();
 
         // Assert
         expect(handleBlur).toHaveBeenCalled();
@@ -372,7 +362,7 @@ describe("LabeledTextField", () => {
         const placeholder = "Placeholder";
 
         // Act
-        const wrapper = mount(
+        render(
             <LabeledTextField
                 label="Label"
                 value=""
@@ -382,17 +372,15 @@ describe("LabeledTextField", () => {
         );
 
         // Assert
-        const input = wrapper.find("input");
-        expect(input).toContainMatchingElement(
-            `[placeholder="${placeholder}"]`,
-        );
+        const input = screen.getByPlaceholderText(placeholder);
+        expect(input).toBeInTheDocument();
     });
 
     it("light prop is passed to textfield", async () => {
         // Arrange
 
         // Act
-        const wrapper = mount(
+        render(
             <LabeledTextField
                 label="Label"
                 value=""
@@ -401,9 +389,11 @@ describe("LabeledTextField", () => {
             />,
         );
 
+        const textField = screen.getByRole("textbox");
+        textField.focus();
+
         // Assert
-        const textField = wrapper.find("TextFieldInternal");
-        expect(textField).toHaveProp("light", true);
+        expect(textField.getAttribute("class")).toMatch(/light/i);
     });
 
     it("style prop is passed to fieldheading", async () => {
@@ -416,7 +406,7 @@ describe("LabeledTextField", () => {
         });
 
         // Act
-        const wrapper = mount(
+        const {container} = render(
             <LabeledTextField
                 label="Label"
                 value=""
@@ -426,8 +416,8 @@ describe("LabeledTextField", () => {
         );
 
         // Assert
-        const fieldHeading = wrapper.find("FieldHeading");
-        expect(fieldHeading).toHaveStyle(styles.style1);
+        const fieldHeading = container.childNodes[0];
+        expect(fieldHeading).toHaveStyle("min-width: 250px");
     });
 
     it("testId prop is passed to textfield", async () => {
@@ -435,7 +425,7 @@ describe("LabeledTextField", () => {
         const testId = "example-testid";
 
         // Act
-        const wrapper = mount(
+        render(
             <LabeledTextField
                 label="Label"
                 value=""
@@ -445,15 +435,15 @@ describe("LabeledTextField", () => {
         );
 
         // Assert
-        const textField = wrapper.find(`[data-test-id="${testId}-field"]`);
-        expect(textField).toExist();
+        const input = screen.getByRole("textbox");
+        expect(input).toHaveAttribute("data-test-id", `${testId}-field`);
     });
 
     it("readOnly prop is passed to textfield", async () => {
         // Arrange
 
         // Act
-        const wrapper = mount(
+        render(
             <LabeledTextField
                 label="Label"
                 value=""
@@ -463,8 +453,8 @@ describe("LabeledTextField", () => {
         );
 
         // Assert
-        const textField = wrapper.find("TextFieldInternal");
-        expect(textField).toHaveProp("readOnly", true);
+        const input = screen.getByRole("textbox");
+        expect(input).toHaveAttribute("readOnly");
     });
 
     it("autoComplete prop is passed to textfield", async () => {
@@ -472,7 +462,7 @@ describe("LabeledTextField", () => {
         const autoComplete = "name";
 
         // Act
-        const wrapper = mount(
+        render(
             <LabeledTextField
                 label="Label"
                 value=""
@@ -482,8 +472,8 @@ describe("LabeledTextField", () => {
         );
 
         // Assert
-        const textField = wrapper.find("TextFieldInternal");
-        expect(textField).toHaveProp("autoComplete", autoComplete);
+        const input = screen.getByRole("textbox");
+        expect(input).toHaveAttribute("autoComplete", autoComplete);
     });
 });
 

package/src/components/__tests__/text-field.test.js

@@ -1,35 +1,27 @@
 // @flow
 import * as React from "react";
-import {mount} from "enzyme";
-import "jest-enzyme";
+import {fireEvent, render, screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import TextField from "../text-field.js";
 
-const wait = (delay: number = 0) =>
-    new Promise((resolve, reject) => {
-        // eslint-disable-next-line no-restricted-syntax
-        return setTimeout(resolve, delay);
-    });
-
 describe("TextField", () => {
     it("textfield is focused", () => {
         // Arrange
-        const wrapper = mount(
-            <TextField id="tf-1" value="" onChange={() => {}} />,
-        );
+        render(<TextField id="tf-1" value="" onChange={() => {}} />);
 
         // Act
-        wrapper.simulate("focus");
+        userEvent.tab();
 
         // Assert
-        expect(wrapper.find("TextFieldInternal")).toHaveState("focused", true);
+        expect(screen.getByRole("textbox")).toHaveFocus();
     });
 
     it("onFocus is called after textfield is focused", () => {
         // Arrange
         const handleOnFocus = jest.fn(() => {});
 
-        const wrapper = mount(
+        render(
             <TextField
                 id={"tf-1"}
                 value="TextIsLongerThan8"
@@ -39,7 +31,7 @@ describe("TextField", () => {
         );
 
         // Act
-        wrapper.simulate("focus");
+        userEvent.tab();
 
         // Assert
         expect(handleOnFocus).toHaveBeenCalled();
@@ -47,24 +39,24 @@ describe("TextField", () => {
 
     it("textfield is blurred", async () => {
         // Arrange
-        const wrapper = mount(
-            <TextField id="tf-1" value="" onChange={() => {}} />,
-        );
+        render(<TextField id="tf-1" value="" onChange={() => {}} />);
+
+        // focus
+        userEvent.tab();
 
         // Act
-        wrapper.simulate("focus");
-        await wait(0);
-        wrapper.simulate("blur");
+        // blur
+        userEvent.tab();
 
         // Assert
-        expect(wrapper.find("TextFieldInternal")).toHaveState("focused", false);
+        expect(screen.getByRole("textbox")).not.toHaveFocus();
     });
 
     it("onBlur is called after textfield is blurred", async () => {
         // Arrange
         const handleOnBlur = jest.fn(() => {});
 
-        const wrapper = mount(
+        render(
             <TextField
                 id={"tf-1"}
                 value="TextIsLongerThan8"
@@ -73,10 +65,12 @@ describe("TextField", () => {
             />,
         );
 
+        // focus
+        userEvent.tab();
+
         // Act
-        wrapper.simulate("focus");
-        await wait(0);
-        wrapper.simulate("blur");
+        // blur
+        userEvent.tab();
 
         // Assert
         expect(handleOnBlur).toHaveBeenCalled();
@@ -87,13 +81,11 @@ describe("TextField", () => {
         const id: string = "tf-1";
 
         // Act
-        const wrapper = mount(
-            <TextField id={id} value="" onChange={() => {}} />,
-        );
+        render(<TextField id={id} value="" onChange={() => {}} />);
 
         // Assert
-        const input = wrapper.find("input");
-        expect(input).toContainMatchingElement(`[id="${id}"]`);
+        const input = screen.getByRole("textbox");
+        expect(input).toHaveAttribute("id", id);
     });
 
     it("type prop is passed to the input element", () => {
@@ -101,13 +93,14 @@ describe("TextField", () => {
         const type = "number";
 
         // Act
-        const wrapper = mount(
+        render(
             <TextField id={"tf-1"} type={type} value="" onChange={() => {}} />,
         );
 
         // Assert
-        const input = wrapper.find("input");
-        expect(input).toContainMatchingElement(`[type="${type}"]`);
+        // NOTE: The implicit role for input[type=number] is "spinbutton".
+        const input = screen.getByRole("spinbutton");
+        expect(input).toHaveAttribute("type", type);
     });
 
     it("value prop is passed to the input element", () => {
@@ -115,18 +108,16 @@ describe("TextField", () => {
         const value = "Text";
 
         // Act
-        const wrapper = mount(
-            <TextField id={"tf-1"} value={value} onChange={() => {}} />,
-        );
+        render(<TextField id={"tf-1"} value={value} onChange={() => {}} />);
 
         // Assert
-        const input = wrapper.find("input");
-        expect(input).toContainMatchingElement(`[value="${value}"]`);
+        const input = screen.getByDisplayValue(value);
+        expect(input).toBeInTheDocument();
     });
 
     it("disabled prop disables the input element", () => {
         // Arrange
-        const wrapper = mount(
+        render(
             <TextField
                 id="tf-1"
                 value=""
@@ -134,7 +125,7 @@ describe("TextField", () => {
                 disabled={true}
             />,
         );
-        const input = wrapper.find("input");
+        const input = screen.getByRole("textbox");
 
         // Act
 
@@ -146,13 +137,17 @@ describe("TextField", () => {
         // Arrange
         const handleOnChange = jest.fn();
 
-        const wrapper = mount(
+        render(
             <TextField id={"tf-1"} value="Text" onChange={handleOnChange} />,
         );
 
         // Act
         const newValue = "Test2";
-        wrapper.simulate("change", {target: {value: newValue}});
+        const input = screen.getByRole("textbox");
+        // @see https://testing-library.com/docs/react-testing-library/faq
+        // How do I test input onChange handlers?
+        // eslint-disable-next-line testing-library/prefer-user-event
+        fireEvent.change(input, {target: {value: newValue}});
 
         // Assert
         expect(handleOnChange).toHaveBeenCalledWith(newValue);
@@ -162,7 +157,7 @@ describe("TextField", () => {
         // Arrange
         const handleValidate = jest.fn((value: string): ?string => {});
 
-        const wrapper = mount(
+        render(
             <TextField
                 id={"tf-1"}
                 value="Text"
@@ -173,7 +168,8 @@ describe("TextField", () => {
 
         // Act
         const newValue = "Text2";
-        wrapper.simulate("change", {target: {value: newValue}});
+        // Select all text and replace it with the new value.
+        userEvent.type(screen.getByRole("textbox"), `{selectall}${newValue}`);
 
         // Assert
         expect(handleValidate).toHaveBeenCalledWith(newValue);
@@ -187,7 +183,7 @@ describe("TextField", () => {
             }
         });
 
-        const wrapper = mount(
+        render(
             <TextField
                 id={"tf-1"}
                 value="TextIsLong"
@@ -198,7 +194,8 @@ describe("TextField", () => {
 
         // Act
         const newValue = "TextIsLongerThan8";
-        wrapper.simulate("change", {target: {value: newValue}});
+        // Select all text and replace it with the new value.
+        userEvent.type(screen.getByRole("textbox"), `{selectall}${newValue}`);
 
         // Assert
         expect(handleValidate).toHaveReturnedWith(undefined);
@@ -213,7 +210,7 @@ describe("TextField", () => {
             }
         });
 
-        const wrapper = mount(
+        render(
             <TextField
                 id={"tf-1"}
                 value="TextIsLongerThan8"
@@ -224,7 +221,8 @@ describe("TextField", () => {
 
         // Act
         const newValue = "Text";
-        wrapper.simulate("change", {target: {value: newValue}});
+        // Select all text and replace it with the new value.
+        userEvent.type(screen.getByRole("textbox"), `{selectall}${newValue}`);
 
         // Assert
         expect(handleValidate).toHaveReturnedWith(errorMessage);
@@ -240,7 +238,7 @@ describe("TextField", () => {
             }
         });
 
-        const wrapper = mount(
+        render(
             <TextField
                 id={"tf-1"}
                 value="TextIsLongerThan8"
@@ -252,7 +250,8 @@ describe("TextField", () => {
 
         // Act
         const newValue = "Text";
-        wrapper.simulate("change", {target: {value: newValue}});
+        // Select all text and replace it with the new value.
+        userEvent.type(screen.getByRole("textbox"), `{selectall}${newValue}`);
 
         // Assert
         expect(handleValidate).toHaveBeenCalledWith(errorMessage);
@@ -269,7 +268,7 @@ describe("TextField", () => {
         });
 
         // Act
-        mount(
+        render(
             <TextField
                 id={"tf-1"}
                 value="Short"
@@ -291,7 +290,7 @@ describe("TextField", () => {
             },
         );
 
-        const wrapper = mount(
+        render(
             <TextField
                 id={"tf-1"}
                 value="TextIsLongerThan8"
@@ -301,12 +300,10 @@ describe("TextField", () => {
         );
 
         // Act
-        const key = "Enter";
-        const input = wrapper.find("input");
-        input.simulate("keyDown", {key: key});
+        userEvent.type(screen.getByRole("textbox"), "{enter}");
 
         // Assert
-        expect(handleOnKeyDown).toHaveReturnedWith(key);
+        expect(handleOnKeyDown).toHaveReturnedWith("Enter");
     });
 
     it("placeholder prop is passed to the input element", () => {
@@ -314,7 +311,7 @@ describe("TextField", () => {
         const placeholder = "Placeholder";
 
         // Act
-        const wrapper = mount(
+        render(
             <TextField
                 id={"tf-1"}
                 value="Text"
@@ -324,16 +321,14 @@ describe("TextField", () => {
         );
 
         // Assert
-        const input = wrapper.find("input");
-        expect(input).toContainMatchingElement(
-            `[placeholder="${placeholder}"]`,
-        );
+        const input = screen.getByPlaceholderText(placeholder);
+        expect(input).toBeInTheDocument();
     });
 
     it("testId is passed to the input element", () => {
         // Arrange
         const testId = "some-test-id";
-        const wrapper = mount(
+        render(
             <TextField
                 id={"tf-1"}
                 value="Text"
@@ -345,14 +340,14 @@ describe("TextField", () => {
         // Act
 
         // Assert
-        const input = wrapper.find("input");
-        expect(input).toContainMatchingElement(`[data-test-id="${testId}"]`);
+        const input = screen.getByRole("textbox");
+        expect(input).toHaveAttribute("data-test-id", testId);
     });
 
     it("aria props are passed to the input element", () => {
         // Arrange
         const ariaLabel = "example-text-field";
-        const wrapper = mount(
+        render(
             <TextField
                 id={"tf-1"}
                 value="Text"
@@ -364,15 +359,15 @@ describe("TextField", () => {
         // Act
 
         // Assert
-        const input = wrapper.find("input");
-        expect(input).toContainMatchingElement(`[aria-label="${ariaLabel}"]`);
+        const input = screen.getByRole("textbox");
+        expect(input).toHaveAttribute("aria-label", ariaLabel);
     });
 
     it("readOnly prop is passed to the input element", async () => {
         // Arrange
 
         // Act
-        const wrapper = mount(
+        render(
             <TextField
                 id={"tf-1"}
                 value={"Text"}
@@ -382,8 +377,8 @@ describe("TextField", () => {
         );
 
         // Assert
-        const input = wrapper.find("input");
-        expect(input).toHaveProp("readOnly");
+        const input = screen.getByRole("textbox");
+        expect(input).toHaveAttribute("readOnly");
     });
 
     it("autoComplete prop is passed to the input element", async () => {
@@ -391,7 +386,7 @@ describe("TextField", () => {
         const autoComplete = "name";
 
         // Act
-        const wrapper = mount(
+        render(
             <TextField
                 id={"tf-1"}
                 value={"Text"}
@@ -401,7 +396,7 @@ describe("TextField", () => {
         );
 
         // Assert
-        const input = wrapper.find("input");
-        expect(input).toHaveProp("autoComplete", autoComplete);
+        const input = screen.getByRole("textbox");
+        expect(input).toHaveAttribute("autoComplete", autoComplete);
     });
 });