diff --git a/test/components/views/location/LiveDurationDropdown-test.tsx b/test/components/views/location/LiveDurationDropdown-test.tsx
index c646b30797..b62c95c332 100644
--- a/test/components/views/location/LiveDurationDropdown-test.tsx
+++ b/test/components/views/location/LiveDurationDropdown-test.tsx
@@ -15,14 +15,13 @@ limitations under the License.
*/
import React from "react";
-// eslint-disable-next-line deprecate/import
-import { mount, ReactWrapper } from "enzyme";
-import { act } from "react-dom/test-utils";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
import LiveDurationDropdown, {
DEFAULT_DURATION_MS,
} from "../../../../src/components/views/location/LiveDurationDropdown";
-import { findById, mockPlatformPeg } from "../../../test-utils";
+import { mockPlatformPeg } from "../../../test-utils";
mockPlatformPeg({ overrideBrowserShortcuts: jest.fn().mockReturnValue(false) });
@@ -31,45 +30,40 @@ describe("", () => {
timeout: DEFAULT_DURATION_MS,
onChange: jest.fn(),
};
- const getComponent = (props = {}) => mount();
+ const renderComponent = (props = {}) => render();
- const getOption = (wrapper: ReactWrapper, timeout: number) => findById(wrapper, `live-duration__${timeout}`).at(0);
- const getSelectedOption = (wrapper: ReactWrapper) => findById(wrapper, "live-duration_value");
- const openDropdown = (wrapper: ReactWrapper) =>
- act(() => {
- wrapper.find('[role="button"]').at(0).simulate("click");
- wrapper.setProps({});
- });
+ const getOption = (duration: string) => screen.getByRole("option", { name: `Share for ${duration}` });
+ const getSelectedOption = (duration: string) => screen.getByRole("button", { name: `Share for ${duration}` });
+ const openDropdown = async () => {
+ await userEvent.click(screen.getByRole("button"));
+ };
it("renders timeout as selected option", () => {
- const wrapper = getComponent();
- expect(getSelectedOption(wrapper).text()).toEqual("Share for 15m");
+ renderComponent();
+ expect(getSelectedOption("15m")).toBeInTheDocument();
});
it("renders non-default timeout as selected option", () => {
const timeout = 1234567;
- const wrapper = getComponent({ timeout });
- expect(getSelectedOption(wrapper).text()).toEqual(`Share for 21m`);
+ renderComponent({ timeout });
+ expect(getSelectedOption("21m")).toBeInTheDocument();
});
- it("renders a dropdown option for a non-default timeout value", () => {
+ it("renders a dropdown option for a non-default timeout value", async () => {
const timeout = 1234567;
- const wrapper = getComponent({ timeout });
- openDropdown(wrapper);
- expect(getOption(wrapper, timeout).text()).toEqual(`Share for 21m`);
+ renderComponent({ timeout });
+ await openDropdown();
+ expect(getOption("21m")).toBeInTheDocument();
});
- it("updates value on option selection", () => {
+ it("updates value on option selection", async () => {
const onChange = jest.fn();
- const wrapper = getComponent({ onChange });
+ renderComponent({ onChange });
const ONE_HOUR = 3600000;
- openDropdown(wrapper);
-
- act(() => {
- getOption(wrapper, ONE_HOUR).simulate("click");
- });
+ await openDropdown();
+ await userEvent.click(getOption("1h"));
expect(onChange).toHaveBeenCalledWith(ONE_HOUR);
});