You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
createRemixStub should mock the loader/actions, allow us to access useLoaderData, useActionData data and run the test without any errors. Again we are able to accomplish this with createMemoryRouter but we would like to use createRemixStub
Actual Behavior
Ignored nodes: comments, script, style
<body>
<div>
<h2>
Unexpected Application Error!
</h2>
<h3
style="font-style: italic;"
>
useLoaderData must be used within a data router. See https://reactrouter.com/routers/picking-a-router.
</h3>
<pre
style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
>
Error: useLoaderData must be used within a data router. See https://reactrouter.com/routers/picking-a-router.
at Object.invariant [as UNSAFE_invariant] (/home/system-1/Documents/work/testing/testing-branch-dec31/nuflorist-official/node_modules/@remix-run/router/history.ts:494:11)
at useDataRouterState (/home/system-1/Documents/work/testing/testing-branch-dec31/nuflorist-official/node_modules/react-router/lib/hooks.tsx:876:3)
at Object.useLoaderData (/home/system-1/Documents/work/testing/testing-branch-dec31/nuflorist-official/node_modules/react-router/lib/hooks.tsx:947:15)
at Proxy.useLoaderData (/home/system-1/Documents/work/testing/testing-branch-dec31/nuflorist-official/node_modules/@remix-run/react/dist/components.js:760:25)
at Occasions (/home/system-1/Documents/work/testing/testing-branch-dec31/nuflorist-official/app/routes/app.occasions._index/route.tsx:26:57)
at renderWithHooks (/home/system-1/Documents/work/testing/testing-branch-dec31/nuflorist-official/node_modules/react-dom/cjs/react-dom.development.js:15486:18)
at mountIndeterminateComponent (/home/system-1/Documents/work/testing/testing-branch-dec31/nuflorist-official/node_modules/react-dom/cjs/react-dom.development.js:20103:13)
at beginWork (/home/system-1/Documents/work/testing/testing-branch-dec31/nuflorist-official/node_modules/react-dom/cjs/react-dom.development.js:21626:16)
at beginWork$1 (/home/system-1/Documents/work/testing/testing-branch-dec31/nuflorist-official/node_modules/react-dom/cjs/react-dom.development.js:27465:14)
at performUnitOfWork (/home/system-1/Documents/work/testing/testing-branch-dec31/nuflorist-official/node_modules/react-dom/cjs/react-dom.development.js:26599:12)
</pre>
<p>
💿 Hey developer 👋
</p>
<p>
You can provide a way better UX than this when your app throws errors by providing your own
<code
style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
>
ErrorBoundary
</code>
or
<code
style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
>
errorElement
</code>
prop on your route.
</p>
<div
id="PolarisPortalsContainer"
/>
</div>
</body>
Ignored nodes: comments, script, style
<body>
<div>
<h2>
Unexpected Application Error!
</h2>
<h3
style="font-style: italic;"
>
useLoaderData must be used within a data router. See https://reactrouter.com/routers/picking-a-router.
</h3>
<pre
style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
>
Error: useLoaderData must be used within a data router. See https://reactrouter.com/routers/picking-a-router.
at Object.invariant [as UNSAFE_invariant] (/home/system-1/Documents/work/testing/testing-branch-dec31/nuflorist-official/node_modules/@remix-run/router/history.ts:494:11)
at useDataRouterState (/home/system-1/Documents/work/testing/testing-branch-dec31/nuflorist-official/node_modules/react-router/lib/hooks.tsx:876:3)
at Object.useLoaderData (/home/system-1/Documents/work/testing/testing-branch-dec31/nuflorist-official/node_modules/react-router/lib/hooks.tsx:947:15)
at Proxy.useLoaderData (/home/system-1/Documents/work/testing/testing-branch-dec31/nuflorist-official/node_modules/@remix-run/react/dist/components.js:760:25)
at Occasions (/home/system-1/Documents/work/testing/testing-branch-dec31/nuflorist-official/app/routes/app.occasions._index/route.tsx:26:57)
at renderWithHooks (/home/system-1/Documents/work/testing/testing-branch-dec31/nuflorist-official/node_modules/react-dom/cjs/react-dom.development.js:15486:18)
at mountIndeterminateComponent (/home/system-1/Documents/work/testing/testing-branch-dec31/nuflorist-official/node_modules/react-dom/cjs/react-dom.development.js:20103:13)
at beginWork (/home/system-1/Documents/work/testing/testing-branch-dec31/nuflorist-official/node_modules/react-dom/cjs/react-dom.development.js:21626:16)
at beginWork$1 (/home/system-1/Documents/work/testing/testing-branch-dec31/nuflorist-official/node_modules/react-dom/cjs/react-dom.development.js:27465:14)
at performUnitOfWork (/home/system-1/Documents/work/testing/testing-branch-dec31/nuflorist-official/node_modules/react-dom/cjs/react-dom.development.js:26599:12)
</pre>
<p>
💿 Hey developer 👋
</p>
<p>
You can provide a way better UX than this when your app throws errors by providing your own
<code
style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
>
ErrorBoundary
</code>
or
<code
style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
>
errorElement
</code>
prop on your route.
</p>
<div
id="PolarisPortalsContainer"
/>
</div>
</body>
❯ Object.invariant [as UNSAFE_invariant] node_modules/@remix-run/router/history.ts:494:11
❯ useDataRouterState node_modules/react-router/lib/hooks.tsx:876:3
❯ Object.useLoaderData node_modules/react-router/lib/hooks.tsx:947:15
❯ Proxy.useLoaderData node_modules/@remix-run/react/dist/components.js:760:25
❯ Occasions app/routes/app.occasions._index/route.tsx:26:57
24| export default function Occasions() {
25| console.log('-------------------------Occasions UI-------------------------');
26| const { payload: loaderData, errors: loaderErrors } = useLoaderData<typeof loader>();
| ^
27| console.log(loaderData, 'loaderData');
28| const { errors: actionErrors, payload: actionPayload, code: actionCode } = useActionData<typeof action>() || {};
The text was updated successfully, but these errors were encountered:
Reproduction
We have a shopify remix app where we are implementing integration tests to mock behavior from backend to frontend.
I'm using createRemixStub to mock the loader/actions in my routes and I'm also using using Vitest for testing.
We are getting this error when running the test:
Error: useLoaderData must be used within a data router. See https://reactrouter.com/routers/picking-a-router.
As an alternative we are using createMemoryRouter and RouterProvider to have access to useLoaderData, etc.
System Info
Used Package Manager
npm
Expected Behavior
createRemixStub should mock the loader/actions, allow us to access useLoaderData, useActionData data and run the test without any errors. Again we are able to accomplish this with createMemoryRouter but we would like to use createRemixStub
Actual Behavior
The text was updated successfully, but these errors were encountered: