Finish removing urql and use new test render wrapper

Author: sandhose

.github/dependabot.yml

@@ -88,10 +88,6 @@ updates:
         patterns:
           - "jotai"
           - "jotai-*"
-      urql:
-        patterns:
-          - "urql"
-          - "@urql/*"
       graphql-codegen:
         patterns:
           - "@graphql-codegen/*"

frontend/package-lock.json

@@ -41,7 +41,6 @@
     "react-dom": "^18.3.1",
     "react-i18next": "^15.1.1",
     "swagger-ui-react": "^5.18.2",
-    "urql": "^4.2.1",
     "vaul": "^1.1.1",
     "zod": "^3.23.8"
   },
@@ -76,7 +75,6 @@
     "postcss": "^8.4.49",
     "postcss-modules": "^6.0.1",
     "postcss-nesting": "^13.0.1",
-    "react-test-renderer": "^18.3.1",
     "rimraf": "^6.0.1",
     "storybook": "^8.3.5",
     "storybook-react-i18next": "^3.1.7",

frontend/package.json

@@ -6,34 +6,34 @@
 
 // @vitest-environment happy-dom
 
-import { create } from "react-test-renderer";
 import { describe, expect, it } from "vitest";
 
+import render from "../../test-utils/render";
 import Block from "./Block";
 
 describe("Block", () => {
   it("render <Block />", () => {
-    const component = create(<Block />);
-    expect(component.toJSON()).toMatchSnapshot();
+    const { asFragment } = render(<Block />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it("render <Block /> with children", () => {
-    const component = create(
+    const { asFragment } = render(
       <Block>
         <h1>Title</h1>
         <p>Body</p>
       </Block>,
     );
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it("passes down the className prop", () => {
-    const component = create(<Block className="foo" />);
-    expect(component.toJSON()).toMatchSnapshot();
+    const { asFragment } = render(<Block className="test" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it("renders with highlight", () => {
-    const component = create(<Block highlight />);
-    expect(component.toJSON()).toMatchSnapshot();
+    const { asFragment } = render(<Block highlight />);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

frontend/src/components/Block/Block.test.tsx

@@ -1,33 +1,41 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Block > passes down the className prop 1`] = `
-<div
-  className="_block_17898c foo"
-/>
+<DocumentFragment>
+  <div
+    class="_block_17898c test"
+  />
+</DocumentFragment>
 `;
 
 exports[`Block > render <Block /> 1`] = `
-<div
-  className="_block_17898c"
-/>
+<DocumentFragment>
+  <div
+    class="_block_17898c"
+  />
+</DocumentFragment>
 `;
 
 exports[`Block > render <Block /> with children 1`] = `
-<div
-  className="_block_17898c"
->
-  <h1>
-    Title
-  </h1>
-  <p>
-    Body
-  </p>
-</div>
+<DocumentFragment>
+  <div
+    class="_block_17898c"
+  >
+    <h1>
+      Title
+    </h1>
+    <p>
+      Body
+    </p>
+  </div>
+</DocumentFragment>
 `;
 
 exports[`Block > renders with highlight 1`] = `
-<div
-  className="_block_17898c"
-  data-active={true}
-/>
+<DocumentFragment>
+  <div
+    class="_block_17898c"
+    data-active="true"
+  />
+</DocumentFragment>
 `;

frontend/src/components/Block/__snapshots__/Block.test.tsx.snap

@@ -6,31 +6,29 @@
 
 // @vitest-environment happy-dom
 
-import { create } from "react-test-renderer";
 import { describe, expect, it } from "vitest";
-
+import render from "../../test-utils/render";
 import Block from "../Block";
-
 import BlockList from "./BlockList";
 
 describe("BlockList", () => {
   it("render an empty <BlockList />", () => {
-    const component = create(<BlockList />);
-    expect(component.toJSON()).toMatchSnapshot();
+    const { asFragment } = render(<BlockList />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it("render <BlockList /> with children", () => {
-    const component = create(
+    const { asFragment } = render(
       <BlockList>
         <Block>Block 1</Block>
         <Block>Block 2</Block>
       </BlockList>,
     );
-    expect(component.toJSON()).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it("passes down the className prop", () => {
-    const component = create(<BlockList className="foo" />);
-    expect(component.toJSON()).toMatchSnapshot();
+    const { asFragment } = render(<BlockList className="foo" />);
+    expect(asFragment()).toMatchSnapshot();
   });
 });

frontend/src/components/BlockList/BlockList.test.tsx

@@ -1,30 +1,36 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`BlockList > passes down the className prop 1`] = `
-<div
-  className="_blockList_f8cc7f foo"
-/>
+<DocumentFragment>
+  <div
+    class="_blockList_f8cc7f foo"
+  />
+</DocumentFragment>
 `;
 
 exports[`BlockList > render <BlockList /> with children 1`] = `
-<div
-  className="_blockList_f8cc7f"
->
+<DocumentFragment>
   <div
-    className="_block_17898c"
+    class="_blockList_f8cc7f"
   >
-    Block 1
+    <div
+      class="_block_17898c"
+    >
+      Block 1
+    </div>
+    <div
+      class="_block_17898c"
+    >
+      Block 2
+    </div>
   </div>
-  <div
-    className="_block_17898c"
-  >
-    Block 2
-  </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`BlockList > render an empty <BlockList /> 1`] = `
-<div
-  className="_blockList_f8cc7f"
-/>
+<DocumentFragment>
+  <div
+    class="_blockList_f8cc7f"
+  />
+</DocumentFragment>
 `;

frontend/src/components/BlockList/__snapshots__/BlockList.test.tsx.snap

@@ -1,27 +1,18 @@
 // Copyright 2024 New Vector Ltd.
-// Copyright 2023, 2024 The Matrix.org Foundation C.I.C.
+// Copyright 2023-2024 The Matrix.org Foundation C.I.C.
 //
 // SPDX-License-Identifier: AGPL-3.0-only
 // Please see LICENSE in the repository root for full details.
 
 // @vitest-environment happy-dom
 
-import { create } from "react-test-renderer";
-import { Provider } from "urql";
 import { beforeAll, describe, expect, it } from "vitest";
-import { never } from "wonka";
-
 import { makeFragmentData } from "../gql";
 import { mockLocale } from "../test-utils/mockLocale";
-import { DummyRouter } from "../test-utils/router";
-
+import render from "../test-utils/render";
 import CompatSession, { FRAGMENT } from "./CompatSession";
 
 describe("<CompatSession />", () => {
-  const mockClient = {
-    executeQuery: (): typeof never => never,
-  };
-
   const baseSession = {
     id: "session-id",
     deviceId: "abcd1234",
@@ -39,14 +30,8 @@ describe("<CompatSession />", () => {
 
   it("renders an active session", () => {
     const session = makeFragmentData(baseSession, FRAGMENT);
-    const component = create(
-      <Provider value={mockClient}>
-        <DummyRouter>
-          <CompatSession session={session} />
-        </DummyRouter>
-      </Provider>,
-    );
-    expect(component.toJSON()).toMatchSnapshot();
+    const { asFragment } = render(<CompatSession session={session} />);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it("renders a finished session", () => {
@@ -57,13 +42,7 @@ describe("<CompatSession />", () => {
       },
       FRAGMENT,
     );
-    const component = create(
-      <Provider value={mockClient}>
-        <DummyRouter>
-          <CompatSession session={session} />
-        </DummyRouter>
-      </Provider>,
-    );
-    expect(component.toJSON()).toMatchSnapshot();
+    const { asFragment } = render(<CompatSession session={session} />);
+    expect(asFragment()).toMatchSnapshot();
   });
 });