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