Help with RemixStub

[ocean mortar]

I have a very basic file under /app/routes called hello.tsx with the following ```

export const loader = () => {
return json({data: 'hello'})
}

const Hello = () => {
const data = useLoaderData<typeof loader>();

return (
<div>{data.data}</div>
)
}

export default Hello

```import { createRemixStub } from "@remix-run/testing";
import {
 render,
 screen,
 waitFor,
} from "@testing-library/react";
import { expect, test, vi } from 'vitest'
import Hello from "../app/routes/hello"
import { json } from "@remix-run/node";

test("renders loader data", async () => {

 const RemixStub = createRemixStub([
   {
     path: "/hello",
     Component: () => <Hello />,
     loader() {
       return json({ data: "Hello" });
     },
   },
 ]);

 render(<RemixStub />);


 await waitFor(() => expect(screen.getByText("Hello")).toBeInTheDocument())
 }
)``` The test fails with this console error - ```No routes matched location "/" 
Error handled by React Router default ErrorBoundary: ErrorResponseImpl {
 status: 404,
 statusText: 'Not Found',
 internal: true,
 data: 'Error: No route matches URL "/"',
 error: Error: No route matches URL "/"
     at getInternalRouterError 
} ``` And i've been stuck for a while trying to work out whats causing this. Any ideas would be appreciated, thanks!

[prisma terrace]

You need to specificy the "location" that the stub should render at. By default, it's / which means your path: "/hello" won't match, and you see the 404 error. What you need to do is pass initialEntries to your stub, which represents the history stack. You can optionally pass initialIndex to set the point in the stack that sets the router's "current" location (it defaults to 0):

// Make all your routes match against "/hello" as the current location
render(<RemixStub initialEntries={["/hello"]} />);

alternatively, you can just set up your stub with path: "/" if you don't need anything from the URL in your test (like useParams() or the like)