Issue calling routeApi.useParams() in the vitest test #1575

surfer19 · 2024-05-09T14:20:03Z

surfer19
May 9, 2024

I'm having this kind of test. gives me this error. How it's possible it didn't found match when I'm defining it ?

if fails on this code inside component:

  const routeApi = getRouteApi("/patients/$patientId");
  const routeParams = routeApi.useParams(); // <--- fails

TestingLibraryElementError: Unable to find role="heading" and name `XYZ`

Ignored nodes: comments, script, style
<body>
  <div>
    <div
      style="padding: .5rem; max-width: 100%;"
    >
      <div
        style="display: flex; align-items: center; gap: .5rem;"
      >
        <strong
          style="font-size: 1rem;"
        >
          Something went wrong!
        </strong>
        <button
          style="appearance: none; font-size: .6em; border: 1px solid currentcolor; padding: .1rem .2rem; font-weight: bold; border-radius: .25rem;"
        >
          Hide Error
        </button>
      </div>
      <div
        style="height: .25rem;"
      />
      <div>
        <pre
          style="font-size: .7em; border: 1px solid red; border-radius: .25rem; padding: .3rem; color: red; overflow: auto;"
        >
          <code>
            Invariant failed: Could not find an active match from "/patients/$patientId"
          </code>
        </pre>
      </div>
    </div>
  </div>
</body>

import { describe, it, expect } from "vitest";
import { renderWithContext } from "src/utils/test-utils.tsx";

import { waitFor, screen } from "@testing-library/react";
import { PatientDetail } from "./PatientDetail";

describe("Test", () => {
  it("renders the main page title", async () => {
    const Component = () => <PatientDetail />;
    renderWithContext(Component);

    await waitFor(() =>
      expect(
        screen.getByRole("heading", {
          level: 1,
          name: /XYZ/i,
        })
      ).toBeInTheDocument()
    );
  });
});

That uses this utils:

import {
  Outlet,
  RouterProvider,
  createMemoryHistory,
  createRootRoute,
  createRoute,
  createRouter,
} from "@tanstack/react-router";
import { render } from "@testing-library/react";

function createTestRouter(component: () => JSX.Element) {
  const rootRoute = createRootRoute({
    component: Outlet,
  });

  const componentRoute = createRoute({
    getParentRoute: () => rootRoute,
    path: "/",

    component,
  });

  const testRoute = createRoute({
    getParentRoute: () => rootRoute,
    path: "/patients/$patientId",
    component,
  });

  const router = createRouter({
    routeTree: rootRoute.addChildren([componentRoute, testRoute]),
    history: createMemoryHistory(),
  });

  return router;
}

export function renderWithContext(component: () => JSX.Element) {
  const router = createTestRouter(component);
  return render(<RouterProvider router={router} />);
}

mbiesel · 2024-11-27T15:53:49Z

mbiesel
Nov 27, 2024

upvote, trying to test the same, but already getting here an error with the same code...

TypeError: Cannot read properties of undefined (reading 'addChildren')
67|
68| const router = createRouter({
69| routeTree: rootRoute.addChildren([componentRoute, testRoute]),
| ^
70| history: createMemoryHistory(),
71| });

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issue calling routeApi.useParams() in the vitest test #1575

{{title}}

Replies: 1 comment

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Issue calling routeApi.useParams() in the vitest test #1575

surfer19 May 9, 2024

Replies: 1 comment

mbiesel Nov 27, 2024

surfer19
May 9, 2024

mbiesel
Nov 27, 2024