one/dist/cjs/router/useScreens.test.cjs

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

var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
      get: () => from[key],
      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
    });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
  value: mod,
  enumerable: true
}) : target, mod));
var import_react = __toESM(require("react"), 1);
var import_react_test_renderer = __toESM(require("react-test-renderer"), 1);
var import_vitest = require("vitest");
var import_useScreens = require("./useScreens.cjs");
var import_jsx_runtime = require("react/jsx-runtime");
const pendingRoute = new Promise(() => {});
const previousTarget = "web";
const previousSuspendRoutesNative = process.env.ONE_SUSPEND_ROUTES_NATIVE;
const previousDisableSuspense = globalThis.__ONE_DISABLE_SUSPENSE_ROUTES__;
function createRouteNode(type, route, contextKey, loadRoute) {
  return {
    type,
    route,
    contextKey,
    loadRoute,
    children: [],
    dynamic: null
  };
}
function SuspendingRoute() {
  throw pendingRoute;
}
(0, import_vitest.beforeEach)(() => {
  process.env.TAMAGUI_TARGET = "native";
  delete process.env.ONE_SUSPEND_ROUTES_NATIVE;
  delete globalThis.__ONE_DISABLE_SUSPENSE_ROUTES__;
});
(0, import_vitest.afterEach)(() => {
  if (previousTarget === void 0) delete "web";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;
});
(0, import_vitest.describe)("route SuspenseFallback", () => {
  (0, import_vitest.it)("inherits the layout fallback and passes the suspended route details", async () => {
    const childNode = createRouteNode("spa", "profile/[id]", "./(app)/profile/[id].tsx", () => {
      throw pendingRoute;
    });
    const ChildRoute = (0, import_useScreens.getQualifiedRouteComponent)(childNode);
    const layoutNode = createRouteNode("layout", "(app)", "./(app)/_layout.tsx", () => ({
      default: () => /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChildRoute, {
        route: {
          params: {
            id: "123"
          }
        }
      }),
      SuspenseFallback: ({
        route,
        params
      }) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
        "data-fallback": "layout",
        children: [route, ":", params.id]
      })
    }));
    const LayoutRoute = (0, import_useScreens.getQualifiedRouteComponent)(layoutNode);
    let renderer;
    await (0, import_react_test_renderer.act)(async () => {
      renderer = import_react_test_renderer.default.create(/* @__PURE__ */(0, import_jsx_runtime.jsx)(LayoutRoute, {}));
    });
    (0, import_vitest.expect)(renderer.root.findByProps({
      "data-fallback": "layout"
    }).children).toEqual(["./(app)/profile/[id].tsx", ":", "123"]);
  });
  (0, import_vitest.it)("uses the nearest layout fallback", async () => {
    const childNode = createRouteNode("spa", "profile", "./(app)/profile.tsx", () => ({
      default: SuspendingRoute
    }));
    const ChildRoute = (0, import_useScreens.getQualifiedRouteComponent)(childNode);
    const nestedLayoutNode = createRouteNode("layout", "(app)", "./(app)/_layout.tsx", () => ({
      default: () => /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChildRoute, {}),
      SuspenseFallback: () => /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
        "data-fallback": "nested"
      })
    }));
    const NestedLayoutRoute = (0, import_useScreens.getQualifiedRouteComponent)(nestedLayoutNode);
    const rootLayoutNode = createRouteNode("layout", "", "./_layout.tsx", () => ({
      default: () => /* @__PURE__ */(0, import_jsx_runtime.jsx)(NestedLayoutRoute, {}),
      SuspenseFallback: () => /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
        "data-fallback": "root"
      })
    }));
    const RootLayoutRoute = (0, import_useScreens.getQualifiedRouteComponent)(rootLayoutNode);
    let renderer;
    await (0, import_react_test_renderer.act)(async () => {
      renderer = import_react_test_renderer.default.create(/* @__PURE__ */(0, import_jsx_runtime.jsx)(RootLayoutRoute, {}));
    });
    (0, import_vitest.expect)(renderer.root.findAllByProps({
      "data-fallback": "nested"
    })).toHaveLength(1);
    (0, import_vitest.expect)(renderer.root.findAllByProps({
      "data-fallback": "root"
    })).toHaveLength(0);
  });
  (0, import_vitest.it)("ignores a SuspenseFallback exported from a leaf route", async () => {
    const childNode = createRouteNode("spa", "profile", "./profile.tsx", () => ({
      default: SuspendingRoute,
      SuspenseFallback: () => /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
        "data-fallback": "leaf"
      })
    }));
    const ChildRoute = (0, import_useScreens.getQualifiedRouteComponent)(childNode);
    let renderer;
    await (0, import_react_test_renderer.act)(async () => {
      renderer = import_react_test_renderer.default.create(/* @__PURE__ */(0, import_jsx_runtime.jsx)(ChildRoute, {}));
    });
    (0, import_vitest.expect)(renderer.root.findAllByProps({
      "data-fallback": "leaf"
    })).toHaveLength(0);
    (0, import_vitest.expect)(renderer.toJSON()).toBeNull();
  });
});
(0, import_vitest.describe)("ErrorBoundary route identity", () => {
  (0, import_vitest.it)("preserves page state across a re-render when the route exports ErrorBoundary", async () => {
    let mounts = 0;
    function Page() {
      const [count, setCount] = import_react.default.useState(0);
      import_react.default.useEffect(() => {
        mounts += 1;
      }, []);
      return /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
        "data-count": count,
        onClick: () => setCount(value => value + 1),
        children: count
      });
    }
    function ErrorBoundary() {
      return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
        "data-error": "1"
      });
    }
    const node = createRouteNode("spa", "onboarding", "./auth/onboarding.tsx", () => ({
      default: Page,
      ErrorBoundary
    }));
    const Route = (0, import_useScreens.getQualifiedRouteComponent)(node);
    function Harness({
      tick
    }) {
      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Route, {
        tick
      });
    }
    let renderer;
    await (0, import_react_test_renderer.act)(async () => {
      renderer = import_react_test_renderer.default.create(/* @__PURE__ */(0, import_jsx_runtime.jsx)(Harness, {
        tick: 0
      }));
    });
    const button = renderer.root.findByType("button");
    (0, import_vitest.expect)(button.props["data-count"]).toBe(0);
    await (0, import_react_test_renderer.act)(async () => {
      button.props.onClick();
    });
    (0, import_vitest.expect)(renderer.root.findByType("button").props["data-count"]).toBe(1);
    (0, import_vitest.expect)(mounts).toBe(1);
    await (0, import_react_test_renderer.act)(async () => {
      renderer.update(/* @__PURE__ */(0, import_jsx_runtime.jsx)(Harness, {
        tick: 1
      }));
    });
    (0, import_vitest.expect)(renderer.root.findByType("button").props["data-count"]).toBe(1);
    (0, import_vitest.expect)(mounts).toBe(1);
  });
  (0, import_vitest.it)("still renders the exported ErrorBoundary when the page throws", async () => {
    function Page() {
      throw new Error("boom");
    }
    function ErrorBoundary({
      error
    }) {
      return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
        "data-caught": error.message
      });
    }
    const node = createRouteNode("spa", "broken", "./broken.tsx", () => ({
      default: Page,
      ErrorBoundary
    }));
    const Route = (0, import_useScreens.getQualifiedRouteComponent)(node);
    let renderer;
    await (0, import_react_test_renderer.act)(async () => {
      renderer = import_react_test_renderer.default.create(/* @__PURE__ */(0, import_jsx_runtime.jsx)(Route, {}));
    });
    (0, import_vitest.expect)(renderer.root.findByProps({
      "data-caught": "boom"
    })).toBeTruthy();
  });
});