router: error message + docs (#45)

* router: error message + docs

Author: atk

README.md

@@ -9,7 +9,7 @@ practices.</p>
 
 [![Coverage Status](https://coveralls.io/repos/github/ryansolid/solid-testing-library/badge.svg?branch=main)](https://coveralls.io/github/ryansolid/solid-testing-library?branch=main)
 [![NPM Version](https://img.shields.io/npm/v/@solidjs/testing-library.svg?style=flat)](https://www.npmjs.com/package/@solidjs/testing-library)
-[![](https://img.shields.io/npm/dm/solid-testing-library.svg?style=flat)](https://www.npmjs.com/package/solid-testing-library)
+[![NPM Downloads](https://img.shields.io/npm/dm/solid-testing-library.svg?style=flat)](https://www.npmjs.com/package/solid-testing-library)
 [![Discord](https://img.shields.io/discord/722131463138705510)](https://discord.com/invite/solidjs)
 
 </div>
@@ -27,10 +27,11 @@ practices.</p>
 
 ---
 
+
 ## The Problem
 
-You want to write tests for your Solid components so that they avoid including implementation
-details, and are maintainable in the long run.
+You want to write tests for your Solid components so that they avoid including implementation details, and are maintainable in the long run.
+
 
 ## The Solution
 
@@ -52,10 +53,12 @@ If you using Jest we recommend using [solid-jest](https://github.com/solidjs/sol
 💡 If you are using Jest or vitest, you may also be interested in installing `@testing-library/jest-dom` so you can use
 [the custom jest matchers](https://github.com/testing-library/jest-dom).
 
+
 ## Integration with Vite
 
 A working Vite template setup with `solid-testing-library` and TypeScript support can be found [here](https://github.com/solidjs/solid-start/tree/main/examples/with-vitest).
 
+
 ## Docs
 
 See the [docs](https://testing-library.com/docs/preact-testing-library/intro) over at the Testing Library website.
@@ -175,6 +178,7 @@ test("testEffect allows testing an effect asynchronously", () => {
 
 It allows running the effect inside a defined owner that is received as an optional second argument. This can be useful in combination with `renderHook`, which gives you an owner field in its result. The return value is a Promise with the value given to the `done()` callback. You can either await the result for further assertions or return it to your test runner.
 
+
 ## Issues
 
 If you find any issues, please [check on the issues page](https://github.com/solidjs/solid-testing-library/issues) if they are already known. If not, opening an issue will be much appreciated, even more so if it contains a
@@ -185,6 +189,38 @@ If you find any issues, please [check on the issues page](https://github.com/sol
 
 If you think you can fix an issue yourself, feel free to [open a pull-request](https://github.com/solidjs/solid-testing-library/pulls). If functionality changes, please don't forget to add or adapt tests.
 
+
+### Known issues
+
+If you are using [`vitest`](https://vitest.dev/), then tests might fail, because the packages `solid-js`, and `@solidjs/router` (if used) need to be loaded only once, and they could be loaded both through the internal `vite` server and through node. Typical bugs that happen because of this is that dispose is supposedly undefined, or the router could not be loaded.
+
+There are three ways you could attempt to work around this problem. If they work depends on your version of `vitest`, which version of `node-js` and what package manager you use (some of them change the way node resolves modules):
+
+```ts
+// this is inside your vite(st) config:
+{
+    test: {
+        deps: {
+            // 1nd way: remove the @solidjs/router part if you do not use it:
+            inline: [/solid-js/, /@solidjs\/router/],
+            // 2st way 
+            registerNodeLoader: false,
+        },
+        // 3rd way: alias the resolution
+        resolve: {
+            alias: {
+                "solid-js": "node_modules/solid-js/dist/dev.js",
+                // only needed if the router is used:
+                "@solidjs/router": "node_modules/@solidjs/router/index.jsx",
+            },
+        },
+    },
+}
+```
+
+At the moment of writing this, the 1st way seems to be the most reliable for the default solid template. Solid-start's vite plugin might need a different configuration.
+
+
 ## Acknowledgement
 
 Thanks goes to [Kent C. Dodds](https://kentcdodds.com/) and his colleagues for creating testing-library and to the creators of [preact-testing-library](https://github.com/testing-library/preact-testing-library).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidjs/testing-library",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "description": "Simple and complete Solid testing utilities that encourage good testing practices.",
   "type": "module",
   "main": "./dist/index.cjs",

src/__tests__/basic.tsx

@@ -185,38 +185,49 @@ test("renderDirective works for directives with argument", () => {
 
 test("testEffect allows testing an effect asynchronously", () => {
   const [value, setValue] = createSignal(0);
-  return testEffect(done => createEffect((run: number = 0) => {
-    if (run === 0) {
-      expect(value()).toBe(0);
-      setValue(1);
-    } else if (run === 1) {
-      expect(value()).toBe(1);
-      done();
-    }
-    return run + 1;
-  }));
+  return testEffect(done =>
+    createEffect((run: number = 0) => {
+      if (run === 0) {
+        expect(value()).toBe(0);
+        setValue(1);
+      } else if (run === 1) {
+        expect(value()).toBe(1);
+        done();
+      }
+      return run + 1;
+    })
+  );
 });
 
 test("testEffect catches errors", () => {
   const [value, setValue] = createSignal<{ error: string } | null>({ error: "not yet" });
-  return testEffect(done => createEffect((run: number = 0) => {
-    value()!.error;
-    if (run === 0) {
-      setValue(null);
-    } if (run === 1) {
-      done();
-    }
-    return run + 1;
-  }))
-    .then(() => { throw new Error("Error swallowed by testEffect!")})
+  return testEffect(done =>
+    createEffect((run: number = 0) => {
+      value()!.error;
+      if (run === 0) {
+        setValue(null);
+      }
+      if (run === 1) {
+        done();
+      }
+      return run + 1;
+    })
+  )
+    .then(() => {
+      throw new Error("Error swallowed by testEffect!");
+    })
     .catch((e: Error) => expect(e.name).toBe("TypeError"));
 });
 
 test("testEffect runs with owner", () => {
-  const [owner, dispose] = createRoot((dispose) => [getOwner(), dispose]);
-  return testEffect(done => createEffect(() => {
-    expect(getOwner()!.owner).toBe(owner);
-    dispose();
-    done();
-  }), owner!);
+  const [owner, dispose] = createRoot(dispose => [getOwner(), dispose]);
+  return testEffect(
+    done =>
+      createEffect(() => {
+        expect(getOwner()!.owner).toBe(owner);
+        dispose();
+        done();
+      }),
+    owner!
+  );
 });

src/__tests__/no-router.tsx

@@ -1,14 +1,15 @@
 import { render } from "..";
 
-describe("router functionality without a router", () => { 
+describe("router functionality without a router", () => {
   it("emits a helpful console.error message if you attempt to use the router without having it installed", async () => {
-    vi.mock('@solidjs/router', () => ({ default: {} }));
+    vi.mock("@solidjs/router", () => ({ default: {} }));
     const errorMock = vi.spyOn(console, "error");
     let errorMessage = "";
-    errorMock.mockImplementation((message) => { errorMessage = message; });
+    errorMock.mockImplementation(message => {
+      errorMessage = message;
+    });
     const { findByText } = render(() => <p>Anyhoo</p>, { location: "/" });
     await findByText("Anyhoo");
     expect(errorMessage).toMatch("@solidjs/router");
-  }); 
+  });
 });
-

src/index.ts

@@ -109,7 +109,7 @@ function render(ui: Ui, options: Options = {}): Result {
             };
           } catch (e) {
             console.error(
-              "It appears you want to use the location option without having @solidjs/router installed."
+              `Error attempting to initialize @solidjs/router:\n"${e.message || "unknown error"}"`
             );
             return { default: () => createComponent(wrappedUi, {}) };
           }

vitest.config.js

@@ -18,6 +18,6 @@ export default defineConfig({
     deps: { registerNodeLoader: false }
   },
   resolve: {
-    conditions: ["browser", "development"],
+    conditions: ["browser", "development"]
   }
 });