web-dev-qa-db-ja.com

JestおよびReactテストライブラリを使用してclassNameをテストする方法

JavaScriptのテストと新しいコードベースでの作業はまったく初めてです。要素のclassNameをチェックするテストを作成したいと思います。私はJestと反応テストライブラリを使用しています。以下に、variant propに基づいてボタンをレンダリングするテストがあります。また、classNameが含まれており、それをテストしたいと思います。

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

EnzymeがhasClassで持っているようなプロパティをGoogleで検索しようとしましたが、何も見つかりませんでした。誰もが現在のライブラリ（react-testing-library、Jest）でこれを解決する方法を知っていますか？

javascriptreactjsjestjsreact-testing-library
12
Gijsberts

それは、react-testing-libraryを使用して簡単に実行できます。

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

したがって、container.firstChildに適用されるクラスを知りたい場合は、このcontainer.firstChild.classNameのようにそれを行うことができます。

MDN でclassNameの詳細を読むと、要素に適用されたクラスが分離されたallが返されることがわかります。スペースで、つまり：

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

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

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

それでおしまい！テストでのみ機能する新しいAPIを学ぶ必要はありません。ブラウザと同じです。

クラスの確認が頻繁に行われる場合は、プロジェクトに jest-dom を追加することでテストを簡単にすることができます。

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

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

toHaveStyleのような便利なメソッドが他にもたくさんあります。

補足として、react-testing-libraryは適切なJavaScriptテストユーティリティです。他のライブラリよりも多くの利点があります。 JavaScriptテストを初めて使用する場合は、 スペクトルフォーラム に参加することをお勧めします。

25
Giorgio Polvara - Gpx

あなたができることとできないことを理解するには、react-testing-libraryの背後にある哲学を理解する必要があります。

React-testing-libraryの背後にある目標は、テストがコンポーネントの実装の詳細を含めることを避け、むしろ意図された信頼性を提供するテストの作成に焦点を当てることです。

したがって、クラス名による要素のクエリは、実装の詳細を含むため、反応テストライブラリの哲学と整合していません。クラス名は実際の要素の実装の詳細であり、エンドユーザーに表示されるものではなく、要素のライフサイクル。したがって、ユーザーが見ることができないものやいつでも変更できるもので要素を検索する代わりに、テキスト、ラベル、または要素のライフサイクルで一定のままであるものなど、ユーザーが見ることができるものを使用して検索してみてくださいデータID。

したがって、あなたの質問に答えるために、クラス名をテストすることはお勧めしません。したがって、react-testing-libraryでそれを行うことはできません。 enzymeやreact-dom test utilsなどの他のテストライブラリで試してください

5
kasongoyo