Reactテストライブラリを使用してHTML要素で取得しますか？
ReactテストライブラリでgetByTestId関数を使用しています：
const button = wrapper.getByTestId("button");
expect(heading.textContent).toBe("something");
代わりにHTML要素を検索することは可能ですか？だからこのようなもの：
const button = wrapper.getByHTML("button");
const heading = wrapper.getByHTML("h1");
この場合、wrapperが何かはわかりません。しかし、2つの質問に答えるには、はい、HTML要素で取得することは可能ですが、いいえ。
これはあなたがそれをする方法です：
// Possible but not advisable
const { container } = render(<MyComponent />)
// `container` is just a DOM node
const button = container.querySelector('button')
DOMノードを取得するので、 querySelector などの通常のDOM APIをすべて使用できます。
さて、なぜこれはお勧めできませんか。 react-testing-libraryの大きなセールスポイントは、ユーザーと同じようにコンポーネントをテストすることです。これは、実装の詳細に依存しないことを意味します。たとえば、コンポーネントの状態に直接アクセスすることはできません。
この方法でテストを書くのは少し難しいですが、より堅牢なテストを書くことができます。
あなたの場合、基礎となるHTMLは実装の詳細であると私は主張します。 h1がh2またはdivになるようにHTML構造を変更するとどうなりますか？テストは壊れます。代わりに、これらの要素をテキストで見ると、タグは無関係になります。
場合によっては、通常のクエリヘルパーでは不十分です。これらのイベントには、data-testidとgetByTestIdを使用できます。