title: How to test if some element was enabled/disabled correctly after click a Checkbox?
body: <p>I'm trying to test a component that have a <code>&lt;Switch/&gt;</code> (using Material-UI) and a <code>&lt;TextField/&gt;</code>. When user clicks in this Switch, it makes another field (<code>&lt;TextField/&gt;</code>) enable/disabled. The code works well, but my test using JEST always fails.</p>
  <pre class="lang-js prettyprint-override"><code>...
  export function MyComponent(): JSX.Element{
    const [enableExpiresOn, setEnableExpiresOn] = useState(false);
    ...
    function handleAccountExpiresOn(e: React.ChangeEvent&lt;HTMLInputElement&gt;) {
      setEnableExpiresOn(e.target.checked);
    }
  
    return (
      &lt;form ...&gt;
        ...
        &lt;div&gt;
          &lt;FormControlLabel
              control={
                &lt;Switch
                  id=&quot;account-expires&quot;
                  onChange={handleAccountExpiresOn}
                  name=&quot;account-expires&quot;
                  color=&quot;primary&quot;
                  checked={enableExpiresOn}
                /&gt;
              }
              label={t(&quot;Account Expires On&quot;)}
            /&gt;
        &lt;/div&gt;
        &lt;div&gt;
            &lt;TextField
              id=&quot;account-expires-on&quot;
              label={t(&quot;Account Expires On&quot;)}
              type=&quot;datetime-local&quot;
              variant=&quot;outlined&quot;
              required={enableExpiresOn}
              InputLabelProps={{
                shrink: true,
              }}
              disabled={!enableExpiresOn}
            /&gt;
        &lt;/div&gt;
        ...
      &lt;/form&gt;
    );
  
  }
  </code></pre>
  <p>And in my JEST test file, I have the follow (as you can see, I'm trying to simulate a click in the Switcher):</p>
  <pre class="lang-js prettyprint-override"><code>  describe(&quot;Should render correctly&quot;, () =&gt; {
      let wrapper;
  
      beforeAll(() =&gt; {
        wrapper = mount(&lt;MyComponent /&gt;);
      });
      ...
      fit(&quot;Should enable Account Expires On when switcher is on/checked&quot;, async () =&gt; {
          wrapper.find(&quot;#account-expires&quot;).at(0).simulate(&quot;click&quot;);
          expect(
            wrapper.find(&quot;#account-expires-on&quot;).get(0).props.disabled
          ).toEqual(false);
      });
  </code></pre>
  <p>However, Jest gives me an error in this expectation, saying that it have received <code>true</code> instead <code>false</code>.</p>
  <p>I tried to put a setTimeout around the expectation, hoping that it would solve the problem because maybe we need to wait for the click to have effect, but it doesn't work.</p>
  <p>I'm newer with JEST and React Hooks. So, I don't know if it is the best way to test what this behaviour or there is a better way.</p>
  <p><strong>Used Technologies</strong></p>
  <ul>
  <li>React Hooks</li>
  <li>NextJS</li>
  <li>Material UI</li>
  <li>TypeScript</li>
  <li>Jest</li>
  <li>Enzyme</li>
  </ul>