フロントエンドのテストをしよう Webのフロントエンドの自動化を進めようか。という話をしていて、 「そもそもテストってなんだ？」 「フロントエンドに特有のテストってなんだ？」 「〇〇ってツール流行ってるらしいってどうよ？」 みたいなことを話をしていました。そうしたときに、やっぱり知識足らねぇなぁ。と思ったので、2,3日でゴリゴリと内容をまとめてみる作業をしてみました。 あんまりこういう書き方はしないんですが、私自身散発的な思考で、フロントエンドのテストを調べることをしたので、そのような語り口で書いてみようと思います。 以下の内容は、あくまで例なので、別にこういう仕事があったわけではないです。 とりあえず投げられた要求・仕様 とりあえずなんか仕事が振ってきた。パラパラと要求を聞いてみると、こんな感じだった。 承認のダイアログが欲しい メッセージのフォントはOswald メッセージは変更できる

はじめに 〜記事執筆のきっかけ〜 先日、以下の記事についてのツイートが流れてきました。 zenn.dev この記事の内容については、ChatGPTをはじめとするAIによるテストの可能性を示した素晴らしい内容だと思います。 ですが、果たして"今時点（元記事の執筆時点）の"出力結果*1が実用に耐えうるものになっているのか検討し、提示する必要もあると感じました*2。 そこで本記事では、テストエンジニアである私の回答例と"今時点の"AIの出力結果を比較しギャップを示すことを目的とします*3。 決して、AIによるテスト自動生成の進化自体を否定している訳ではないことを念頭にお読みいただければと思います。 結論 本記事では、"今時点の"AIの出力結果に対して、以下の結論を導き出しています。 状態遷移図のテスト設計の題材では、根幹となる機能に関する不具合が含まれていた デシジョンテーブルのテスト設計の題材

数年前にAIを離れ現在はフロントエンドをやっているのですが、半年くらい前に思い切り引き戻されました。画像生成AIにおけるmidjourneyとstable diffusionの登場です。noteのCTO深津さんが記事を出したと思ったのも束の間、急速に進化を果たしました。 絵柄の固定・ポーズの指定・マシンスペックなど、日々さまざまな問題を解決しながら新たな技を身につけています。 しかし、同等かそれ以上に話題になっているのは大規模言語モデル(Large Language Model)かもしれません。ChatGPTが話題になった思ったら、BingやPerplexity,You.comなど大規模言語モデルを交えたサービスが次々と登場しました。 活用方法もたくさん見つけられており、私は特に以下の二つの記事が好きです。 「感情回路」の記事に入力(プロンプト)でここまで変わるのかと感動したことを覚えてい

本稿における「単体テスト」とは自動テストにおける単体テストを指します。手動テストのことではないので、ご了承ください。 単体テストの考え方/使い方という本を読みました。筆者自身、「単体テストはプロダクションコードの付属」という意識がどこかにありました。この本を読んで、単体テストについてあまりに何もわかってなかったことに気付かされ、単体テストの設計はプロダクションコードの設計と同じくらい重要という意識に変わりました。何のために単体テストをやるのか、いいテストとは、「単体」とは、など多くの点で学びを得られ、また、多くのプラクティスとアンチパターンを知ることができました。 本稿はこの本を読んで得られた学びを、フロントエンド開発、特にコンポーネント開発に適用することを試みた際のまとめです。より詳細な解説を求む方には本を手に取ってもらう前提で、できるだけポイントを抑えられるようにまとめることを目指しま

Wevoxのフロントエンドエンジニアをしているタガミです。最近はmonorepo構成に移行中のWevoxフロントエンドのテストやデザインシステムなどをいい感じにしようとしています。 この記事では、WevoxというSaaSプロダクトのフロントエンドにおける自動テストの話をします。Wevoxはリリースから5年以上が経過し、チームのメンバーも増え、またソースコードも巨大化しています。そんな中でフロントエンドも"式年遷宮"をして、改善を繰り返しています。中にはソースコードをガラッと変えるようなリファクタもあり、担当するエンジニアにとってはデグレの心配が付き纏います。そんな日々変化するフロントエンドを支えるのが自動テストです。 Wevoxの開発チームは決して大人数ではありません。そんなチームでも品質の改善のために一歩ずつ改善しつつある経験をもとに、フロントエンドの自動テストポイントをいくつかお伝えし

2024/04/17: 更新 内容を更新した記事を書きましたので、よかったらこちらも併せて、ご覧ください。 zenn.dev こんにちは！フロントエンドエキスパートチームの@nus3_です。 kintone のフロントエンド刷新プロジェクト（フロリア）では、品質を保ったまま開発を加速させるためにフロントエンドのテストを積極的に行っています。 今回はそんなフロントエンドのテストの実装例をいくつか紹介します。この記事がフロントエンドのテストを行う上での参考になれば幸いです。 テストに使用する主なパッケージ コンポーネントのテスト 補足: Testing Library の記法をチェックしてくれるeslint-plugin-testing-library カスタムフックのテスト 補足: React v18 では @testing-library/react の renderHook を使う 参考

近日連投していた Next.js 記事のサンプルコードを公開しました。このサンプルコードを元に、私のフロントエンドディレクトリ構成・テスト観点を紹介します（あくまで執筆現在の脳内アウトプットになりますのでご了承ください） フロントエンドディレクトリ構成の事情 タイトルの「フロントエンドディレクトリ構成」をさす「Components」のディレクトリ構成は、いつも悩みのタネです。このモジュールシステムは「デザインシステム観点・アクセシビリティ観点・フロントエンド実装観点」の 3 つの観点が混在するため事情が複雑です。どうせ作るのなら「デザイナー・フロントエンド」どちらの開発基盤にもなりえる、盤石なモジュールシステムを目指したいですよね。 "AtomicDesign やめました"という声をたまに聞くのですが「デザインシステム的に捨てていいの？」と思うこともあるので、とくに要望がなければ、筆者は「

Reactアプリケーションのテスト戦略について ・フロントエンドのテストの種類 ・トレードオフ ・所属しているチーム / プロダクトの状況 ・テスト戦略 ・Storybookを使ったこれからのテストへ

ウェブアプリケーションの開発においてE2Eテストの自動化は身近なトピックです。SeleniumやPuppetter、PlaywrightやAppiumなどがブラウザ・ネイティブアプリの自動操作のOSSとしてよく挙げられます。しかし、それらの裏側はご存知でしょうか？ 本トークではこれらのツールの背後…

結局のところ、E2Eとフロントエンドテスト(Jest Integration Test)のどちらでテストを書いたらいいのかテストフロントエンドReact TL;DR Jest Integration Test でやったほうが良さそうなこと First Fetch(ページの初回表示)で完結するもの Mutation系(#post, #patch, #delete)はE2Eが適切そう ユーザー操作が伴うが、Requestが発生しないもの バリデーション ボタンのDisabled属性 ドラッグアンドドロップ パターンが複数ある場合は、1つはE2Eで行い、残りのバリエーションはJest側で担保すると良い 本題はここからになります 👉 この記事の対象とするテスト なぜテストを書くのかを整理する 安心して開発するためにも、どんどんテスト書いていきたい バグが減らないので、ソフトウェアごと吹き飛ばして

JSConf JP 2021 でトークしたスライドです。 このスライドの内容を文字にしているブログ記事はこちら https://blog.nnn.dev/entry/2021/12/03/123000 トークのアーカイブはこちら https://www.youtube.com/watch?v=5H3Sswp5qYg&t=1155s https://jsconf.jp/2021/talk/testing-approach-to-support-web-front-end-replacement

Storybook・テストに関して「メンテナンス工数に見合うだけのメリットがあるか？」という議論を、経験したことはないでしょうか。フロントエンドは、とにかく動くものを作ることが優先され、Storybook・テストが二の次になっている現場も少なくないと思います。 限りある工数を割きチームで取り組むものですから、導入するためには「どういったメリットがあるのか？」という具体的な例をチームに示す必要があります。これは今年、筆者が体験した実メリットのお話です。導入を躊躇している現場にむけ、参考になればと思い書きました。 【Storybook】不要な Global CSS を削除できた きちんとコンポーネント設計され、コンポーネントに閉じた指定をしていたとしても、どこかに必ず Global な CSS があると思います。何かしらの資材を受け継ぎ立ち上げたプロジェクトに関しては、Global な CSS

Boost Your Performance and Developer Productivity with Jakarta EE 11

Storybook CSF3.0 の概要 単体テスト・結合テスト・Storybook を充実させるためには、多くの工数が必要です。堅牢なフロントエンド開発のためとはいえ、これらのメンテナンスは日に日に負担が増しています。似かよったテストケースでは、同じような下作業をそれぞれに用意する必要がありました。 Component Story Format（CSF）は、この課題への取り組みとして開発されました。「様々なソリューションで再利用可能な資材」 が用意できれば、開発は素早く・より楽しいものになります。リリース間近の CSF3.0 はより一層、そのゴールを明確に示してくれています。 testing-library で Story にインタラクションを CSF3.0 新機能の中で際立っているものが play 関数 です。@testing-library/user-eventを利用すると、Stor

根本の問題意識 ソフトウェアの設計スキルはどのように獲得する（させる）ことが効果的であるのか ソフトウェアアーキテクチャの目的 そもそもソフトウェアアーキテクチャはどのような欲望を満たすための方法か ソフトウェアアーキテクチャの目的は、求められるシステムを構築・保守するための必要な人材を最小限に抑えること である。 (CLEAN ARCHITECTURE) 「求められるシステムを構築・保守するための必要な人材を最小限に抑えたい」 => 構築容易性 と 保守容易性 を確保したい 構築容易性 「構築しやすさ」とは？ ソフトウェアを構築するとはどういうことか ソフトウェアの2つの価値: 「振る舞い」と「構造」 振る舞い: 要件を満たすこと => いわゆる機能 構造: 振る舞いを簡単に変更できること => いわゆるアーキテクチャ 構築しやすさ=価値の生み出しやすさ 要件を満たしながら振る舞いを変更

こんにちは。メルペイのフロントエンドエンジニアの @tokuda109 です。Merpay Tech Openness Month 2021 の13日目を担当します。 メルペイのフロントエンドチームは、管理している全てのサービスに対し E2E テストを継続的に実行しています。E2E テストの導入に関する取り組みについては「Cypress + TestRail による Frontend E2E テストの効率化について」で詳しく書かれています。 全てのサービスで E2E テストが導入されていますが、この記事で述べられているとおり、安定して動作しているわけではありません。テストが失敗することが多々発生していました。 本記事では、E2E テストがなぜ安定して動作しないかを調査し、どのように改善したかを紹介します。 背景 メルペイのフロントエンドチームは、テスト、パフォーマンス、アクセシビリティ、セ

先日、Next.js におけるテスト手法について、公式ドキュメントが追加され話題になりました。 取り上げられている 2 者はよく知られており、いずれかに触れたことがある方も多いかと思います。この公式ドキュメントページでは「何を使って」を紹介しているのみなので、どちらを選ぶべきか悩んだ方もいるのではないでしょうか？ Cypress Jest & React Testing Library この判断についてはドキュメントに書かれていなかったので、筆者なりの見解を紹介していきたいと思います。 お勧めは「Jest & React Testing Library に寄せる」 Cypress は GUI が素晴らしく、テストを書く環境としてはとても体験が良いです。しかしテストが増えていくにつれ、以下のような点で DX 低下を招くことがあります。 CI の実行コストが高く、実行時間が長い cypress

ソフトウェアテストはソフトウェア開発において不可欠な活動です。欠陥を検出する、品質を確認する、テスト駆動開発などで開発を導くといった、様々な用途でソフトウェアテストは活用されています。そのソフトウェア...

TDDに関する議論には多くの混乱が見られます。現在は議論が落ち着いているようですが、あまり情報がまとまっていないのでTDDの導入にいまいち踏み切れない方も多くいることでしょう。そこで、そもそものTDDの定義から関連する議論の要点まで、TDDに関連する情報を整理しました。 TDDの定義としては、 「TDDはテストファーストの上に RED / GREEN / REFACTOR のサイクルによる設計・実装手法を加えた開発手法である」 という表現で大きな異論はないかと思われます。 TDDの効果に関しては、TDDの実践によって以下のようなことが起こると言われています。 十分な量の自動テストが存在する状態になり、以下のような恩恵を受けることができる エラーの発見や防止がしやすくなる → プロダクトの品質の指標の一つである不具合発生率の低下に貢献する リファクタリングのリスクを減らし、リファクタリングを