testing-library/react-testing-library

userEvent.keyboard('{Enter}') does not trigger form submission in forms with radio group elements

Closed this issue · 1 comments

  • @testing-library/react version: 16.2.0
  • Testing Framework and version:
    • vitest version: 2.1.2
    • @vitest/ui version: 2.1.2
    • @vitest/coverage-v8 version: 2.1.2
    • @vitejs/plugin-react version: 4.3.2
  • DOM Environment:
    • jsdom version: 24.1.1

Relevant code or config:

<div>
      {showSuccess ? (
        'success'
      ) : (
        <form name="myform" onSubmit={handleSubmit}>
          <label htmlFor="search">Search</label>
          <input type="text" name="search" id="search" />

          {/* // Comment the below code to make test case pass */}
          <div>
            <label>Gender</label>
            <input type="radio" name="gender" value="male" />
            <input type="radio" name="gender" value="female" />
          </div>
        </form>
      )}
</div>
describe('Test Suite', () => {
  test('Test', async () => {
    render(<App />);
    const user = userEvent.setup();
    const input = screen.getByLabelText('Search');

    await user.type(input, 'test');
    await user.keyboard('{Enter}');
    expect(screen.queryByRole('form')).not.toBeInTheDocument();
  });
});

What you did:

  • I attempted to submit the form by using userEvent.keyboard('{Enter}').

What happened:

  • userEvent.keyboard('{Enter}') does not trigger form submission

Reproduction:

https://stackblitz.com/edit/rtl-template-dg4qziej?file=vite.config.ts

Problem description:

Issue: userEvent.keyboard('{Enter}') does not trigger form submission when the form contains radio group elements.
Observation: Using fireEvent.submit successfully triggers form submission under the same conditions.

Suggested solution:

i have created an issue in user-event repository. Closing this story testing-library/user-event#1255