Merge pull request #42 from solidjs/router-fix

fix router setup

Author: atk

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidjs/testing-library",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "Simple and complete Solid testing utilities that encourage good testing practices.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -57,10 +57,10 @@
     "report:coverage": "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js && rm -rf ./coverage"
   },
   "dependencies": {
-    "@solidjs/router": "^0.8.2",
     "@testing-library/dom": "^9.3.0"
   },
   "devDependencies": {
+    "@solidjs/router": "^0.8.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/user-event": "^14.4.3",
     "@vitest/coverage-c8": "^0.32.2",

package.json

@@ -10,9 +10,9 @@ describe("location option", () => {
     </Routes>
   );
 
-  it("can render the main route", () => {
-    const { getByText } = render(() => <App />, { location: "/" });
-    expect(getByText("Start")).not.toBeFalsy();
+  it("can render the main route", async () => {
+    const { findByText } = render(() => <App />, { location: "/" });
+    expect(await findByText("Start")).not.toBeFalsy();
   });
 
   it("can render a route with the id", async () => {

src/__tests__/routes.tsx

@@ -1,20 +1,18 @@
 import { getQueriesForElement, prettyDOM } from "@testing-library/dom";
 import {
   Accessor,
-  children,
   createComponent,
   createRoot,
   createSignal,
   getOwner,
+  lazy,
   onError,
   onMount,
   Owner,
-  runWithOwner,
+  runWithOwner
 } from "solid-js";
 import { hydrate as solidHydrate, render as solidRender } from "solid-js/web";
 
-import { Router, Navigate, memoryIntegration, useParams } from "@solidjs/router";
-
 import type {
   Ui,
   Result,
@@ -86,19 +84,36 @@ function render(ui: Ui, options: Options = {}): Result {
           })
       : ui;
 
-  const routedUi: Ui = () => {
-    return !location ? wrappedUi() : createComponent(Router, {
-      get children() {
-        return [
-          createComponent(Navigate, { href: location || "" }),
-          createComponent(wrappedUi, {})
-        ]
-      },
-      get source() {
-        return memoryIntegration();
-      }
-    });
-  };
+  const routedUi: Ui =
+    typeof location === "string"
+      ? lazy(async () => {
+          try {
+            const { memoryIntegration, useNavigate, Router } = await import("@solidjs/router");
+            return {
+              default: () =>
+                createComponent(Router, {
+                  get children() {
+                    return [
+                      createComponent(
+                        () => (useNavigate()(location || "", { replace: true, scroll: false }), null),
+                        {}
+                      ),
+                      createComponent(wrappedUi, {})
+                    ];
+                  },
+                  get source() {
+                    return memoryIntegration();
+                  }
+                })
+            };
+          } catch (e) {
+            console.error(
+              "It appears you want to use the location option without having @solidjs/router installed."
+            );
+            return { default: () => createComponent(wrappedUi, {}) };
+          }
+        })
+      : wrappedUi;
 
   const dispose = hydrate
     ? (solidHydrate(routedUi, container) as unknown as () => void)