Check that button is disabled in react-testing-library : <p>I have a React component that generates a button, which content contains <code>&lt;span&gt;</code> element like this one:</p>

<pre><code>function Click(props) {
    return (
        &lt;button disable={props.disable}&gt;
            &lt;span&gt;Click me&lt;/span&gt;
        &lt;/button&gt;
    );
}
</code></pre>

<p>I want to test the logic of this component with the use of <code>react-testing-library</code> and <code>mocha</code> + <code>chai</code>.</p>

<p>The problem which I stuck at the moment is that <code>getByText("Click me")</code> selector return the <code>&lt;span&gt;</code> DOM node, but for the tests, I need to check <code>disable</code> attribute of the <code>&lt;button&gt;</code> node. What is the best practice handling such test cases? I see a couple of solutions, but all of them sounds a little bit off:</p>

<ol>
<li>Use <code>data-test-id</code> for <code>&lt;button&gt;</code> element</li>
<li>Select one of the ancestors of the <code>&lt;Click /&gt;</code> component and then select the button <code>within(...)</code> this scope</li>
<li>Click on the selected element with <code>fireEvent</code> and check that nothing is happened</li>
</ol>

<p>Can you suggest a better approach?</p>
