フロントエンド:単体テストの観点
対象読者 Jest や Testing Library のテストの書き方は理解しているが、何をテストすべきかわからないという方。 動機 近年、フロントエンドでもテストを書くことが重要視されるようになってきました。 テスト導入する際、共通で利用するコンポーネントや関数などをテストする記事は多いですが、何をテストすべきかについての記事が見当たらなかったため、私が意識してるテスト観点を執筆しようと思いました。 まず初めに各種テストの説明 単体テスト 関数やメソッドなどの最小単位の部分を個別にテストする手法のこと。 利用ツール例 Jest React-Testing-Library 結合テスト 複数のコンポーネントが、互いにうまく動作していることをテストする手法のこと。 利用ツール例 Jest React-Testing-Library End to End （E2E）テスト ユーザーが実際にシス
なぜJestのmockライブラリに混乱してしまうのか？ - Qiita
はじめに JavaScriptのモックライブラリでは、 sinon などが有名であるが、テスティングフレームワークに Jest を使ってるならば Jest組み込みのモックライブラリで済ませたほうが学習コスト少なくて済むだろうと思える。 しかし、 sinon の感覚でJestのモックライブラリを使おうとすると違和感というのか、モックへの考え方の違いに気づかされる。 ということで今回は、Jestのモックライブラリの考え方と使い方を整理していきたいと思う。 モックの用語整理とJestモックライブラリの位置づけ モックと一言でいっても、それが指す内容は微妙に異なる。 ここでは、モックを 広義のMock Object と 狭義のMock Object と分けて整理してくれているテスト駆動開発を参考に用語を整理する。 テスト駆動開発では、モック用語を、下図のとおり、テストダブルとそのサブクラスとして
GitHub ActionsとCypressを使って、テスト自動化環境をゼロから構築する - Qiita
はじめに 本記事は、アジャイル開発手法におけるQAの参考になれば、と作成しました。 開発、QA、また今後、それらに携わっていく方々の即戦的知識になればと思います。 また、本記事で作成したソースコードは下記に公開しています。 https://github.com/EIKINAKAYAMA/cypress-demo そもそもテストって？ システム開発では、システムがリリースされるまで、 作成された開発物に問題がないかを色んなテストでチェックします。 UIテスト ブラックボックステスト 負荷テスト リグレッションテスト 退行テスト 受け入れテスト アドホックテスト etc... 上記は一部を載せていますが、まだまだ沢山あります。 会社や組織によって呼び方が変わったり、テストというよりもテスト手法だったり、同じようで厳密には内容が異なったりと多種多様のテストが存在し、必ずしも全てのテストを実施して
(自分の) JavaScript のユニットテストの書き方
(社内用ドキュメントの公開版) テストのポリシー 前提として、ユニットテストを導入するコストを、限界まで低くすることを目指す。テストが根付いていない言語環境や文化では、放っておくとテストが書かれないまま実装が進行し、結果としてテスト不可能な巨大な雪だるまが完成する。こうなるとメンテコストが高いE2Eを大量に書かないといけなくなり、テストの実行時間が膨れ上がっていく。 そうなる前に、ユニットテストを書きやすい環境を維持し、ユニットテストとして問題を切り分けられるような環境を維持する。とにかく書きやすさを重視し、一つのユニットテストを書くオーバーヘッドを限界まで下げる。 最初の一つを早い段階で書く 自分の経験的には、ユニットとテストの最初の一つを書いたらあとは自然とその周辺で増えていく。サンプルがあったら人はコピペする。逆にいうと最初の一つを書かない限り一切書かれない。まず一つ用意するのが大事
JestでTwitter OAuth 2.0の認可コード取得処理を自動化する
前提 TwitterのOAuth 2.0 Authorization Code Flow with PKCEを利用 + Confidential Clientを利用(not Public Client) Confidential ClientのHTTP APIのE2Eテストで必要な認可コード取得処理を自動化 自動テストしたい箇所 TwitterのOAuth 2.0 Authorization Code Flow with PKCEは、以下のようなフローとなります。詳細は、Developer Platformが参考になります plantuml @startuml title Twitter OAuth 2.0 Authorization Code Flow with PKCE actor "User" as user box "YourWebApp" #dee6ee participant
フロントエンドのテストのモックには msw を使うのが最近の流行りらしい
皆様フロントエンドのテストを書いていらっしゃいますでしょうか？ フロントエンドのテストを書くときには API コールする処理を全てモックする必要があります。外部の API をコールする処理をテストに含めると API サーバーが落ちているなどの外部の要因によってテストが失敗してしまう可能性がありますし、テストを実行するたびに実際に API をコールしてしまうとサーバーに負荷がかかってしまうなど外部に対しても悪影響を与えてしまいます。 さて、従来のモックする手段としては Jest のモックを利用して axios や fetch などのモジュールをモック化する手法がよく使われていたかと思います。 最近のテスト手法として API コールをモックする際に Jest ではなく Mock Service Worker (以下 msw ）を使用する手法が注目されています。実施にどのように使用されているのか
リーダブルテストコード - Qiita
はじめに よく言われるように、ソースコードというものは書かれることよりも読まれることの方が多く、それゆえ読みやすいコードを書くということが非常に重要です。それはテストコードにおいても同様であり、プロダクトコードと同等に資産として扱う必要があります。 テストコードは具体的な値を用いて記述し、また複数の変数の値の組み合わせでテストケースを起こすため、プロダクトコードと比べて冗長になりがちです。 書籍『リーダブルコード』の14章でもテストコードの読みやすさについて触れられていますが、本稿では読みづらいテストコードをリファクタリングして読みやすくするためのテクニックを紹介したいと思います。 なおサンプルコードはJavaScriptで記述されており、そのテストコードはJest1を用いて書いています。 ソースコードはGitHubにあります。 リファクタリング(その壱) 以下の、決して読みやすいとはいえ
BrowserStack を用いたクライアントサイドのテスト
YAPC::Asia 2013 発表資料です。 JavaScript テスト事情の整理と、BrowserStack を用いたテストの紹介
JavaScriptでWebDriverのテストコードを書きましょ
JJUG CCC 2015 Spring セッション資料 企業システムを始めとしたエンタープライズ向けと位置づけられるJava EEですが、本質は大規模で信頼性の高いサーバーアプリケーションを開発するためのプラットフォームです。 いわゆるSNSやソーシャルゲームなどコンシューマー向けのサービスのアーキテクチャも大規模化・複雑化している中、Java EEが提供する機能は非常に魅力的です。 このセッションではコンシューマー向けのサービスなどで培われた JPAを用いた開発におけるデータベースのスケールアウト戦略 JUnitとJMeterクラスタで行うゲームサーバーの大規模負荷テストの自動化 など実践的なJava EE開発のケーススタディをご紹介します。
Setting up Mocha & JSCoverage
Mar 13, 2012 Since publishing my article on Javascript Testing with Mocha and follow-up on using JSCoverage, I’ve had some people asking questions about how to get it all set up. I’m going to go through a brief guide on how to take a project with tests in Mocha, and get coverage running on it. Here’s a motivational sample of the output we’ll be getting to: Step 1: Installing JSCoverage and Mocha I
『PhantomJSを使ったスマホサイトテストの自動化(前編)』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさんこんにちは！ スマホ版Ameba担当の川口です。 ちょうど一年前、同じようにJavaScriptを使ったテスト手法について記事を書かせていただいたのですが、今回も懲りずにまた同じようなテーマで再登場いたしました。 JavaScriptのテスト手法 さて、スマホ版Amebaの全面リニューアルから早くも１年経ったのですが、今回はそんなスマホ版Amebaで日々自動テストツールとして活躍してもらっているPhantomJSを紹介させていただきます。 長い記事になるため、今回は前編・後編に分けて以下のような構成でお送りいたします。 ●前編 ・Phanto
TypeScript0.9alphaをNode+Gruntで使うよ
Swift is the best programming language you should learn and make your dream app easily. Swift programming is a powerful yet easy-to-learn coding language created by Apple. It's frequently used for developing iOS and macOS applications, as well as tvOS and watchOS apps. While you can use other languages to create Apple apps, Swift is the preferred language, and it's recommended because its code is
フロントエンドJavaScriptにおける設計とテスト
今日話さないこと JavaScriptの基礎知識、jQueryの導入 気持ちいいUIやUXがうんちゃら CanvasやWebGLを使ったリッチでイケてるゲームの作り方
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
明日からはじめるテストのあるフロントエンド開発 ~ テスティングトロフィー ~
外部に依存したコードもテストで駆動する / Test-Driven Architecture - AWS Dev Day Tokyo 2018 - Speaker Deck
捗るかもしれないフロントエンド開発環境
【javascriptを使う人に知って貰いたい（エンジニア、デザイナ問わず）】karmaを使ったテスト駆動開発入門（ついでにJasmineも）
Java script testing framework for around html5 studies-
JavaScript Unit Test Why? What? How?
Unit-Testing With Jasmine
