Carely でのフロントエンドテストはかなり限定的でにしか使われていません

これは feature-spec による e2e テストが充実している事と、コードの共通化がそこまでなされていないのでテストのコストが高いことが原因と思われます

現在実装されているのはこの 3種類です

• jest による unit テスト

• storyshots による dom snapshot テスト

• storyshots によるイメージテスト

ぼく自身フロントエンドのテスト導入はコスト面で難しさを感じており、どこでも通用する最適解は存在しないと思っています。現在はメンバーのスキルや現時点でのコード品質、事業課題のバランスをみながら少しずつ導入の進めているところです

ペアプロ時にテストを書く

そもそもテストを書いたことがないメンバーもいるのですが、そのうちの一人とペアプロをする際にひとつのモジュールをテスト駆動で実装してみたところ、一気に理解が進んで他の実装時にもテストを描けるようになりました

テスト関連の細々しい事を対応する

現在時刻に依存したコンポーネントのテストのために jest-date-mock を導入するして現在時刻を固定したり、 feature-spec のテスト用に仕込んだ data-test 属性を除去したり、テストを書く本質とは関係ない部分は拾ってなるべくメンバーのやる気をそがないようにしています

コンポーネントテストを導入する会

Carely は Vue2 で実装されているのですが、 composition-api への置き換えが順調に進んでおり、コンポーネントレベルでのテストができる状況にあります。メンバーの意識が高まってきた事もあり定期的にテストを導入する会を行っています。こちらに関しては知見が溜まってきているので、そのうち技術ブログで共有されるかもしれません

この記事は iCARE の技術顧問がどんな事をやっているか - 2021アドベントカレンダー の14日目の記事です