React-testing-library: Required radio input submitted even when not selected

Created on 11 Mar 2020  路  3Comments  路  Source: testing-library/react-testing-library

  • @testing-library/react version: 8.0.1 but sandbox still fails at 9.5
  • react version: 16.8.0
  • node version: 12.14.1
  • npm (or yarn) version: yarn version 1.22.0

What you did:

I am trying to use react-testing-library to test that the form component I created (which is a wrapper over final-form correctly sets the radio inputs as required). I wrote a test that uses the render function with the form and two radio inputs and a submit button. When I click on the button in the browser, I receive an input required error in Chrome, like below:

image

Image taken from the following codesandbox: https://codesandbox.io/s/thirsty-northcutt-xtfnl

Therefore I do not expect the submit function to be called when I press the submit button without selecting an option.

What happened:

The test fails when I expect that the handleSubmit method is not called (see codesandbox below).

Reproduction:

https://codesandbox.io/s/quiet-dust-mdlrj

Problem description:

This is inconsistent with browser behaviour and I now don't have any way to test that my Form component correctly passes through the required attributes onto the input.

You might say "why don't you just check for the required attribute?". However, the bug that I actually found was that we weren't putting the name prop on the input, and that was what was causing the required attribute not to be effective.

Suggested solution:

I'm not too sure. Perhaps this is more an issue with the underlying DOM libraries than with react-testing-library in particular.

jsdom

Most helpful comment

Posting link to issue in jsdom here for posterity: jsdom/jsdom#2898

I pasted the wrong clipboard while on autopilot. Sorry :D

All 3 comments

Perhaps this is more an issue with the underlying DOM libraries than with react-testing-library in particular.

With jsdom in particular. Closing in favor of https://github.com/jsdom/jsdom/issues/2898.

Thanks for raising the issue @eps1lon!!!

Posting link to issue in jsdom here for posterity: https://github.com/jsdom/jsdom/issues/2898

Posting link to issue in jsdom here for posterity: jsdom/jsdom#2898

I pasted the wrong clipboard while on autopilot. Sorry :D

Was this page helpful?
0 / 5 - 0 ratings