Merge branch 'molefrog:v3' into ostapch/patch-26

Author: ostapch

bun.lock

@@ -138,9 +138,11 @@
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.7",
     "@size-limit/preset-small-lib": "^11.2.0",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^16.3.0",
     "@types/babel__core": "^7.20.5",
+    "@types/bun": "^1.2.14",
     "@types/react": "^18.2.0",
     "@types/react-test-renderer": "^18.0.0",
     "@vitejs/plugin-react": "^4.0.4",
@@ -149,15 +151,14 @@
     "copyfiles": "^2.4.1",
     "eslint": "^7.19.0",
     "eslint-plugin-react-hooks": "^4.6.2",
+    "happy-dom": "^17.4.7",
     "husky": "^4.3.0",
-    "jsdom": "^22.1.0",
     "path-to-regexp": "^6.2.1",
     "preact": "^10.23.2",
     "preact-render-to-string": "^6.5.9",
     "prettier": "^2.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-test-renderer": "^18.2.0",
     "rimraf": "^3.0.2",
     "rollup": "^3.29.5",
     "size-limit": "^10.0.1",

package.json

@@ -5,6 +5,6 @@ export default defineProject({
   plugins: [preact()],
   test: {
     name: "wouter-preact",
-    environment: "jsdom",
+    environment: "happy-dom",
   },
 });

packages/wouter-preact/vitest.config.ts

@@ -163,7 +163,7 @@ describe("<Link />", () => {
 
     fireEvent.click(getByTestId("link"));
     expect(location.pathname).toBe("/goo-baz");
-    expect(history.state).toBe(testState);
+    expect(history.state).toStrictEqual(testState);
   });
 
   it("can be configured to use custom href formatting", () => {

packages/wouter/test/link.test.tsx

@@ -66,7 +66,7 @@ it("supports history state", () => {
   const { unmount } = render(<Redirect to="/users" state={testState} />);
 
   expect(location.pathname).toBe("/users");
-  expect(history.state).toBe(testState);
+  expect(history.state).toStrictEqual(testState);
   unmount();
 });
 

packages/wouter/test/redirect.test.tsx

@@ -1,79 +1,89 @@
-import { it, expect } from "vitest";
-import { render, act } from "@testing-library/react";
-import * as TestRenderer from "react-test-renderer";
+import { it, expect, afterEach } from "vitest";
+import { render, act, cleanup } from "@testing-library/react";
 
 import { Router, Route } from "wouter";
 import { memoryLocation } from "wouter/memory-location";
 import { ReactElement } from "react";
 
+// Clean up after each test to avoid DOM pollution
+afterEach(cleanup);
+
 const testRouteRender = (initialPath: string, jsx: ReactElement) => {
-  const instance = TestRenderer.create(
+  return render(
     <Router hook={memoryLocation({ path: initialPath }).hook}>{jsx}</Router>
-  ).root;
-
-  return instance;
+  );
 };
 
 it("always renders its content when `path` is empty", () => {
-  const result = testRouteRender(
+  const { container } = testRouteRender(
     "/nothing",
     <Route>
       <h1>Hello!</h1>
     </Route>
   );
 
-  expect(result.findByType("h1").props.children).toBe("Hello!");
+  const heading = container.querySelector("h1");
+  expect(heading).toBeInTheDocument();
+  expect(heading).toHaveTextContent("Hello!");
 });
 
 it("accepts plain children", () => {
-  const result = testRouteRender(
+  const { container } = testRouteRender(
     "/foo",
     <Route path="/foo">
       <h1>Hello!</h1>
     </Route>
   );
 
-  expect(result.findByType("h1").props.children).toBe("Hello!");
+  const heading = container.querySelector("h1");
+  expect(heading).toBeInTheDocument();
+  expect(heading).toHaveTextContent("Hello!");
 });
 
 it("works with render props", () => {
-  const result = testRouteRender(
+  const { container } = testRouteRender(
     "/foo",
     <Route path="/foo">{() => <h1>Hello!</h1>}</Route>
   );
 
-  expect(result.findByType("h1").props.children).toBe("Hello!");
+  const heading = container.querySelector("h1");
+  expect(heading).toBeInTheDocument();
+  expect(heading).toHaveTextContent("Hello!");
 });
 
 it("passes a match param object to the render function", () => {
-  const result = testRouteRender(
+  const { container } = testRouteRender(
     "/users/alex",
     <Route path="/users/:name">{(params) => <h1>{params.name}</h1>}</Route>
   );
 
-  expect(result.findByType("h1").props.children).toBe("alex");
+  const heading = container.querySelector("h1");
+  expect(heading).toBeInTheDocument();
+  expect(heading).toHaveTextContent("alex");
 });
 
 it("renders nothing when there is not match", () => {
-  const result = testRouteRender(
+  const { container } = testRouteRender(
     "/bar",
     <Route path="/foo">
       <div>Hi!</div>
     </Route>
   );
 
-  expect(() => result.findByType("div")).toThrow();
+  expect(container.querySelector("div")).not.toBeInTheDocument();
 });
 
 it("supports `component` prop similar to React-Router", () => {
   const Users = () => <h2>All users</h2>;
 
-  const result = testRouteRender(
+  const { container } = testRouteRender(
     "/foo",
     <Route path="/foo" component={Users} />
   );
 
-  expect(result.findByType("h2").props.children).toBe("All users");
+  const heading = container.querySelector("h2");
+  expect(heading).toBeInTheDocument();
+  expect(heading).toHaveTextContent("All users");
 });
 
 it("supports `base` routers with relative path", () => {
@@ -90,52 +100,58 @@ it("supports `base` routers with relative path", () => {
 
   act(() => history.replaceState(null, "", "/app/nested"));
 
-  expect(container.childNodes.length).toBe(1);
-  expect((container.firstChild as HTMLElement).tagName).toBe("H1");
+  expect(container.children).toHaveLength(1);
+  expect(container.firstChild).toHaveProperty("tagName", "H1");
 
   unmount();
 });
 
 it("supports `path` prop with regex", () => {
-  const result = testRouteRender(
+  const { container } = testRouteRender(
     "/foo",
     <Route path={/[/]foo/}>
       <h1>Hello!</h1>
     </Route>
   );
 
-  expect(result.findByType("h1").props.children).toBe("Hello!");
+  const heading = container.querySelector("h1");
+  expect(heading).toBeInTheDocument();
+  expect(heading).toHaveTextContent("Hello!");
 });
 
 it("supports regex path named params", () => {
-  const result = testRouteRender(
+  const { container } = testRouteRender(
     "/users/alex",
     <Route path={/[/]users[/](?<name>[a-z]+)/}>
       {(params) => <h1>{params.name}</h1>}
     </Route>
   );
 
-  expect(result.findByType("h1").props.children).toBe("alex");
+  const heading = container.querySelector("h1");
+  expect(heading).toBeInTheDocument();
+  expect(heading).toHaveTextContent("alex");
 });
 
 it("supports regex path anonymous params", () => {
-  const result = testRouteRender(
+  const { container } = testRouteRender(
     "/users/alex",
     <Route path={/[/]users[/]([a-z]+)/}>
       {(params) => <h1>{params[0]}</h1>}
     </Route>
   );
 
-  expect(result.findByType("h1").props.children).toBe("alex");
+  const heading = container.querySelector("h1");
+  expect(heading).toBeInTheDocument();
+  expect(heading).toHaveTextContent("alex");
 });
 
 it("rejects when a path does not match the regex", () => {
-  const result = testRouteRender(
+  const { container } = testRouteRender(
     "/users/1234",
     <Route path={/[/]users[/](?<name>[a-z]+)/}>
       {(params) => <h1>{params.name}</h1>}
     </Route>
   );
 
-  expect(() => result.findByType("h1")).toThrow();
+  expect(container.querySelector("h1")).not.toBeInTheDocument();
 });

packages/wouter/test/route.test.tsx

@@ -1,6 +1,5 @@
 import { memo, ReactElement, cloneElement, ComponentProps } from "react";
 import { renderHook, render } from "@testing-library/react";
-import * as TestRenderer from "react-test-renderer";
 import { it, expect, describe } from "vitest";
 import {
   Router,
@@ -91,25 +90,24 @@ it("can extract `ssrSearch` from `ssrPath` after the '?' symbol", () => {
 });
 
 it("shares one router instance between components", () => {
-  const RouterGetter = ({ el }: { el: ReactElement }) => {
+  const routers: any[] = [];
+
+  const RouterGetter = ({ index }: { index: number }) => {
     const router = useRouter();
-    return cloneElement(el, { router: router });
+    routers[index] = router;
+    return <div data-testid={`router-${index}`} />;
   };
 
-  const { root } = TestRenderer.create(
+  render(
     <>
-      <RouterGetter el={<div />} />
-      <RouterGetter el={<div />} />
-      <RouterGetter el={<div />} />
-      <RouterGetter el={<div />} />
+      <RouterGetter index={0} />
+      <RouterGetter index={1} />
+      <RouterGetter index={2} />
+      <RouterGetter index={3} />
     </>
   );
 
-  const uniqRouters = [
-    ...new Set<DefaultParams>(
-      root.findAllByType("div").map((x) => x.props.router)
-    ),
-  ];
+  const uniqRouters = [...new Set<DefaultParams>(routers)];
   expect(uniqRouters.length).toBe(1);
 });