one/dist/esm/router/useScreens.test.native.js

One is a new React Framework that makes Vite serve both native and web.

import { jsx, jsxs } from "react/jsx-runtime";
import React from "react";
import TestRenderer, { act } from "react-test-renderer";
import { afterEach, beforeEach, describe, expect, it } from "vitest";
import { getQualifiedRouteComponent } from "./useScreens.native.js";
var pendingRoute = new Promise(function () {});
var previousTarget = "native";
var previousSuspendRoutesNative = process.env.ONE_SUSPEND_ROUTES_NATIVE;
var previousDisableSuspense = globalThis.__ONE_DISABLE_SUSPENSE_ROUTES__;
function createRouteNode(type, route, contextKey, loadRoute) {
  return {
    type,
    route,
    contextKey,
    loadRoute,
    children: [],
    dynamic: null
  };
}
function SuspendingRoute() {
  throw pendingRoute;
}
beforeEach(function () {
  process.env.TAMAGUI_TARGET = "native";
  delete process.env.ONE_SUSPEND_ROUTES_NATIVE;
  delete globalThis.__ONE_DISABLE_SUSPENSE_ROUTES__;
});
afterEach(function () {
  if (previousTarget === void 0) delete "native";else process.env.TAMAGUI_TARGET = previousTarget;
  if (previousSuspendRoutesNative === void 0) delete process.env.ONE_SUSPEND_ROUTES_NATIVE;else process.env.ONE_SUSPEND_ROUTES_NATIVE = previousSuspendRoutesNative;
  if (previousDisableSuspense === void 0) delete globalThis.__ONE_DISABLE_SUSPENSE_ROUTES__;else globalThis.__ONE_DISABLE_SUSPENSE_ROUTES__ = previousDisableSuspense;
});
describe("route SuspenseFallback", function () {
  it("inherits the layout fallback and passes the suspended route details", async function () {
    var ChildRoute = getQualifiedRouteComponent(createRouteNode("spa", "profile/[id]", "./(app)/profile/[id].tsx", function () {
      throw pendingRoute;
    }));
    var LayoutRoute = getQualifiedRouteComponent(createRouteNode("layout", "(app)", "./(app)/_layout.tsx", function () {
      return {
        default: function () {
          return /* @__PURE__ */jsx(ChildRoute, {
            route: {
              params: {
                id: "123"
              }
            }
          });
        },
        SuspenseFallback: function (param) {
          var {
            route,
            params
          } = param;
          return /* @__PURE__ */jsxs("div", {
            "data-fallback": "layout",
            children: [route, ":", params.id]
          });
        }
      };
    }));
    var renderer;
    await act(async function () {
      renderer = TestRenderer.create(/* @__PURE__ */jsx(LayoutRoute, {}));
    });
    expect(renderer.root.findByProps({
      "data-fallback": "layout"
    }).children).toEqual(["./(app)/profile/[id].tsx", ":", "123"]);
  });
  it("uses the nearest layout fallback", async function () {
    var ChildRoute = getQualifiedRouteComponent(createRouteNode("spa", "profile", "./(app)/profile.tsx", function () {
      return {
        default: SuspendingRoute
      };
    }));
    var NestedLayoutRoute = getQualifiedRouteComponent(createRouteNode("layout", "(app)", "./(app)/_layout.tsx", function () {
      return {
        default: function () {
          return /* @__PURE__ */jsx(ChildRoute, {});
        },
        SuspenseFallback: function () {
          return /* @__PURE__ */jsx("div", {
            "data-fallback": "nested"
          });
        }
      };
    }));
    var RootLayoutRoute = getQualifiedRouteComponent(createRouteNode("layout", "", "./_layout.tsx", function () {
      return {
        default: function () {
          return /* @__PURE__ */jsx(NestedLayoutRoute, {});
        },
        SuspenseFallback: function () {
          return /* @__PURE__ */jsx("div", {
            "data-fallback": "root"
          });
        }
      };
    }));
    var renderer;
    await act(async function () {
      renderer = TestRenderer.create(/* @__PURE__ */jsx(RootLayoutRoute, {}));
    });
    expect(renderer.root.findAllByProps({
      "data-fallback": "nested"
    })).toHaveLength(1);
    expect(renderer.root.findAllByProps({
      "data-fallback": "root"
    })).toHaveLength(0);
  });
  it("ignores a SuspenseFallback exported from a leaf route", async function () {
    var ChildRoute = getQualifiedRouteComponent(createRouteNode("spa", "profile", "./profile.tsx", function () {
      return {
        default: SuspendingRoute,
        SuspenseFallback: function () {
          return /* @__PURE__ */jsx("div", {
            "data-fallback": "leaf"
          });
        }
      };
    }));
    var renderer;
    await act(async function () {
      renderer = TestRenderer.create(/* @__PURE__ */jsx(ChildRoute, {}));
    });
    expect(renderer.root.findAllByProps({
      "data-fallback": "leaf"
    })).toHaveLength(0);
    expect(renderer.toJSON()).toBeNull();
  });
});
describe("ErrorBoundary route identity", function () {
  it("preserves page state across a re-render when the route exports ErrorBoundary", async function () {
    var mounts = 0;
    function Page() {
      var [count, setCount] = React.useState(0);
      React.useEffect(function () {
        mounts += 1;
      }, []);
      return /* @__PURE__ */jsx("button", {
        "data-count": count,
        onClick: function () {
          return setCount(function (value) {
            return value + 1;
          });
        },
        children: count
      });
    }
    function ErrorBoundary() {
      return /* @__PURE__ */jsx("div", {
        "data-error": "1"
      });
    }
    var Route = getQualifiedRouteComponent(createRouteNode("spa", "onboarding", "./auth/onboarding.tsx", function () {
      return {
        default: Page,
        ErrorBoundary
      };
    }));
    function Harness(param) {
      var {
        tick
      } = param;
      return /* @__PURE__ */jsx(Route, {
        tick
      });
    }
    var renderer;
    await act(async function () {
      renderer = TestRenderer.create(/* @__PURE__ */jsx(Harness, {
        tick: 0
      }));
    });
    var button = renderer.root.findByType("button");
    expect(button.props["data-count"]).toBe(0);
    await act(async function () {
      button.props.onClick();
    });
    expect(renderer.root.findByType("button").props["data-count"]).toBe(1);
    expect(mounts).toBe(1);
    await act(async function () {
      renderer.update(/* @__PURE__ */jsx(Harness, {
        tick: 1
      }));
    });
    expect(renderer.root.findByType("button").props["data-count"]).toBe(1);
    expect(mounts).toBe(1);
  });
  it("still renders the exported ErrorBoundary when the page throws", async function () {
    function Page() {
      throw new Error("boom");
    }
    function ErrorBoundary(param) {
      var {
        error
      } = param;
      return /* @__PURE__ */jsx("div", {
        "data-caught": error.message
      });
    }
    var Route = getQualifiedRouteComponent(createRouteNode("spa", "broken", "./broken.tsx", function () {
      return {
        default: Page,
        ErrorBoundary
      };
    }));
    var renderer;
    await act(async function () {
      renderer = TestRenderer.create(/* @__PURE__ */jsx(Route, {}));
    });
    expect(renderer.root.findByProps({
      "data-caught": "boom"
    })).toBeTruthy();
  });
});
//# sourceMappingURL=useScreens.test.native.js.map