Whenever I create a test for a page that is not the / route, I get the error:

No routes matched location "/" 

Here is the tests code:

import { describe, expect, it } from 'vitest';

import { createRemixStub, render, screen } from '~/test/test-utils';

import NotFoundComponent from './not-found-component';

describe('NotFound component', () => {
  it('given a link: renders error messages and the correct link', async () => {
    const RemixStub = createRemixStub([
      {
        path: '/some-non-existent-page',
        element: <NotFoundComponent />,
      },
    ]);
    render(<RemixStub />);

    expect(
      screen.getByRole('heading', { level: 1, name: /not found/i }),
    ).toBeInTheDocument();
    expect(screen.getByRole('link', { name: /support/i })).toBeInTheDocument();
    expect(screen.getByRole('link', { name: /home/i })).toHaveAttribute(
      'href',
      '/',
    );
    expect(screen.getByRole('link', { name: /zing/i })).toHaveAttribute(
      'href',
      '/',
    );
  });
});

Is there any thing I'm configuring wrong? Or is this a bug in the package?

How can I get past this?

> tsc --noEmit

node_modules/@remix-run/router/history.ts:349:30 - error TS6133: 'window' is declared but its value is never read.

349   function createBrowserHref(window: Window, to: To) {
                                 ~~~~~~

node_modules/@remix-run/router/utils.ts:332:5 - error TS2322: Type 'AgnosticRouteMatch<string, RouteObjectType>[] | null' is not assignable to type 'null'.
  Type 'AgnosticRouteMatch<string, RouteObjectType>[]' is not assignable to type 'null'.

332     matches = matchRouteBranch<string, RouteObjectType>(
        ~~~~~~~

node_modules/@remix-run/router/utils.ts:1149:31 - error TS6133: 'v' is declared but its value is never read.

1149     this.pendingKeys.forEach((v, k) => this.pendingKeys.delete(k));
                                   ~


Found 3 errors in 2 files.

Errors  Files
     1  node_modules/@remix-run/router/history.ts:349
     2  node_modules/@remix-run/router/utils.ts:332
ERROR: "test:types" exited with 2.

I've got prefetch="intent" on many Link components and that throws an exception if I hover over the <Link /> Is it possible to mock it? Base case I don't think we'd want it to fetch data or do anything so () => void is what we want I imagine? What's the method for dealing with Link components atm?

First of all, thanks for this implementation it makes my life extremely easy mocking out my remix components.

When mocking out components that useFetcher, after calling fetcher.load(route), the fetcher.data returns "[object Object]" as a string, and the data that is being provided to the route in the stub, with the loader being mocked out, is not sent correctly to fetchers.

Is there any solution to this?

After updating Remix to the version 1.12.0 the stub doesn't work anymore as the interfaces have changed and TS is complaing about some type '{ actionData: RouteData | undefined; appState: { trackBoundaries: boolean; trackCatchBoundaries: boolean; catchBoundaryRouteId: null; renderBoundaryRouteId: null; loaderBoundaryRouteId: null; error: undefined; catch: undefined; }; matches: { ...; }[]; routeData: RouteData; manifest: AssetsManifest; routeModules: Rou...' is not assignable to type 'EntryContext'. Object literal may only specify known properties, and 'actionData' does not exist in type 'EntryContext' used in createRemixContext function.

Have you already tried the unstable @remix-run/testing? package?

Hi,

I understand this is an implementation of an existing RFC, but I did want to understand if there was an expectation of how to render a component with loader data, but expecting this data to be loaded from the route's loader?

Would it be possible to provide a await RemixStub.load() which can be called in tests to simulate how remix would load the initial data, instead of this being passed in?

I would imagine the reasoning for passing initialLoaderData was because loaders are async and thus need to be "fetched" before the render can take place.

A test might look like

const RemixStub = createRemixStub([{..., loader: () => ["some response"]}])
await RemixStub.load({initialEntries: [...]}); // initial entries used to decide what loaders to call

render(<RemixStub />