Reactでのjest再履修

はじめに

Reactでjestを書く機会があったので、理解が不十分な部分を再履修し、まとめていきます。

内容

toBeとtoEqual

どちらもマッチしているかを判別するための関数ではありますが、大きな差異は以下です。
toBeはインスタンス先まで参照して一致しているかを判別している。
そのためオブジェクトの比較はtoEqual。

テキストの比較

test('toBe matcher', () => {
  const item = "テスト";
  const item2 = "テスト"
  expect(item).toBe(item2); //こちらは通る
});

オブジェクト内の文字列の比較

test('toBe matcher', () => {
  const item = {
    text:"テスト"
  }
  const item2 = {
    text:"テスト"
  }
  expect(item.text).toBe(item2.text); // こちらは通る
});

オブジェクトの比較

test('toBe matcher', () => {
  const item = {
    text:"テスト"
  }
  const item2 = {
    text:"テスト"
  }
  expect(item).toBe(item2); // こちらは通らない
});

getByRoleとqueryByRole

どちらもscreenの中から要素取得に使用する関数です。
ただ、getByRoleは存在しない要素を取得する場合にはエラーとなるため、存在しない要素がないことをテストする場合はqueryByRoleを使用する。

getByRoleの場合

test('not ol', () => {
  const List = ():JSX.Element => {
    return (<li>テスト</li>)
  }
  render(<List/>);
  const list = screen.getByRole("heading");
  expect(list).not.toBeInTheDocument(); // これは要素取得できずエラー
});

queryByRoleの場合

test('not ol', () => {
  const List = ():JSX.Element => {
    return (<li>テスト</li>)
  }
  render(<List/>);
  const list = screen.queryByRole("heading");
  expect(list).not.toBeInTheDocument(); // これは要素取得できないことをテストでき通る
});

querySelectorとgetByTestId

どちらも要素取得のための関数ですが、getByTestIdはdata-testid属性というテストのために付与された属性値を参照し要素取得します。

ただ、data-testid属性についての公式の見解では以下でした。
class属性やDOM構造からの探索よりかは優れているが基本的には使用は避けるべき。まずは適切なRole属性を使用するべき。

In the spirit of the guiding principles, it is recommended to use this only after the other queries don't work for your use case. Using data-testid attributes do not resemble how your software is used and should be avoided if possible. That said, they are way better than querying based on DOM structure or styling css class names. Learn more about data-testids from the blog post "Making your UI tests resilient to change"

userEventとfireEvenet

どちらもユーザーイベントを発火させるためのものです。
違いとしては、インポート元が違います。以下です。

イベント名	インポート元
userEvent	@testing-library/user-event
fireEvent	@testing-library/react

またuserEventの方がユーザーの動きに近いテストができます。具体的にはfireEventではinput要素などが入力不可のdisabledであったとしても要素に対して文字の入力ができてしまいますが、
userEvnetはそれを許容しません。
ただ、userEvenetにはblurを発火させるためのイベントが用意されていないため、blurはfireEvenet.blurでやってしまうのが楽かもです。