React Router Future Flag Warnings when rendering components with createRemixStub in @remix-run/testing

[davidhousedev]

I'm integrating createRemixStub into a new project and am seeing a bunch of feature flag warnings when running tests that I can't figure out how to silence. Has anyone else encountered this?

⚠️ React Router Future Flag Warning: React Router will begin wrapping state updates in `React.startTransition` in v7. You can use the `v7_startTransition` future flag to opt-in early. For more information, see https://reactrouter.com/v6/upgrading/future#v7_starttransition.
⚠️ React Router Future Flag Warning: Relative route resolution within Splat routes is changing in v7. You can use the `v7_relativeSplatPath` future flag to opt-in early. For more information, see https://reactrouter.com/v6/upgrading/future#v7_relativesplatpath.
⚠️ React Router Future Flag Warning: The persistence behavior of fetchers is changing in v7. You can use the `v7_fetcherPersist` future flag to opt-in early. For more information, see https://reactrouter.com/v6/upgrading/future#v7_fetcherpersist.
⚠️ React Router Future Flag Warning: Casing of `formMethod` fields is being normalized to uppercase in v7. You can use the `v7_normalizeFormMethod` future flag to opt-in early. For more information, see https://reactrouter.com/v6/upgrading/future#v7_normalizeformmethod.
⚠️ React Router Future Flag Warning: `RouterProvider` hydration behavior is changing in v7. You can use the `v7_partialHydration` future flag to opt-in early. For more information, see https://reactrouter.com/v6/upgrading/future#v7_partialhydration.
⚠️ React Router Future Flag Warning: The revalidation behavior after 4xx/5xx `action` responses is changing in v7. You can use the `v7_skipActionErrorRevalidation` future flag to opt-in early. For more information, see https://reactrouter.com/v6/upgrading/future#v7_skipactionerrorrevalidation.

I'm using "@remix-run/react": "^2.7.1" and "@remix-run/testing": "^2.14.0"

[mollzilla]

Yup, a bunch of behaviour is changing. You can update your code and opt in on the flags as you see fit https://reactrouter.com/en/6.28.0/upgrading/future#v7_skipactionerrorrevalidation

[xissy]

I am seeing only remix v3 future flags on createRemixStub's future config. Wondering if there is a way to enable the react-router v7 future flags with RemixStub.

[RenzoAlessandro]

These settings worked for me:
App.jsx:

index.jsx (BrowserRoute):

[mrjohnr]

can you post the code instead of a pictures?thanks

[RenzoAlessandro]

future: {
v7_fetcherPersist: true,
v7_normalizeFormMethod: true,
v7_partialHydration: true,
v7_relativeSplatPath: true,
v7_skipActionErrorRevalidation: true,
v7_startTransition: true,
}

[mohammadshahidbeigh]

<Router
future={{
v7_startTransition: true,
v7_relativeSplatPath: true,
}}

You can try this on your App.tsx component.

[19Vin70]

Thank you so much.

[mohammadshahidbeigh]

You're Welcome!

[helloyanis]

Here is the documentation about this

---

In short, add the following in your code, depending on what you use

<BrowserRouter
  future={{
    v7_startTransition: true,
  }}
/>

Or, if you use Router Provider,

<RouterProvider
  future={{
    v7_startTransition: true,
  }}
/>

---

You will also need to add the following to your createBrowserRouter

createBrowserRouter(routes, {
  future: {
    v7_fetcherPersist: true,
    v7_normalizeFormMethod: true,
    v7_partialHydration: true,
    v7_relativeSplatPath: true,
    v7_skipActionErrorRevalidation: true,
    v7_startTransition: true,
    }
});

These are all the v7 flags. You may not need all of them depending on your app, but I've added them all just to be safe.