フロントエンドのテスト構成について考えてみた in 2023
はじめに この記事では、 フロントエンドの開発において意義のあるテストはなにか？ それらをコスパよく実現するためにはどうすればよいか？ について考えて、作った構成を紹介します。 前提 下記の技術スタックを利用していますが、これ以外のスタックでも応用可能な仕組みが多いと思います。 Next.js Storybook playwright msw msw-snapshot （拙作） 注意事項 この記事の構成は、まだまだ実験的な機能だったり怪しい技術が一部採用されています。 msw-snapshot 拙作のライブラリであって、動作が怪しい可能性がめっちゃあります。 Next.js の testmode playwright + msw を実現するために必要でした。 まだまだ全然まともに動かないかもしれません。（サンプルリポジトリの単純なテストは動いた） サンプル 下記のリポジトリにサンプルを用意
フロントエンドの"ちょうどいい"自動テストのはじめかた - Atrae Tech Blog
Wevoxのフロントエンドエンジニアをしているタガミです。最近はmonorepo構成に移行中のWevoxフロントエンドのテストやデザインシステムなどをいい感じにしようとしています。 この記事では、WevoxというSaaSプロダクトのフロントエンドにおける自動テストの話をします。Wevoxはリリースから5年以上が経過し、チームのメンバーも増え、またソースコードも巨大化しています。そんな中でフロントエンドも"式年遷宮"をして、改善を繰り返しています。中にはソースコードをガラッと変えるようなリファクタもあり、担当するエンジニアにとってはデグレの心配が付き纏います。そんな日々変化するフロントエンドを支えるのが自動テストです。 Wevoxの開発チームは決して大人数ではありません。そんなチームでも品質の改善のために一歩ずつ改善しつつある経験をもとに、フロントエンドの自動テストポイントをいくつかお伝えし
Playwright
Playwright enables reliable end-to-end testing for modern web apps. Cross-browser. Playwright supports all modern rendering engines including Chromium, WebKit, and Firefox. Cross-platform. Test on Windows, Linux, and macOS, locally or on CI, headless or headed. Cross-language. Use the Playwright API in TypeScript, JavaScript, Python, .NET, Java. Test Mobile Web. Native mobile emulation of Google C
テストの自動化とテスト駆動開発
組織としてテスト自動化に取り組むべき理由と、手段としてのテスト駆動開発を紹介する講演資料です。以下のような内容です。 ねらい： ・主に顧客向けの業務システム(B2B)を開発している、 ・プロジェクトベース、ウォーターフォールプロセスが主流の開発現場や運用保守の現場にいる、 ・マネージャーのかたに向け、 ・テスト自動化が自分たちのメリットになると納得してもらい、 ・その道筋として2つのアプローチを紹介して、 - テスト駆動開発 - ペアプログラミング ・組織的・長期的に取り組む価値を感じてもらう アジェンダ: 1.自動化したい理由 2.必要な人材を考える 3.テスト自動化の端緒 ～テスト駆動開発について～ 4.深めつつ広げる鍵 ～ペアプログラミングについて～ 5.見る夢について
React Hooksでテストをゴリゴリ書きたい - react-reduxやaxiosが使われているような場合もゴリゴリテストを書きたい
2023/12/25 続編が出ました🙆♂️ この記事は記述されてからある程度時間が経過してしまっており、自分の考え方も少し変化してきています。 その変化について新しく以下の記事を書いたので、ぜひ参照してみてください。 追記 以下の記事は@testing-library/react-hooksのv3系を使っていました。 v5系に上げるとHookResultではなくRenderResultになったようなので、v5を使われる場合はRenderResultの方をお使いください🙏 🦍 テストコードを書くことがプロダクトコードを書くことと、同じくらい重要であるという認識が浸透しつつある昨今、多くの関数にはおそらくテストがあることと思います😊 最近はReactの開発がメインです。 僕は毎回フロントエンドでテストを書く場合は以下のような方針をとっています。 コンポーネントのテスト storybo
テストを自動化するのをやめ、自動テストを作ろう
July Tech Festa 2020 TrackB https://jtf2020.peatix.com/
レガシープロジェクトを引き継いだ時、最初にするべき７つのこと - Qiita
営業一課で使っている PHPアプリを保守してくれないかな？ ○○さんが１人で作ってメンテしてたやつなんだけど 皆さんは上司からこんな仕事を振られたことはないでしょうか？私は過去に何度か経験した1のですが、こういった仕事はなぜか： 正確な仕様を知っている人はいない（知ってた人は辞めた） テスト計画書・デプロイ手順書・仕様書といったドキュメントは無い ソースコードはもちろんスパゲッティ でも、業務ではガッツリ使われているので廃止できない というレガシープロジェクトばかりでした。この記事では、レガシープロジェクトを引き継いでしまった時に、最初に何をするべきか書いていきたいと思います。 なお、ここで最悪なのは「とりあえず、緊急の不具合から直してしまおう」と、いきなりコードの修正にかかることです。 ※おことわり： 「レガシー」には様々な定義がありますが、この記事では「遵法的な職場の」「PHPやRai
テストが辛いを解決するテスト駆動開発のアプローチ at PHPカンファレンス仙台2019
"テストが辛いを解決するテスト駆動開発のアプローチ" at PHPカンファレンス仙台2019
Rspec/Capybara/Turnipの入門記事を全力でまとめてみた - 酒と泪とRubyとRailsと
Rspec/Capybara/Turnipの入門記事を全力でまとめてみた Aug 30th, 2013 Tweet さっき、『 The Rspec Book』を読み終えました。厚めの本ですが、RspecやCucumber、Webrat、Seleniumなどを活用するためのノウハウ満載で大満足でした！ ということで、この本で読んだ内容を忘れないようにするためと、その過程でRspec/Capybaraなどのネット資料をあつめたので、まとめるためにこの記事を書きます。もし、間違いを発見した場合や他にもいいリソースがあれば、是非メッセージを願いします！ テスト駆動開発(TDD)と振る舞い駆動開発(BDD) テスト駆動開発(TDD)とは、コードを書く際に最初にテストを書き、次にテストが通る最低限のコードを書き、その後にリファクタリングしていく開発手法です。一方で振る舞い駆動開発(BDD)はTDDの発
『PhantomJSを使ったスマホサイトテストの自動化(前編)』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさんこんにちは！ スマホ版Ameba担当の川口です。 ちょうど一年前、同じようにJavaScriptを使ったテスト手法について記事を書かせていただいたのですが、今回も懲りずにまた同じようなテーマで再登場いたしました。 JavaScriptのテスト手法 さて、スマホ版Amebaの全面リニューアルから早くも１年経ったのですが、今回はそんなスマホ版Amebaで日々自動テストツールとして活躍してもらっているPhantomJSを紹介させていただきます。 長い記事になるため、今回は前編・後編に分けて以下のような構成でお送りいたします。 ●前編 ・Phanto
フロントエンドJavaScriptにおける設計とテスト
今日話さないこと JavaScriptの基礎知識、jQueryの導入 気持ちいいUIやUXがうんちゃら CanvasやWebGLを使ったリッチでイケてるゲームの作り方
Javaテストフレームワーク「JUnit 4.11」が公開 | OSDN Magazine
11月14日、JavaテストフレームワークJUnitの最新版「JUnit 4.11」がリリースされた。アサーションを記述するためのHamcrestライブラリのアップデートや「@Parameters」アノテーションの導入などが特徴となる。 JUnitはJavaで単体テストを行うためのフレームワーク。Common Public License Version 1.0でリリースされており、さまざまなプラットフォームで利用できる。 JUnit 4.11は、2011年9月にリリースされたバージョン4.10以来の最新版となる。アサーションを記述するためのマッチングライブラリ「Hamcrest」がバージョン1.3にアップデートされ、テストマッチング機能が改善された。出力されるエラーメッセージも改善され、アサーションの失敗を伝えるだけでなく、その説明も表示されるようになっている。カスタムマッチャーを作成で
「iPad mini」「Nexus 7」「Kindle Fire HD」を比較した動画 (ミキサーで)
Bledtec社が、タブレット端末「iPad mini」「Nexus 7」「Kindle Fire HD」を自社のミキサーにかける実験動画を公開しています。 同社は、自社のブレンダー(ミキサー)のプロモーションの一環として、ゴルフボールからスパム缶まであらゆるものを粉々にする実験を行うことで知られています。 iPhoneの新モデルが発売される度に実験動画が公開されるので、なかばiPhone発売の恒例行事にすらなりつつあります。 今回も社長のトム・ディクソン氏が自らテストを実施。 今回は単一のデバイスではなく、7インチ級のタブレットを同時にミキサーにかけて比較するという趣向のようです。 発売されて間もないiPad miniも含まれています。 小型とはいえ、タブレットはそのままでは入らないので、下準備としてミキサーの本体に叩き付けて割ってしまいます。 ミキサーの頑丈さもさることながら、真新しい
JavaScriptのテストツール「testem」が素晴らしいぞ - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） JavaScriptユニットテスト一年生の私が、Nettuts+ のチュートリアルで知ったテストツール 「testem」のお陰で大変捗ったので是非お勧めしたく、ここで紹介してみます。 testem ってなに testem via GitHub : airportyh/testem Unit testing in Javascript can be tedious and painful, but Testem makes it so easy that you will actually want to write tests. 要するに、面倒なJSのユニットテストをより快適にしてみんなでハッピーにテスト書こうよ！というツールです。 testem自体はnode.jsベースで動作し、Jasmine/QUnit/Mochaに対応して
Jenkins はじめました + ほか3つ - mixi engineer blog
こんにちは。加藤和良です。 まずあの話を書いて、それを前提にあの話を書いて、みたいなキューが筆者の中にはあったのですが、正直キューの先端につまってる話はだんだん個人的な関心および記憶がうすれてきました! 昔のはなしですからね。 というわけで、最近のまとめをさらっと書いて、新しいネタをすぐ書ける状態にリセットしたいと思います。 Jenkins mixi ではバージョン管理システムとして Subversion を使っています。安定した、いつでもリリースできるバージョンを trunk に、開発中の機能は branches 以下に作業ブランチをつくり、レビューや QA などの後に trunk にマージする、という運用です。 Buildbot はこのうち trunk だけを追っていたのですが、徐々に「このブランチも Buildbot で追うようにして、結果をこの IRC チャンネルに書きこんでほしい
パフォーマンステスト自動化の取り組み - GeekFactory
このところ、Webアプリやバッチのパフォーマンステストを自動化するために四苦八苦してるので書いてみます。 パフォーマンステストは泥臭い作業です。毎回似たような感じで待ち時間の長い単調作業と、ボトルネックを解析して実装やミドルウェア設定を見直すような神経を使う作業が入り混じって疲れます。このうち前者を自動化してしまえば、本質的な部分に力を注げるだけでなく、夜間や休日を活用して多くのバリエーションを試すことができます。 パフォーマンステストの流れはWebアプリとバッチで以下のように整理できると思います。 Webアプリ デプロイメント クライアントサイド（負荷生成側）で必要なデータセットの準備 サーバサイドで必要なデータセットの準備 アプリケーションの設定 負荷生成 クライアントサイドのログ収集 サーバサイドのログ収集 分析 バッチ デプロイメント サーバサイドで必要なデータセットの準備 アプリ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「質」のいいユニットテストを書くためのプラクティス / practices to write better unit test