Issue with router rendering in @solidjs/testing-library

Eugeniocalabresi commented 8 months ago

Issue with router rendering in @solidjs/testing-library

I'm encountering an issue with @solidjs/route rendering when using @solidjs/testing-library to test my AppRouter component.

Package versions

"vitest": "^1.3.1"
"@solidjs/testing-library": "~0.8.6"

Code

My AppRouter component is as follows:

import { Show } from "solid-js";
import { Router } from "@solidjs/router";
import NotAuthRoute from "./NotAuthRoute";
import AuthRoute from "./AuthRoute";
import Authentication from "../stores/Authentication/Authentication";

const AppRouter = () => {

  const { loggedIn } = Authentication;

  return (
    <Router>
      <Show when={loggedIn()} fallback={<NotAuthRoute />} >
        <AuthRoute />
      </Show>
    </Router >
  );

};

export default AppRouter;

My NotAuthRoute component is as follows:

import { Route, Navigate } from "@solidjs/router";
import { Component } from "solid-js";

const NotAuthRoute: Component = () => {

  return (
    <div data-testid="notAuthRoute">
      <Route path="/" component={() => <Navigate href="/login" />} />
      <Route path="/login" component={() => <div data-testid="login">{"Login"}</div>} />
    </div>
  );

};

export default NotAuthRoute;

And my test is as follows:

import { describe, expect, test, vi } from "vitest";
import { render, screen, waitFor } from "@solidjs/testing-library";
import AppRouter from "./Router";

describe(
  "Router",
  () => {

    test(
      "renders notAuthRoute if loggedIn signal in are true",
      async () => {

        const { debug } = render(
          () => <AppRouter />
        );

        debug();

        const notAuthRoute = await waitFor(() => screen.findByTestId("notAuthRoute"));

        console.log(
          "notAuthRoute",
          notAuthRoute
        );
        expect(notAuthRoute).toBeInTheDocument();

      }
    );

  }
);

Error

When I run my test, I receive the following error:


 RUN  v1.3.1

stderr | file:/workspaces/***/node_modules/solid-js/dist/dev.js:1932:13
You appear to have multiple instances of Solid. This can lead to unexpected behavior.

stdout | src/router/Router.test.tsx > Router > renders notAuthRoute if loggedIn signal in are true
<body>
  <div />
</body>

stderr | src/router/Router.test.tsx > Router > renders notAuthRoute if loggedIn signal in are true
computations created outside a `createRoot` or `render` will never be disposed
Unrecognized value. Skipped inserting { path: '/', component: [Function: component], children: [Getter] }
Unrecognized value. Skipped inserting {
  path: '/login',
  component: [Function: component],
  children: [Getter]
}

 ❯ src/router/Router.test.tsx (1) 1034ms
   ❯ Router (1) 1033ms
     × renders notAuthRoute if loggedIn signal in are true 1033ms

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/router/Router.test.tsx > Router > renders notAuthRoute if loggedIn signal in are true
Error: Timed out in waitFor.

Ignored nodes: comments, script, style
<html>
  <head />
  <body>
    <div />
  </body>
</html>
 ❯ Module.waitFor node_modules/@testing-library/dom/dist/wait-for.js:163:27
 ❯ src/router/Router.test.tsx:19:36
     17|         debug();
     18| 
     19|         const notAuthRoute = await waitFor(() => screen.findByTestId("notAuthRoute"));
       |                                    ^
     20| 
     21|         console.log(

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

 Test Files  1 failed (1)
      Tests  1 failed (1)
   Start at  17:03:22
   Duration  2.93s (transform 774ms, setup 102ms, collect 651ms, tests 1.03s, environment 346ms, prepare 434ms)

atk commented 8 months ago

Are you maybe using npm instead of pnpm? The latter might be a workaround for that issue until my PR for vite-plugin-solid is integrated.

That being said, the issue is not in our testing-library, but in the aforementioned plugin.

Eugeniocalabresi commented 8 months ago

I am currently using yarn@4.1.0. Are you aware of any problems or incompatibilities with this package manager as well?

atk commented 8 months ago

I only tested npm and pnpm. I'll try to test yarn too soon, but I expect it to have similar issues than npm.

atk commented 8 months ago

Yarn seems to have had the same issues. Update your vite-plugin-solid, this should resolve the issue.

Eugeniocalabresi commented 8 months ago

Great! thanks for your help.

solidjs / solid-testing-library