TL;DR
- CSS-in-JS を使うと、スタイルのルールも単体テストの対象にできる。
- ただし TDD の目的は有益なフィードバックを得ることで、テストはその手段の 1 つにすぎない。スタイルは実際に見るのが最も役に立つので、テストを後から書いてもよい。
内容
この章では、styled-components を使って JavaScript でスタイルを書く。CSS-in-JS を使うと、スタイルのルールを単体テストの対象にできる。
テストはフィードバックの手段の 1 つ
TDD の目的は、コードに対してできるだけ早く、有益なフィードバックを積極的に求めることである。具体的には、建設的なフィードバックループを自分で用意し、潜在的な問題を素早く見つけ、改善のために自由に試せる環境を作ることを指す。
テストはその手段の 1 つでしかない。ときには、テスト以外のフィードバック源に目を向けるべきである。スタイルがその例で、実際に見た目を確かめることが最も役に立つフィードバックになることが多い。そのため、スタイルについてはテストを後から書くのも手である。行き詰まったときは、求めているフィードバックの種類が間違っているのかもしれない。
スタイルのテスト
本書では、スタイルのテストとして次の 2 つを扱う。
- styled-components が生成したスタイルのテスト
- Vitest のスナップショットテスト