109

私は JavaScript のテストにまったく慣れておらず、新しいコードベースで作業しています。要素の className をチェックするテストを書きたいと思います。私は Jest とReact Testing Libraryを使用しています。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 Testing Libraryおよび Jest)でこれを解決するにはどうすればよいですか?

4

6 に答える 6

30

You need to understand the philosophy behind react-testing-library to understand what you can do and what you can't do with it;

The goal behind react-testing-library is for the tests to avoid including implementation details of your components and rather focus on writing tests that give you the confidence for which they are intended.

So querying element by classname is not aligned with the react-testing-library philosophy as it includes implementation details. The classname is actual the implementation detail of an element and is not something the end user will see, and it is subjected to change at anytime in the lifecycle of the element.

So instead of searching element by what user cannot see, and something that can change at anytime, just try to search by using something that the user can see, such as text, label or something that will remain constant in the life cycle of the element like data-id.

So to answer your question, it is not advised to test classname and hence you cannot do that with react-testing-library. Try with other test libraries such as Enzyme or react-dom test utils.

于 2019-05-28T05:58:10.110 に答える
22

testing-library/jest-dom カスタム マッチャーを使用できます。

@testing-library/jest-dom ライブラリは、jest を拡張するために使用できる一連のカスタム jest マッチャーを提供します。これらにより、テストがより宣言的になり、読みやすく、維持しやすくなります。

https://github.com/testing-library/jest-dom#tohaveclass

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

    expect(container.firstChild).toHaveClass('class-you-are-testing') 
})

setupTest.jsこれは、ファイル内でグローバルに設定できます

import '@testing-library/jest-dom/extend-expect';
import 'jest-axe/extend-expect';
// etc
于 2020-06-12T11:01:56.383 に答える