Closed13
スナップショットテストの導入検討

フロントエンドのリファクタリングを進めるためにスナップショットテストをしたい。調査して、できたら試す!

出力に差分が出たことを検知したい時
テストがない朽ちたコードを触る時

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);
でいけそう!
このスクラップは1ヶ月前にクローズされました
ログインするとコメントできます