[解決済み] 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
})

Enzymeが持っているようなプロパティをググってみると hasClass しかし、何も見つかりませんでした。現在のライブラリでこれを解決するにはどうしたらよいでしょうか ( React テスティングライブラリ とJest)を使用することはできますか？

どのように解決するのですか？

react-testing-libraryを使えば、簡単にできますよ。

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

では、どのようなクラスが container.firstChild は、次のようにすればよいのです。 container.firstChild.className .

について詳しく読むと className で MDN を返していることがわかると思います。 すべて は、スペースで区切られた要素に適用されるクラス、つまり、です。

<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のテストが初めてなら