Open13
スナップショットテストの導入検討
たにフロントエンドのリファクタリングを進めるためにスナップショットテストをしたい。調査して、できたら試す！
たに
出力に差分が出たことを検知したい時
テストがない朽ちたコードを触る時
たにVisual Regression Testing
HTML ベースの差分が見れればいいから、VRTである必要はない
たにjQuery主体のフロントエンドの出力結果を比較したい
たに「E2Eテスト自動化」のほうが適切なのかな？
たに「正解のデータ」を用意するのも自動でやりたいなあ…
productionやmasterブランチをクロール＝正解のデータ
リファクタリングしたブランチをクロール、正解のデータと比較
たにDEV環境とローカル開発環境 でもいいのかな
たにありがたい〜この通り触ってみる
jest --verbose true
- jest
- 全てのテストを実行する(既定値)
- --verbose
- 各テストごとの結果をテストスイートの階層構造とともに表示します。
たにThis usually means that there are asynchronous operations that weren't stopped in your tests.
Consider running Jest with `--detectOpenHandles` to troubleshoot this issue.
を参考に await page.close(); を追加したらエラーが出なくなった
たに20 error code ELIFECYCLE
21 error errno 1
22 error jest-puppeteer-202108@1.0.0 test: `jest --verbose true`
22 error Exit status 1
23 error Failed at the jest-puppeteer-202108@1.0.0 test script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
テストが失敗してExit status 1 が出ていることによってnpm ログがエラーだって言ってる？
npm run test --silent
でOK
たにそのままだと失敗したし、同じように検索結果を48個取得するセレクタの特定はしていないけど、
セレクタ変えたらテストできていることはわかったのでOK！
たにテストの効率や実行時間を一旦無視すれば、
これで
DEVの特定ページの操作 → 特定DOMの中身 = expectValue
ローカルの特定ページの操作 →特定DOMの中身 = testValue
expect(testValue).toBe(expectValue);
でいけそう！