nju33ノート一覧へスタイルテストjest-styled-componentsモジュールを使うことで「このコンポーネントはcolorをorangeで持ってるはず」をテストできます。使うにはスナップショットの時などと同じくjest-styled-componentsをただインポートすれば、toHaveStyleRuleというマッチャーが使えるようになります。ここでは@testing-library/reactと共に使い方を見ていきます。ルートとなる要素に対して使用するマッチャーです。基本@testing-library/reactを使っているので軽く説明すると、以下のコードは`、`要素をレンダリングqueryByRoleによって<button>要素を取得その要素に対してマッチャー使用をしています。orangeというスタイルを持っている事がテストできます。このテストはパスします。expectオブジェクトのexpect.anyなどは使えます。以下のようにcolorに何かしらの色値が入ってることをテストできます。expect.any(String));スコープ使用なコンポーネントでテストスコープを使用して1つのstyled-componentsで複数の要素に対してスタイル付けする事があります。上記のコードをスコープ使用な形に書き換えました。}というネスト構造で書いてます。});});この場合は3つ目の引数にmodifierを持ったオブジェクトを渡します。ここへセレクタを渡すことで、深いネストのセレクタの要素のスタイルでも問題なくテストできます。メディアクエリ持ちのテストレスポンシブなスタイルにも対応してます。orangeであることをテストしてます。});});3つ目の引数のオブジェクトにmediaというプロパティを増やし、値を確認したいメディアクエリと同じ値にするだけです。複雑なコンポーネントでテストここでいう複雑なというのは、ネストしたセレクタにstyled-componentsを使ってるようなケースを指してます。}`;のようなケースです。});});このようなケースもスコープ使用なコンポーネントのルート要素からmodifierを通してテストできます。用いてセレクタを書きます。testと叩くことで実際にテストを走らせれます。