実務に直接適用するフロントエンドテスト - パート2。テスト深化：視覚的回帰・E2Eテスト

こんにちは！
講義がリリースされ、ここ数ヶ月間、vitest、storybook、cypressのバージョンアップデートがありました。

実際に設定や作成方法が大幅に変更された部分がなく、すばやくアップデートはさせませんでしたが、設定に役立つようにアップデートしておきました。

大幅に変更された内容はstorybook-addon-react-router-v6依存をstorybook-addon-remix-react-routerに変更されており、大きく変わった内容はありませんのでご参考ください。

残りのライブラリ依存の変化には以下の内容があります。

• node: 19 -> 20

• vitest: 0 -> 2

• storybook: 7 -> 8

• cypress: 12 -> 13

• アクションバージョンの更新

latestブランチで確認できますので参考にしてください！

• https://github.com/practical-fe-testing/test-example-shopping-mall/tree/latest

さらに時間が経つにつれてRQのアップデートやプロジェクト構造の部分も改善が必要な場合は、testブランチにアップロードしてから再度挨拶するようにします。

では、楽しいお祝いになってお休みください。ありがとうございます！

こんにちは！講義で紹介しているmswのアップデートがあり、共有します。

msw 2.0がリリースされてから3ヶ月ほどになりました。講義撮影を終える途中に発売されて少し戸惑いましたが( 😇 ) ある程度安定したらコードを更新して共有を差し上げる予定でした。

抽象化レベルが変わるにつれて、API仕様が大々的に変わり、ReadableStreamへのサポート、ESM互換などの内容が追加されました。一見すると大きく変わったように見えますが、思ったより変化は大きくなく個人的に使ってみるからずっと明確になってよかったですね！

講義を受講される方々が混乱しないようにブランチを分けて更新しましたので、内容を参考にして一緒に勉強してみてください。

では、日が寒くなったのに風邪に気をつけて良い一日になってください！

⚠まだmsw-storybook-addonのサポートが完璧に行われていない状態なので、カナリーバージョンを適用した点をご了承ください。

• ブランチ: https://github.com/practical-fe-testing/test-example-shopping-mall/tree/msw-2.0

• msw 2.0について：https: //mswjs.io/blog/introducing-msw-2.0

• 1.x -> 2.x移行ガイド：https: //mswjs.io/docs/migrations/1.x-to-2.x

• msw-storybook-addon PR: mswjs/msw-storybook-addon#122

こんにちは！実務にすぐに適用するフロントエンドテスト講義講師コードジョーカー・オフです。

あいさつが少し遅かった。
先輩と同僚の開発者の皆様、明けましておめでとうございます。 🙇
講義が発売されてから、いつのまにか月を控えており、 350分以上一緒にフロントエンドテストについて勉強しています。
お選びいただきありがとうございます！

もし講義を受講しながら悩みになる部分が生じていませんか？
だとしたら、コミュニティに似た悩みをしている方がいるかどうか、一度見てみるといいと思います。
そうでない場合は、快適に質問してください！できるだけ早く確認して回答させていただきます。
（これまですべての質問に回答を12時間以内に進めています。）
すでに多くの方が質問を残してくれました。
一緒に悩んでみる質問も載せてくださって勉強しながら一緒に見てみると役に立つようです。
（ 💡よく質問がある場合は、一緒に共有することを心配してみましょう。）

• 質問を見る： https ://bit.ly/3NWe78i

講義が好きな方は是非受講評をお願いします。
この講義が皆さんがフロントエンド学習にぜひ役に立てば幸いです。
それでは、良い一日を過ごしてください！ 👋