あなたはフロントエンドの何をテストしたいのか。 - Qiita
フロントエンドのテストをしよう Webのフロントエンドの自動化を進めようか。という話をしていて、 「そもそもテストってなんだ？」 「フロントエンドに特有のテストってなんだ？」 「〇〇ってツール流行ってるらしいってどうよ？」 みたいなことを話をしていました。そうしたときに、やっぱり知識足らねぇなぁ。と思ったので、2,3日でゴリゴリと内容をまとめてみる作業をしてみました。 あんまりこういう書き方はしないんですが、私自身散発的な思考で、フロントエンドのテストを調べることをしたので、そのような語り口で書いてみようと思います。 以下の内容は、あくまで例なので、別にこういう仕事があったわけではないです。 とりあえず投げられた要求・仕様 とりあえずなんか仕事が振ってきた。パラパラと要求を聞いてみると、こんな感じだった。 承認のダイアログが欲しい メッセージのフォントはOswald メッセージは変更できる
AI駆動開発と現状とのギャップを示す - ブロッコリーのブログ
はじめに 〜記事執筆のきっかけ〜 先日、以下の記事についてのツイートが流れてきました。 zenn.dev この記事の内容については、ChatGPTをはじめとするAIによるテストの可能性を示した素晴らしい内容だと思います。 ですが、果たして"今時点（元記事の執筆時点）の"出力結果*1が実用に耐えうるものになっているのか検討し、提示する必要もあると感じました*2。 そこで本記事では、テストエンジニアである私の回答例と"今時点の"AIの出力結果を比較しギャップを示すことを目的とします*3。 決して、AIによるテスト自動生成の進化自体を否定している訳ではないことを念頭にお読みいただければと思います。 結論 本記事では、"今時点の"AIの出力結果に対して、以下の結論を導き出しています。 状態遷移図のテスト設計の題材では、根幹となる機能に関する不具合が含まれていた デシジョンテーブルのテスト設計の題材
仕様書とテストを用いた「AI駆動開発」
数年前にAIを離れ現在はフロントエンドをやっているのですが、半年くらい前に思い切り引き戻されました。画像生成AIにおけるmidjourneyとstable diffusionの登場です。noteのCTO深津さんが記事を出したと思ったのも束の間、急速に進化を果たしました。 絵柄の固定・ポーズの指定・マシンスペックなど、日々さまざまな問題を解決しながら新たな技を身につけています。 しかし、同等かそれ以上に話題になっているのは大規模言語モデル(Large Language Model)かもしれません。ChatGPTが話題になった思ったら、BingやPerplexity,You.comなど大規模言語モデルを交えたサービスが次々と登場しました。 活用方法もたくさん見つけられており、私は特に以下の二つの記事が好きです。 「感情回路」の記事に入力(プロンプト)でここまで変わるのかと感動したことを覚えてい
フロントエンドにおける「単体テストの考え方/使い方」
本稿における「単体テスト」とは自動テストにおける単体テストを指します。手動テストのことではないので、ご了承ください。 単体テストの考え方/使い方という本を読みました。筆者自身、「単体テストはプロダクションコードの付属」という意識がどこかにありました。この本を読んで、単体テストについてあまりに何もわかってなかったことに気付かされ、単体テストの設計はプロダクションコードの設計と同じくらい重要という意識に変わりました。何のために単体テストをやるのか、いいテストとは、「単体」とは、など多くの点で学びを得られ、また、多くのプラクティスとアンチパターンを知ることができました。 本稿はこの本を読んで得られた学びを、フロントエンド開発、特にコンポーネント開発に適用することを試みた際のまとめです。より詳細な解説を求む方には本を手に取ってもらう前提で、できるだけポイントを抑えられるようにまとめることを目指しま
フロントエンドの"ちょうどいい"自動テストのはじめかた - Atrae Tech Blog
Wevoxのフロントエンドエンジニアをしているタガミです。最近はmonorepo構成に移行中のWevoxフロントエンドのテストやデザインシステムなどをいい感じにしようとしています。 この記事では、WevoxというSaaSプロダクトのフロントエンドにおける自動テストの話をします。Wevoxはリリースから5年以上が経過し、チームのメンバーも増え、またソースコードも巨大化しています。そんな中でフロントエンドも"式年遷宮"をして、改善を繰り返しています。中にはソースコードをガラッと変えるようなリファクタもあり、担当するエンジニアにとってはデグレの心配が付き纏います。そんな日々変化するフロントエンドを支えるのが自動テストです。 Wevoxの開発チームは決して大人数ではありません。そんなチームでも品質の改善のために一歩ずつ改善しつつある経験をもとに、フロントエンドの自動テストポイントをいくつかお伝えし
実装例から見る React のテストの書き方 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！フロントエンドエキスパートチームの@nus3_です。 kintone のフロントエンド刷新プロジェクト（フロリア）では、品質を保ったまま開発を加速させるためにフロントエンドのテストを積極的に行っています。 今回はそんなフロントエンドのテストの実装例をいくつか紹介します。この記事がフロントエンドのテストを行う上での参考になれば幸いです。 テストに使用する主なパッケージ コンポーネントのテスト 補足: Testing Library の記法をチェックしてくれるeslint-plugin-testing-library カスタムフックのテスト 補足: React v18 では @testing-library/react の renderHook を使う 参考リンク 色々なテスト事例 setTimeout を使うコンポーネントのテスト 補足: Storybook の story を使
私のフロントエンドディレクトリ構成・テスト観点 2022
近日連投していた Next.js 記事のサンプルコードを公開しました。このサンプルコードを元に、私のフロントエンドディレクトリ構成・テスト観点を紹介します（あくまで執筆現在の脳内アウトプットになりますのでご了承ください） フロントエンドディレクトリ構成の事情 タイトルの「フロントエンドディレクトリ構成」をさす「Components」のディレクトリ構成は、いつも悩みのタネです。このモジュールシステムは「デザインシステム観点・アクセシビリティ観点・フロントエンド実装観点」の 3 つの観点が混在するため事情が複雑です。どうせ作るのなら「デザイナー・フロントエンド」どちらの開発基盤にもなりえる、盤石なモジュールシステムを目指したいですよね。 "AtomicDesign やめました"という声をたまに聞くのですが「デザインシステム的に捨てていいの？」と思うこともあるので、とくに要望がなければ、筆者は「
ブラウザ自動操作技術の深層へ、直接触れて学ぶ WebDriver と Chrome DevTools Protocol
ウェブアプリケーションの開発においてE2Eテストの自動化は身近なトピックです。SeleniumやPuppetter、PlaywrightやAppiumなどがブラウザ・ネイティブアプリの自動操作のOSSとしてよく挙げられます。しかし、それらの裏側はご存知でしょうか？ 本トークではこれらのツールの背後にいるWebDriver、Chrome DevTools Protocolsに焦点を当てます。 WebDriver、CDPとはなにか、その違い、仕様について、PHPエンジニアに身近な言語を用いて"直接"実装することを通じて解説します。 本トークを通じて直接触れることでライブラリでwrapされている裏側まで知ることできます。E2Eテスト自動化の課題に出会ったときに「裏側がこうだからたぶんこういうことだよね」と想像できるようになる、少し世界の見え方が変わる時間を提供します。
結局のところ、E2Eとフロントエンドテスト(Jest Integration Test)のどちらでテストを書いたらいいのか - Qiita
結局のところ、E2Eとフロントエンドテスト(Jest Integration Test)のどちらでテストを書いたらいいのかテストフロントエンドReact TL;DR Jest Integration Test でやったほうが良さそうなこと First Fetch(ページの初回表示)で完結するもの Mutation系(#post, #patch, #delete)はE2Eが適切そう ユーザー操作が伴うが、Requestが発生しないもの バリデーション ボタンのDisabled属性 ドラッグアンドドロップ パターンが複数ある場合は、1つはE2Eで行い、残りのバリエーションはJest側で担保すると良い 本題はここからになります 👉 この記事の対象とするテスト なぜテストを書くのかを整理する 安心して開発するためにも、どんどんテスト書いていきたい バグが減らないので、ソフトウェアごと吹き飛ばして
テスト優先度をあげたくなる実話 - フロントエンド版 -
Storybook・テストに関して「メンテナンス工数に見合うだけのメリットがあるか？」という議論を、経験したことはないでしょうか。フロントエンドは、とにかく動くものを作ることが優先され、Storybook・テストが二の次になっている現場も少なくないと思います。 限りある工数を割きチームで取り組むものですから、導入するためには「どういったメリットがあるのか？」という具体的な例をチームに示す必要があります。これは今年、筆者が体験した実メリットのお話です。導入を躊躇している現場にむけ、参考になればと思い書きました。 【Storybook】不要な Global CSS を削除できた きちんとコンポーネント設計され、コンポーネントに閉じた指定をしていたとしても、どこかに必ず Global な CSS があると思います。何かしらの資材を受け継ぎ立ち上げたプロジェクトに関しては、Global な CSS
モックは必要悪で、しないにこしたことはない - blog.8-p.info
Mockito や gomock が使いやすいせいか、単体テストというのはモックするものである、という思い込みがあるのか、人々がモックしすぎているのを時折みかける。 モックは必要悪で、しないにこしたことはない。外部の API サーバーとかはガンガン叩くわけにもいかないけれど、ファイル読み書きくらいは、実際にファイルを作ったり消したりしてしまっていい。/etc/passwd を消すとか、1GB のファイルを作るとかだと難しいかもしれないけれど、その場合でも、パスのプレフィックスを指定できるようにして、一時ディレクトリの中の etc/passwd を使うとか、ファイルサイズを指定できるようにするとか、逃げ道はいくつもある。そこを飛ばして「ファイル操作は一律モックしましょう」とか頑張りだすと辛いことになりがちだ。 モックの一番の問題は、本番とテストで違うコードが走ることで、これは自動テストの価値
Storybook 駆動開発 @ CSF3.0
Storybook CSF3.0 の概要 単体テスト・結合テスト・Storybook を充実させるためには、多くの工数が必要です。堅牢なフロントエンド開発のためとはいえ、これらのメンテナンスは日に日に負担が増しています。似かよったテストケースでは、同じような下作業をそれぞれに用意する必要がありました。 Component Story Format（CSF）は、この課題への取り組みとして開発されました。「様々なソリューションで再利用可能な資材」 が用意できれば、開発は素早く・より楽しいものになります。リリース間近の CSF3.0 はより一層、そのゴールを明確に示してくれています。 testing-library で Story にインタラクションを CSF3.0 新機能の中で際立っているものが play 関数 です。@testing-library/user-eventを利用すると、Stor
ソフトウェア設計を学びたい人々にまず教えるべきことはテスト技法ではないか - 余白
根本の問題意識 ソフトウェアの設計スキルはどのように獲得する（させる）ことが効果的であるのか ソフトウェアアーキテクチャの目的 そもそもソフトウェアアーキテクチャはどのような欲望を満たすための方法か ソフトウェアアーキテクチャの目的は、求められるシステムを構築・保守するための必要な人材を最小限に抑えること である。 (CLEAN ARCHITECTURE) 「求められるシステムを構築・保守するための必要な人材を最小限に抑えたい」 => 構築容易性 と 保守容易性 を確保したい 構築容易性 「構築しやすさ」とは？ ソフトウェアを構築するとはどういうことか ソフトウェアの2つの価値: 「振る舞い」と「構造」 振る舞い: 要件を満たすこと => いわゆる機能 構造: 振る舞いを簡単に変更できること => いわゆるアーキテクチャ 構築しやすさ=価値の生み出しやすさ 要件を満たしながら振る舞いを変更
Frontend E2Eテストの安定化の取り組み | メルカリエンジニアリング
こんにちは。メルペイのフロントエンドエンジニアの @tokuda109 です。Merpay Tech Openness Month 2021 の13日目を担当します。 メルペイのフロントエンドチームは、管理している全てのサービスに対し E2E テストを継続的に実行しています。E2E テストの導入に関する取り組みについては「Cypress + TestRail による Frontend E2E テストの効率化について」で詳しく書かれています。 全てのサービスで E2E テストが導入されていますが、この記事で述べられているとおり、安定して動作しているわけではありません。テストが失敗することが多々発生していました。 本記事では、E2E テストがなぜ安定して動作しないかを調査し、どのように改善したかを紹介します。 背景 メルペイのフロントエンドチームは、テスト、パフォーマンス、アクセシビリティ、セ
Testing with Next.js
先日、Next.js におけるテスト手法について、公式ドキュメントが追加され話題になりました。 取り上げられている 2 者はよく知られており、いずれかに触れたことがある方も多いかと思います。この公式ドキュメントページでは「何を使って」を紹介しているのみなので、どちらを選ぶべきか悩んだ方もいるのではないでしょうか？ Cypress Jest & React Testing Library この判断についてはドキュメントに書かれていなかったので、筆者なりの見解を紹介していきたいと思います。 お勧めは「Jest & React Testing Library に寄せる」 Cypress は GUI が素晴らしく、テストを書く環境としてはとても体験が良いです。しかしテストが増えていくにつれ、以下のような点で DX 低下を招くことがあります。 CI の実行コストが高く、実行時間が長い cypress
優れたテスト容易性を実現するためのポイント - PrAha ENGINEER LAB
ソフトウェアテストはソフトウェア開発において不可欠な活動です。欠陥を検出する、品質を確認する、テスト駆動開発などで開発を導くといった、様々な用途でソフトウェアテストは活用されています。そのソフトウェア...
TDDについて整理してまとめてみた
TDDに関する議論には多くの混乱が見られます。現在は議論が落ち着いているようですが、あまり情報がまとまっていないのでTDDの導入にいまいち踏み切れない方も多くいることでしょう。そこで、そもそものTDDの定義から関連する議論の要点まで、TDDに関連する情報を整理しました。 TDDの定義としては、 「TDDはテストファーストの上に RED / GREEN / REFACTOR のサイクルによる設計・実装手法を加えた開発手法である」 という表現で大きな異論はないかと思われます。 TDDの効果に関しては、TDDの実践によって以下のようなことが起こると言われています。 十分な量の自動テストが存在する状態になり、以下のような恩恵を受けることができる エラーの発見や防止がしやすくなる → プロダクトの品質の指標の一つである不具合発生率の低下に貢献する リファクタリングのリスクを減らし、リファクタリングを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reactアプリケーションのテスト戦略
Webフロントエンドのリプレースを支えるテストの考え方 / JSConf JP 2021
チームで取り組みテスト改善のあゆみ
