☰

Jest と React テストライブラリを使用して className をテストする方法 質問する

tag-icon • tag-icon javascript reactjs jestjs react-testing-library
Jest と React テストライブラリを使用して className をテストする方法 質問する

私はJavaScriptのテストに全く不慣れで、新しいコードベースで作業しています。要素のclassNameをチェックするテストを書きたいと思っています。私はJestを使っていて、React テストライブラリ以下に、プロパティに基づいてボタンをレンダリングするテストがありますvariant。また、className も含まれているので、それをテストしたいと思います。

it('Renders with a className equal to the variant', () => {
    const { container } = render(<Button variant="default" />)
    expect(container.firstChild) // Check for className here
})

酵素が持つような特性をグーグルで検索してみましたhasClassが、何も見つかりませんでした。現在のライブラリでこれを解決するにはどうすればよいですか（React テストライブラリと Jest ですか?

ベストアンサー1

react-testing-library を使用すると簡単に実行できます。

containerまず、や などの結果は単なる DOM ノードであることを理解する必要がありますgetByText。ブラウザで行うのと同じ方法で、これらを操作できます。

したがって、どのクラスが適用されているかを知りたい場合は、container.firstChild次のようにしますcontainer.firstChild.className。

詳しくclassNameは翻訳戻ってくるのがわかるでしょう全て要素に適用するクラスをスペースで区切って指定します。

<div class="foo">     => className === 'foo'
<div class="foo bar"> => className === 'foo bar'

状況によっては、これが最善の解決策ではないかもしれません。心配しないでください。別のブラウザAPIを使用できます。たとえば、classList。

expect(container.firstChild.classList.contains('foo')).toBe(true)

それだけです! テスト専用の新しい API を学習する必要はありません。ブラウザと同じです。

クラスのチェックを頻繁に行う場合は、以下を追加することでテストが簡単になります。冗談好きあなたのプロジェクトに。

テストは次のようになります。

expect(container.firstChild).toHaveClass('foo')

toHaveStyle他にも役立つ便利な方法がたくさんあります。

ちなみに、react-testing-libraryはJavaScriptのテストユーティリティです。他のライブラリに比べて多くの利点があります。ぜひ参加してみてください。スペクトラムフォーラムJavaScript テストを初めて行う場合。

おすすめ記事