Frontendのテスト全部知る 〜Unit TestからE2Eまで〜 - Encraft #18

今回のテーマ: 「フロントエンドのテスト」

フロントエンドのテスト、書いてますか？

何を目的にテストを書くのか、どこまで書いたらいいのか、どう書くのがいいのかなどなど、フロントエンドのテストに関する悩みは色々とあるかと思います。

今回はフロントエンドのリアーキテクト文脈でのテストの話や、デグレを起こさないためのテストといった観点に焦点を当てながら、Unit TestからE2Eテストまで、広い範囲でお話しします。

事業フェーズや組織規模が違う各社のナレッジやノウハウを聞ける良い機会ですので、ぜひご参加ください。😃

こんな人におすすめ

• フロントエンド開発に従事している方
• フロントエンドのテストでなにをやればいいかわからない方
• フロントエンドのテストの知見を深めたい方
• その他、開発者ならどなたでも

タイムテーブル

2024年9月20日（金） 18:30 開場 / 19:00 開始
※ オフライン参加される方の入場は19:45で締め切らせていただきます

アクセス

〒105-0003
東京都港区西新橋1-6-15
NS虎ノ門ビル（日本酒造虎ノ門ビル） 11F

https://www.tc-forum.co.jp/ap-shinbashitoranomon/access/

セッション情報紹介

【セッション1】コンポーネントのテストとして採れそうな手法と、その効果を考える

最近では、コンポーネントをテストする手法として、testing-library や Vitest、Playwright や Cypress、はたまた Storybook など様々な技術が利用できます。今回はそういった様々な手法をベンチマークや実装の違いから比較し、それぞれの特徴や効果について話します。

登壇者: nus3 / サイボウズ株式会社

@nus3
なすさんです。最近はフロントエンド刷新プロジェクトの現場監督をやってたりします。

【セッション2】上手に付き合うコンポーネントテスト(仮)

フロントエンドでも自動テストを書くのは当たり前となりつつある昨今。コンポーネントテストを上手に運用する Tips を紹介します。

登壇者: Yosuke Kurami

@Quramy
10年来 Web アプリケーション開発に従事. 近年は Web フロントエンド領域で リードエンジニアを務めることが多い。 Visual Regression Test ツールや、Prisma のテストツールなど、Node.js スタックにおけるテストツールを OSS として作成している。

【セッション3】急拡大するナレッジワークの開発組織を支える E2E テスト基盤

ナレッジワークでは Playwright で E2E テストを書いていますが、組織の拡大に伴って様々な問題が起こるようになりました。この発表では、ナレッジワークがそれらの問題を乗り越えるべく E2E テスト基盤をどのように構築したのかを紹介します！

登壇者: torii / 株式会社ナレッジワーク

@jinjor
フロントエンド開発を長くやっています。著書『基礎からわかる Elm』

司会

よしこ / 株式会社ナレッジワーク

@yoshiko_pg

株式会社ナレッジワーク フロントエンドエンジニア
Google Developer Experts for Web / 著書『HTML5/CSS3モダンコーディング』

SPAでGUIを作るのが好き。

補足情報

イネーブルメントポイント

本イベントを通して登壇者や運営メンバーとともに、参加者のみなさまに次のようなことを学んでいただけのではないかと考えています。　

• フロントエンドのコンポーネントのテストについて
• Visual Regression Testについて
• E2Eテストについて

Encraft について

Encraft（エンクラフト）は株式会社ナレッジワークが提供する、

• "Enablement"：「できるようになる」
• "Craftsmanship"：「こだわりを持って」

をテーマにした勉強会です。

技術にこだわりを持つ人々が集まって互いに知見を交換し、できることを増やしていく場を提供します。

過去のイベントの様子は以下からご覧いただけます。

• Encatft 開催レポート まとめ

株式会社ナレッジワークについて

https://kwork.studio/

「できる喜びが巡る日々を届ける」というミッションのもと、「仕事におけるイネーブルメント（能力向上や成果創出）」をテーマに、企業向けクラウドサービス「ナレッジワーク」の開発・提供をしています。 また、2022年12月にはGoエンジニア向けのイネーブルメント事業を始動するなど、新たな事業創出にもチャレンジしています。

• X（旧Twitter）
• Developers blog
• Zenn
• エンジニア採用ページ
• connpass

注意事項

• 当日のオフライン参加者の受付は20時00分で終了致しますので、予めご了承のうえご参加願います。
• 参加目的が不適切だと判断される場合には、運営側で参加をキャンセル・お断りさせていただく場合がございます。
• イベントの様子を撮影させていただきます。撮影した動画・写真はドキュメンタリー映像、イベントレポート記事などで使用させていただきます。
• 申込人数過多の場合、よりテーマに沿った活動をされていることが分かる方を優先して当選者を決定させていただく場合がございます。あしからずご了承くださいますようお願いいたします。

Code of Conduct（行動指針）

本イベントは技術に関わる人々が情報発信や交流を行うための機会です。目的にそぐわない行動はお控えください。
イベント参加時は運営スタッフの案内に従い、公序良俗を守ったSNS発信・会場利用をお願いいたします。

また、Encraftは以下のような行為を許容しません。

• 性別、性的指向、外見、身体的特徴、人種、宗教等に関連した攻撃的又は差別的な発言
• 意図的な威力行為、ストーキング、つきまとい
• 性的な画像の掲示等を含む不適切な情報の開示
• 写真撮影や録音によるいやがらせ
• トークセッションや懇親の場に対する意図的な妨害行為
• 不適切な身体接触
• 望まれない性的な注意を引きつける行為

この規範に違反する行動をされた、もしくは周囲で見聞きした場合には、すぐに運営スタッフまでお声がけください。