Only the first submit button in a `Form` is triggered in vitest component tests

[Geb-algebra]

I'm using React Router as a...

framework

Reproduction

Go to https://stackblitz.com/~/github.com/Geb-algebra/repro-top-submit-btn-being-always-pushed-on-vitest and run npm run test. A test will run and succeeded but the test is expected to be failed

System Info

System:
    OS: macOS 14.0
    CPU: (8) arm64 Apple M1
    Memory: 96.97 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nodebrew/current/bin/node
    npm: 10.9.2 - ~/.nodebrew/current/bin/npm
  Browsers:
    Brave Browser: 131.1.73.104
    Chrome: 131.0.6778.205
    Safari: 17.0
  npmPackages:
    @react-router/dev: ^7.1.1 => 7.1.1
    @react-router/node: ^7.1.1 => 7.1.1
    @react-router/serve: ^7.1.1 => 7.1.1
    react-router: ^7.1.1 => 7.1.1
    vite: ^5.4.11 => 5.4.11

Used Package Manager

npm

Expected Behavior

The test should fail.

The tested component has two submit buttons with different values: A and B.
When a user clicks the "Submit X" button (either A or B), the expected behavior is for the app to display:
The submitted value is X.

In the test, the "Submit B" button is clicked, but the test asserts that The submitted value is A is displayed.
This assertion is incorrect, and the test is expected to fail.

Actual Behavior

The test passes unexpectedly.

In the test environment using createRoutesStub and Vitest, the application always displays:
The submitted value is A, regardless of whether the A or B button is clicked.

However, in the real application (started with npm run dev), the behavior works as expected.

Additionally: If the order of the buttons is reversed in app/routes/Home.tsx (placing the "Submit B" button above "Submit A"), the test always displays: The submitted value is B.