diff --git a/test/components/views/elements/Linkify-test.tsx b/test/components/views/elements/Linkify-test.tsx index 14a3b81b21..dcd44320db 100644 --- a/test/components/views/elements/Linkify-test.tsx +++ b/test/components/views/elements/Linkify-test.tsx @@ -12,18 +12,17 @@ See the License for the specific language governing permissions and limitations under the License. */ +import { fireEvent, render } from "@testing-library/react"; import React, { useState } from "react"; -// eslint-disable-next-line deprecate/import -import { mount } from "enzyme"; import { Linkify } from "../../../../src/components/views/elements/Linkify"; describe("Linkify", () => { it("linkifies the context", () => { - const wrapper = mount( + const { container } = render( https://perdu.com ); - expect(wrapper.html()).toBe( + expect(container.innerHTML).toBe( "
"+ "https://perdu.com" + "
", @@ -31,10 +30,10 @@ describe("Linkify", () => { }); it("correctly linkifies a room alias", () => { - const wrapper = mount( + const { container } = render( #element-web:matrix.org ); - expect(wrapper.html()).toBe( + expect(container.innerHTML).toBe( "
" + "" + "#element-web:matrix.org" + @@ -45,11 +44,11 @@ describe("Linkify", () => { it("changes the root tag name", () => { const TAG_NAME = "p"; - const wrapper = mount( + const { container } = render( Hello world! ); - expect(wrapper.find("p")).toHaveLength(1); + expect(container.querySelectorAll("p")).toHaveLength(1); }); it("relinkifies on update", () => { @@ -70,18 +69,18 @@ describe("Linkify", () => {
; } - const wrapper = mount(); + const { container } = render(); - expect(wrapper.html()).toBe( + expect(container.innerHTML).toBe( "
" + "" + "https://perdu.com" + "
", ); - wrapper.find('div').at(0).simulate('click'); + fireEvent.click(container.querySelector("div")); - expect(wrapper.html()).toBe( + expect(container.innerHTML).toBe( "
" + "" + "https://matrix.org" + diff --git a/test/components/views/messages/CallEvent-test.tsx b/test/components/views/messages/CallEvent-test.tsx index 2c6eccaa3e..31e638dca4 100644 --- a/test/components/views/messages/CallEvent-test.tsx +++ b/test/components/views/messages/CallEvent-test.tsx @@ -16,7 +16,6 @@ limitations under the License. import React from "react"; import { render, screen, act, cleanup, fireEvent, waitFor } from "@testing-library/react"; -import "@testing-library/jest-dom"; import { mocked, Mocked } from "jest-mock"; import { Room } from "matrix-js-sdk/src/models/room"; import { MatrixClient, PendingEventOrdering } from "matrix-js-sdk/src/client"; diff --git a/test/components/views/messages/DateSeparator-test.tsx b/test/components/views/messages/DateSeparator-test.tsx index 772942e080..f3bfbc050b 100644 --- a/test/components/views/messages/DateSeparator-test.tsx +++ b/test/components/views/messages/DateSeparator-test.tsx @@ -15,9 +15,8 @@ limitations under the License. */ import React from "react"; -// eslint-disable-next-line deprecate/import -import { mount } from "enzyme"; import { mocked } from "jest-mock"; +import { render } from "@testing-library/react"; import { formatFullDateNoTime } from "../../../../src/DateUtils"; import SettingsStore from "../../../../src/settings/SettingsStore"; @@ -48,10 +47,11 @@ describe("DateSeparator", () => { const mockClient = getMockClientWithEventEmitter({}); const getComponent = (props = {}) => - mount(, { - wrappingComponent: MatrixClientContext.Provider, - wrappingComponentProps: { value: mockClient }, - }); + render(( + + + + )); type TestCase = [string, number, string]; const testCases: TestCase[] = [ @@ -81,18 +81,19 @@ describe("DateSeparator", () => { }); it('renders the date separator correctly', () => { - const component = getComponent(); - expect(component).toMatchSnapshot(); + const { asFragment } = getComponent(); + expect(asFragment()).toMatchSnapshot(); expect(SettingsStore.getValue).toHaveBeenCalledWith(UIFeature.TimelineEnableRelativeDates); }); it.each(testCases)('formats date correctly when current time is %s', (_d, ts, result) => { - expect(getComponent({ ts, forExport: false }).text()).toEqual(result); + expect(getComponent({ ts, forExport: false }).container.textContent).toEqual(result); }); describe('when forExport is true', () => { it.each(testCases)('formats date in full when current time is %s', (_d, ts) => { - expect(getComponent({ ts, forExport: true }).text()).toEqual(formatFullDateNoTime(new Date(ts))); + expect(getComponent({ ts, forExport: true }).container.textContent) + .toEqual(formatFullDateNoTime(new Date(ts))); }); }); @@ -105,7 +106,8 @@ describe("DateSeparator", () => { }); }); it.each(testCases)('formats date in full when current time is %s', (_d, ts) => { - expect(getComponent({ ts, forExport: false }).text()).toEqual(formatFullDateNoTime(new Date(ts))); + expect(getComponent({ ts, forExport: false }).container.textContent) + .toEqual(formatFullDateNoTime(new Date(ts))); }); }); @@ -118,8 +120,8 @@ describe("DateSeparator", () => { }); }); it('renders the date separator correctly', () => { - const component = getComponent(); - expect(component).toMatchSnapshot(); + const { asFragment } = getComponent(); + expect(asFragment()).toMatchSnapshot(); }); }); }); diff --git a/test/components/views/messages/__snapshots__/DateSeparator-test.tsx.snap b/test/components/views/messages/__snapshots__/DateSeparator-test.tsx.snap index dec7c8c9ee..6667fd9fd8 100644 --- a/test/components/views/messages/__snapshots__/DateSeparator-test.tsx.snap +++ b/test/components/views/messages/__snapshots__/DateSeparator-test.tsx.snap @@ -1,16 +1,12 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`DateSeparator renders the date separator correctly 1`] = ` - + - + `; exports[`DateSeparator when feature_jump_to_date is enabled renders the date separator correctly 1`] = ` - +