Why Does Cypress Not Properly Redirect Whenever Using React Router's useSubmit?

[manavm1990]

I am using: "react-router-dom": "^6.21.0". I am using Cypress E2E testing ✅.

For 'create' in the 'real app:'

POST /contacts 201 52.439 ms - 101
GET /contacts 200 19.031 ms - -

and for Cypress:

GET /contacts 200 8.011 ms - -
GET /__cypress/runner/fonts/fa-solid-900.woff2 200 3.045 ms - 126828
GET /__cypress/runner/fonts/fa-regular-400.woff2 200 5.504 ms - 23900
GET /__/fonts/FiraCode-VF.woff2 200 5.409 ms - -
OPTIONS /contacts 204 4.064 ms - -
POST /contacts 201 2.391 ms - -
GET /contacts 200 3.899 ms - -

And, now for 'edit' in 'real app:'

GET /contacts 304 19.138 ms - -
GET /contacts/5a8a0f6a-94e2-4c64-abd7-c09823cdd243 304 4.551 ms - -
PUT /contacts/5a8a0f6a-94e2-4c64-abd7-c09823cdd243 200 27.847 ms - 147
GET /contacts 200 19.107 ms - -

and for Cypress 'edit:'

GET /contacts 200 5.519 ms - -
GET /__cypress/runner/fonts/fa-solid-900.woff2 200 0.884 ms - 126828
GET /__cypress/runner/fonts/fa-regular-400.woff2 200 0.751 ms - 23900
GET /contacts/8ce2eb95-8cb0-4706-81fa-5633510dcc69 200 7.680 ms - -
GET /ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/41.jpg 200 54.926 ms - -
OPTIONS /contacts/8ce2eb95-8cb0-4706-81fa-5633510dcc69 204 1.623 ms - -
PUT /contacts/8ce2eb95-8cb0-4706-81fa-5633510dcc69 200 2.367 ms - -
GET /contacts 200 3.498 ms - -

The point is that Cypress appear in sync, right?

Now, how about delete?

For 'delete' in the 'real app:'

GET /contacts 304 30.084 ms - -
GET /contacts/7750b438-c061-4c4b-b013-ca5074f45d0a 304 5.622 ms - -
DELETE /contacts/7750b438-c061-4c4b-b013-ca5074f45d0a 200 14.579 ms - 2
GET /contacts 200 32.297 ms - -

BUT with Cypress:

GET /contacts 200 5.740 ms - -
GET /contacts/8ce2eb95-8cb0-4706-81fa-5633510dcc69 200 16.596 ms - -
OPTIONS /contacts/8ce2eb95-8cb0-4706-81fa-5633510dcc69 204 2.550 ms - -
DELETE /contacts/8ce2eb95-8cb0-4706-81fa-5633510dcc69 204 3.271 ms - -
GET /contacts/8ce2eb95-8cb0-4706-81fa-5633510dcc69 200 6.318 ms - -

There is a discrepancy! It doesn't go back to: GET /contacts 200 3.498 ms - - after DELETE, does it? 👎🏾

'Create' and 'Edit' use a <Form with a "submit" button:

<Form
      className="flex flex-col items-center justify-center gap-y-4"
      method={contact2Edit ? "PUT" : "POST"}
    >
      <input type="hidden" name="id" value={contact2Edit?.id} />
      <TextInput
        id="name"
        label="Name"
        required={true}
        defaultValue={contact2Edit?.name}
      />
      <TextInput id="email" label="Email" defaultValue={contact2Edit?.email} />
      <TextInput
        id="tel"
        label="Phone Number"
        required={true}
        defaultValue={contact2Edit?.tel}
      />
      <button
        type="submit"
        className="rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
      >
        Save
      </button>

However, 'delete' 'simulates' the submission outside of a form by using useSubmit:

<button
        className="mt-4 text-red-500 hover:underline"
        disabled={navigation.state !== "idle"}
        onClick={() => {
          submit2Router({ id: contact.id }, { method: "DELETE" });
        }}
      >
        Delete
      </button>

In either case, the actions have appropriate redirects:

case "POST": {
        await apiService.create(Object.fromEntries(fd));
        return redirect("/");
      }

      case "PUT": {
        await apiService.update(fd.get("id"), Object.fromEntries(fd));
        return redirect("/");
      }

      case "DELETE": {
        await apiService.delete(fd.get("id"));
        return redirect("/");
      }

The imperative version of

that lets you, the programmer, submit a form instead of the user.
This feature only works if using a data router, see Picking a Router
Source.

In v6.4, new routers were introduced that support the new data APIs:
createBrowserRouter
Source

Conclusion?

Cypress is not correctly handling redirects with useSubmit as compared with type="submit"