title: Testing a radio button click event resulting in "checked"
body: <p>I've read <a href="https://stackoverflow.com/questions/54701224/how-do-i-trigger-a-change-event-on-radio-buttons-in-react-testing-library">this post</a> where the following example is given:</p>
  
  <pre><code>import React from "react";
  import { render, fireEvent } from "react-testing-library";
  test("radio", () =&gt; {
    const { getByLabelText } = render(
      &lt;form&gt;
        &lt;label&gt;
           First &lt;input type="radio" name="radio1" value="first" id="firstRadioId" /&gt;
        &lt;/label&gt;
        &lt;label&gt;
          Second &lt;input type="radio" name="radio1" value="second" /&gt;
        &lt;/label&gt;
      &lt;/form&gt;
    );
    const radio = getByLabelText('First')
    fireEvent.change(radio, { target: { value: "second" } });
    expect(radio.value).toBe('second')
  });
  </code></pre>
  
  <p>But that feels kind of odd since it's not the result of a click that's being tested. But rather it's directly setting the value to a certain string.
  However, the click event does not work:</p>
  
  <pre><code>  // ...
    const radio = getByLabelText('First')
    const radioSecond = getByLabelText('Second')
    fireEvent.click(radioSecond);
    expect(radio.value).toBe('second');
    // ...
  </code></pre>
  
  <p>The thing that I don't get is why <code>document.getElementById('firstRadioId').checked</code> is returning false. In the browser it does, as can be seen in the example here: </p>
  
  <p><a href="https://codesandbox.io/s/silly-saha-xt0j7" rel="nofollow noreferrer">https://codesandbox.io/s/silly-saha-xt0j7</a></p>
  
  <p>On the index page you see that radio.checked returns true. But in the test it does not.</p>