Open13

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

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

「正解のデータ」を用意するのも自動でやりたいなあ…
productionやmasterブランチをクロール=正解のデータ
リファクタリングしたブランチをクロール、正解のデータと比較

DEV環境とローカル開発環境 でもいいのかな

ありがたい〜この通り触ってみる

https://qiita.com/ThanhLe/items/fabd16539b80399a1a50

jest --verbose true

  • jest
    • 全てのテストを実行する(既定値)
  • --verbose
    • 各テストごとの結果をテストスイートの階層構造とともに表示します。

https://jestjs.io/ja/docs/cli
This usually means that there are asynchronous operations that weren't stopped in your tests.
Consider running Jest with `--detectOpenHandles` to troubleshoot this issue.

https://oisham.hatenablog.com/entry/2018/12/11/233231

を参考に 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.

https://qiita.com/frost_star/items/83d58072374d61de9e10

テストが失敗してExit status 1 が出ていることによってnpm ログがエラーだって言ってる?

npm run test --silent

でOK

そのままだと失敗したし、同じように検索結果を48個取得するセレクタの特定はしていないけど、
セレクタ変えたらテストできていることはわかったのでOK!

テストの効率や実行時間を一旦無視すれば、
これで
DEVの特定ページの操作 → 特定DOMの中身 = expectValue
ローカルの特定ページの操作 →特定DOMの中身 = testValue

expect(testValue).toBe(expectValue);

でいけそう!

ログインするとコメントできます