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を使用する。
test('not ol', () => {
const List = ():JSX.Element => {
return (<li>テスト</li>)
}
render(<List/>);
const list = screen.getByRole("heading");
expect(list).not.toBeInTheDocument(); // これは要素取得できずエラー
});
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
でやってしまうのが楽かもです。
Discussion