フロントエンドのテストについて

フロントエンドのテストについて 2018 年 6 月 22 日

前置き Vue.js でのテストの話です

テスト書いてますか？

書いてる人も書いてない人もいると思いますが

今日は書いてない方に目を向けて考えてみたいと思います

なぜテストを書かない（書きたくない）のかいくつか理由を考えてみました・スケジュール的な問題・そもそもどこをどうテストするか分からない・テストコードを書くのがダルい、テスト環境作るのはもっとダルい他にも理由はあると思いますが、この３つが思いつきました

スケジュール的な問題についてスケジュール的に厳しいから、テストはリリース後とか時間が出来たときにまとめて書くという選択は良くあると思いますもしくはテストを書かない方針にするという判断もしていると思います

でも仮にリーダー的な人が、、

リーダー的な人＞スケジュールにテストの分の工数を組み込みます！なのでテスト書いてください！

ってなったら、テストを書き慣れている人はいいかもしれないですが

テストをあまり書く習慣がない人は、「え、面倒なことになったな、、」って思うでしょう

結局下 2 つの問題が解決しないと、テストを書く（書きたい）という状態にならないでしょう・スケジュール的な問題・そもそもどこをどうテストするか分からない・テストコード書くのがダルい、テスト環境作るのはもっとダルい

そもそも、どこをどうテストするか分からない

解決になりませんが、これに関してはテスト慣れが必要かなと思ってます。。

私も最初は分からないながらも、テストを書いてきて、だんだん慣れて、ちょっとずつ良いテストが書けるようになってきました（たぶん）

テストを書く習慣がつくと・コーディングしながら、この処理はテストできるか・テストが難しいから別の簡単な実装方法を考えよう・そもそもテストがいらないやり方を考えようってなります

この考えが身につくと、良いプログラムが書けそうな気がしませんか？

そして実際テストを書くってなると、 3 つ目に書いたやつが障壁でしょう・スケジュール的な問題・そもそもどこをどうテストするか分からない・テストコードを書くのがダルい、テスト環境作るのはもっとダルい

テスト環境作るのがダルい

開発環境に加えて、テスト環境も作るのは大変

テスト環境は作れる人に任せよう！

作れる人がいなければ「XXX-cli」などのスキャフォールディングツールにまかせても良いと思います

なので、、

・スケジュール的な問題・そもそもどこをどうテストするか分からない・テストコード書くのがダルい、テスト環境作るのはもっとダルいここだけ頑張ろう！

Vue.jsの話になりますが、最近はテスト周りのエコシステムが充実し、非常に簡単にテストコードが書けるようになりました

今回はテストコードを簡単に効率良く書くために色々考えて実装したので、紹介したいと思います

テスト書くぞ！

Vue.jsのテストをモダンにする https://qiita.com/kurosame/items/8d82ef8d36c106c6e8bc

さいごに私が思うテストを書くメリット（これが全てではないですが）・全体的にテストを自動化しておけば、テスト対象のモジュールが他のモジュールに依存している時にエラーに気づける・関数の使い方が分からない時などドキュメント代わりになる（誰かが作ったプラグインなどを使う時にドキュメントが無ければ、テストを見ることがよくあります）・ E2E テストをちゃんと書いておけば、その画面全てのイベントが分かる。最強のドキュメント・ユニットテストは言語が変わればフレームワークも変わるが、
E2E テストはフレームワークは基本同じだと思うので、 1 回どこかで書いておくと、今後もノウハウが生きます・今後何年とメンテナンスしていくシステムを作っている思うので、未来で楽するために最初に時間と労力を投資しましょう！

フロントエンドのテストについて

フロントエンドのテストについて

kurosame

More Decks by kurosame

Other Decks in Programming

Featured

Transcript