反応テストライブラリでボタンが無効になっていることを確認してください

Question

Reactボタンを生成するコンポーネントがあります。そのコンテンツには、次のような<span>要素が含まれています。

function Click(props) {
    return (
        <button disable={props.disable}>
            <span>Click me</span>
        </button>
    );
}

react-testing-libraryとmocha + chaiを使用して、このコンポーネントのロジックをテストしたいと思います。

現時点でスタックしている問題は、getByText("Click me")セレクターが<span> DOMノードを返すことですが、テストでは、<button>ノードのdisable属性を確認する必要があります。そのようなテストケースを処理するベストプラクティスは何ですか？いくつかの解決策がありますが、それらはすべて少しずれているように見えます。

1. data-test-id要素には<button>を使用します
2. <Click />コンポーネントの祖先の1つを選択してから、ボタンwithin(...) this scopeを選択します
3. fireEventで選択した要素をクリックし、何も起こらないことを確認します

より良いアプローチを提案できますか？

Answer 1

次のように@testing-library/reactを使用するだけで、ボタンの無効化プロパティをテストできます。

例：

   import { render } from '@testing-library/react';

   const {getByText} = render(<Click/>)

   expect(getByText('Click me').closest('button').disabled).toBeTruthy()