Slide 15
Slide 15 text
15
10. フロントエンドのテストの仕組み
モダンな開発では 「ユニットテスト」というと一般的にはこれらの仕組みを使った関数やクラスのレベルのテストを指す。
「テスト用ライブラリ」「テスティング・フレームワーク」「テストランナー」など呼び方が様々だが、大まかには同じような意味。
Node.jsではプロジェクト配下の設定ファイルpackage.jsonに設定を書いておいてコマンドで >npm test などで実行。
◆②ユニットテスト (Unit Test): 独立した関数、(+コンポーネント)でのテスト
◆ Node.js自体 : v18[2022/4]から標準モジュールにtest,assertモジュールが追加。基本的な比較は実施可能。より本格的なテストは他の仕組みへ
◆ Jest: [2019-] Facebook(現meta)発。各種FWにも対応、前処理や後処理、モックの利用など各種機能豊富。JS/TS全体のユニットテストで今の主流
◆ Mocha: 同じくテスト用FW。他にもJasmine, Chai, Karma, Enzymeなどいくつかあるが、進化と共にだいたいJestで済むようになってきた
◆③結合テスト (Integration Test): コンポーネントや関数を組み合わせた機能をテスト、厚めがよいとされる
◆ Testing Library: [2018-] 各種FW用のライブラリを有しており、例えばReactならReact Testing Library(RTLとも)。jsdomというDOM要素を
エミュレートしてくれるライブラリを内部で呼んで、Reactコンポーネントのテスト(ボタンを押すと持っている値がこう変わる、など)ができる
◆ スナップショットテスト: Reactコンポーネントが描画するHTMLを文字列として出力、想定通りかテストするというアプローチ。
react-test-rendererというものがあったが、上のTesting Libraryで同じようなことができるようになり、公式でも推奨
◆④E2Eテスト (End to End Test) : 端から端まで、ユーザーがブラウザで操作するのを想定したテスト
◆ Cypress: [2017 v1] JSコードで操作を書いて実施するE2E用の大がかりな仕組み。対象ブラウザ内でアプリと同じランタイムで動作
◆ Puppeteer: [2018 v1] Node.jsで動くライブラリ、Chrome, FireFox用。”操り人形師”の意
◆ Playwright: [2020 v1] Microsoft製、上のPuppeteerと同じ開発陣。Chrome, Safari, Firefox用。コードを書く→Chrome系ブラウザに
用意されている外部からの操作・通信プロトコル経由→対象ブラウザを直接操作。”劇作家”の意
◆ Selenium WebDriver: [2002-] JS問わずブラウザ操作自動化でよく使われてきた古くからある技術。コードで操作を書く→各ブラウザ用の
WebDriverアプリを操作→ネットワーク経由で間接的に対象のブラウザを操作
Testing Trophy:
React Testing Libraryの作者
さんが提唱した4分類。
①Static: eslintなどの静的解
析、TypeScriptの型チェック
②Unit, ③Integration, ④E2E
の3つ: 本ページで解説
大
が
か
り
→フロントエンド特有の分類があり、仕組みにも変遷が
②
③
④
①
ユニット~結合で、UI表
示の差分を取る「画像回
帰テスト」のアプローチも