JestでYupのvalidationSchemaのテストを書く - Qiita
React+Yupでフォームを作っていた際、フォームの項目が増えれば増えるほどバリデーションの抜け漏れが増え、QAで返ってくる項目が多くなってきたのでこれはよくないな…と思ったのと手作業で何個も色んな項目を都度チェックしていくのが面倒くさいなという気持ちになったので、Jestを使ってYupのバリデーションのユニットテストを書いてみました。 サンプルコード GitHubに実際に動作するコードをアップしてます。 https://github.com/unachang113/yup-schema-test-sample 1. 簡単なschemaのテスト 1.1 テスト対象のスキーマ まずは以下の簡単なschemaのテストから行っていきます。 import * as yup from "yup"; export const idValidationSchema = yup .string() .r
フロントエンドにおける「単体テストの考え方/使い方」
本稿における「単体テスト」とは自動テストにおける単体テストを指します。手動テストのことではないので、ご了承ください。 単体テストの考え方/使い方という本を読みました。筆者自身、「単体テストはプロダクションコードの付属」という意識がどこかにありました。この本を読んで、単体テストについてあまりに何もわかってなかったことに気付かされ、単体テストの設計はプロダクションコードの設計と同じくらい重要という意識に変わりました。何のために単体テストをやるのか、いいテストとは、「単体」とは、など多くの点で学びを得られ、また、多くのプラクティスとアンチパターンを知ることができました。 本稿はこの本を読んで得られた学びを、フロントエンド開発、特にコンポーネント開発に適用することを試みた際のまとめです。より詳細な解説を求む方には本を手に取ってもらう前提で、できるだけポイントを抑えられるようにまとめることを目指しま
Learn, improve and generate code with AI | Refraction
with AIRefraction is a code generation tool for developers. It uses AI to generate code for you. You can use it to generate unit tests, documentation, refactor code and more. Generate code in Generate code using AI in 56 languages — ABAP, Ada, Apex, Assembly, Batch, C, C#, C++, CameLIGO, Clojure, Cobol, CoffeeScript, CSS, D Lang, Dart, Elixir, Erlang, F#, Fortran, Go, GraphQL, Groovy, Handlebars,
Jest再入門 - 導入編 | 豆蔵デベロッパーサイト
JestはMeta(旧Facebook)社によって開発されたJavaScript向けのテストフレームワークです[1]。 Jestは、テストランナーからマッチャー、カバレッジ等のテストに必要な一連の機能が備わっています。また、それらのセットアップが非常に簡単であることから、現在のJavaScriptで最も多く利用されているテストフレームワークです。 出典：NPM Trend Jestはメジャーなプロダクトではありますが、フレームワーク等であらかじめセットアップされたものを何となく使っている方が結構多いのではと思います。 そこで本シリーズでは「Jest再入門」と題して、改めてJestのセットアップから基本的な使い方、応用編までを連載します。 第1回目は導入編として、セットアップや基本的な使い方を紹介します。 なお、ここではTypeScriptを実装言語として進めていきます。
JestのTips集10選。サーバーサイドでNode.jsのJestを書いたことない人向け
対象 業務レベルでサーバーサイドでJestを書いたことはないけれど、新プロジェクトでは書くことになったみたいな方を想定して記述しています。 Jestについては中々ベストプラクティスが集まりにくいので、経験的にこう書くと「きれいに」・「早く」・「正確に」書けるよというTipsを集めてみました。もし、よろしければお読みください。 前提 TypeScript Node.js Jest DBアクセスありの状態を想定しています 1. it文内では、必ず1回は、expectをつかって検証をする JestのPRをレビューしてるとたまに見受けるのですが、expectを使ってないケースがあります。 // NG it('userを正常に、作成できること', async() => { await createUser({ name: 'Mike' }); }); // OK it('pdfが正常に削除できること
Testing JavaScript をやってみたら学びがあって良かった話 - Adwaysエンジニアブログ
こんにちは。リファクタリングが大好きなフロントエンドおじさん梅津です。 自信を持ってリファクタリングするには信頼できる自動テストが必要ですよね。 じゃあ信頼できる自動テストとはなんだろう？どう書いたらいいんだろう？と考えていました。 とくにコンポーネントを含む UI テストに対しての悩みが強かったです。 そんなときに出会ったのが Testing JavaScript です。 この記事ではその Testing JavaScript の紹介をしたいと思います。 Testing JavaScript とは Testing JavaScript は PayPal のエンジニアである Kent C. Dodds によって作成された教材です。 ページを開いてすぐ目に飛び込んでくるテスティングトロフィーが特徴的ですね。 Testing JavaScript では、ここに記されている Static, Un
フロントのテスト戦略！の知見が集まるところ
フロントのテストはROIが読みづらいと思っている バックエンドとかのユニットテストは動作確認の手軽な方法としても効果わかりやすいから、とりあえず全部ちゃんと書いておきましょうとやりやすいが、フロントはブラウザでサクッと見られるのと、見た目に関する assertion がプログラミングではむずいので難しい なのでテストの粒度が個人の感覚ベースになってしまう。それはそれで正しい姿というかそうするしかないものかもしれないが、一度決まった指標みたいなのが言語化できないかを試みたい 成果物の定義 フロントエンドのベーシックな知識を持っているエンジニアが、自分が業務をしていく上で「ここはこういうテストを書いておかないとな」と迷いなく判断ができること。 フロントエンドのベーシックな知識のイメージ コンポーネントベースでアプリケーション組んだことがある 単体テストや Visual Regression T
React テスト応用、テストに悩む人へ
2022-05-06 更新 「React でコンポーネントテストを書くといいらしい、 React Testing Library や jest でサンプルを参考に書いてみたが 現実どうやってプロダクトコードに合わせていけばいいか分からない」 そういった方が対象となる本を目指しています。 いろいろ調べて実践したものの下記のように感じた方に適しているかもしれません。 - 結局テストで何を担保しようとしているか分からない - React のテストでハマっているか、Jest でハマっているか分からない - モックとかスパイとかアプリケーションとは遠い出来事も多くてピンとこない 誤り・ご指摘あればフィードバックいただけると嬉しいです。 無料で配布していますが、気に入ったらサポートなどいただけると今後もこの本をアップデートし拡張していく気持ちになれるのでよろしくお願いします。
なぜJestのmockライブラリに混乱してしまうのか？ - Qiita
はじめに JavaScriptのモックライブラリでは、 sinon などが有名であるが、テスティングフレームワークに Jest を使ってるならば Jest組み込みのモックライブラリで済ませたほうが学習コスト少なくて済むだろうと思える。 しかし、 sinon の感覚でJestのモックライブラリを使おうとすると違和感というのか、モックへの考え方の違いに気づかされる。 ということで今回は、Jestのモックライブラリの考え方と使い方を整理していきたいと思う。 モックの用語整理とJestモックライブラリの位置づけ モックと一言でいっても、それが指す内容は微妙に異なる。 ここでは、モックを 広義のMock Object と 狭義のMock Object と分けて整理してくれているテスト駆動開発を参考に用語を整理する。 テスト駆動開発では、モック用語を、下図のとおり、テストダブルとそのサブクラスとして
フロントエンドのテストを書く時に私が考えていること | DevelopersIO
最近フロントエンドのテストについて考えることが多いので、自分なりの観点をまとめてみます。 どの程度の粒度で書くのが適切かはプロジェクトやチームによって色々有ると思うので、 あくまで私個人としての考え方になりますのでご理解ください。 最終的にできあがったソースはこちら 環境 今回は以下のバージョンで検証しています。 Node: v15.8.0 Vue 3 Vue Test Utils 2 特にVue 3とVue Test Utils 2に関しては前バージョンからの変更箇所が多いので、実際に動かす場合は注意してください。 想定する画面 以下のようなテーブルからなる画面を想定します。 簡易なユーザー管理画面のようなイメージで、 削除フラグが立っているユーザーには取り消し線が付き 右のボタンを押すと削除フラグが立ち 管理者ユーザーの場合はボタンが非活性になる（削除できない） みたいな仕様とします。
はじめてのJEST入門：週末ライフ
JavaScriptのテストフレームワークであるJestの入門書です。 Jestのインストールから基本的なアサーション、モック化、UIテストからE2EテストやCIツールの導入など実践的な使い方まで紹介しています。Jestはユニットテストに必要な機能をほぼ網羅しているため、これからNode.jsやJavaScriptのテスト書き始める人には最適なテストフレームワークです。ぜひ本書を通じてJestを利用してテストを書くことの手軽さやテストの有用性を知って頂ければ幸いです。 本書では、まだJestを使ったことがない、テストを書いたことがないという方でも、1つずつ試しながら読み進めることができます。 また、サンプルコードも充実しており、本書のコードはすべてGithubのリポジトリからダウンロードすることができます。 ■ 目次 1. はじめに 2. Jestとは？ 3. Jestのインストールとはじ
Matcherを使用する · Jest
Jest では、マッチャー ("matcher") を使用して、様々な方法で値のテストをすることができます。 このドキュメントでは、よく使われるマッチャーをいくつか紹介します。 マッチャーの完全なリストについては、expect API ドキュメントをご覧ください。 一般的なマッチャー 値をテストする最も簡単な方法は、厳密に等価であることです。 test('two plus two is four', () => { expect(2 + 2).toBe(4); }); このコードでは、expect(2 + 2) は "expectation" オブジェクトを返します。 マッチャーを利用しなければこれらの "expectation" オブジェクトは大きな効果を発揮しません。 このコードでは、 .toBe(4) はマッチャーです。 Jestが実行されると、失敗したマッチャーをすべて追跡し、素
スナップショットテスト · Jest
スナップショットのテストはUI が予期せず変更されていないかを確かめるのに非常に有用なツールです。 典型的なスナップショットテストでは、UIコンポーネントをレンダリングし、スナップショットを撮り、テストと一緒に保管されているスナップショットファイルと比較します。 2つのスナップショットが一致しない場合テストは失敗します: 予期されない変更があったか、参照するスナップショットが新しいバージョンのUIコンポーネントに更新される必要があるかのどちらかです。 Jestにおけるスナップショットテスト React コンポーネントをテストする場合にも、同様のアプローチをとることができます。 アプリケーション全体の構築が必要となるグラフィカルなUIをレンダリングする代わりに、シリアライズ可能なReactツリーの値を素早く生成するテスト用レンダラーを利用できます。 Consider this exampl
ES6+Babel7環境でJestする方法 - Qiita
概要 JavaScriptのテストフレームワークJestをES6+Babel7の環境で使う方法について書きます 仕掛けを理解するために、ゼロからnpmプロジェクトを作っていきます npmプロジェクトを作る
JavaScriptでも単体テストを導入しよう！ってかテストって何？
昔はお遊び程度の使われ方をしていたJavaScriptも、本格的な開発に使われるようになってからだいぶ経ちました。 開発の規模が大きくなってくると、どうしても「テスト」という考え方からは逃れられません。そこで、JavaScriptの開発でもテストを導入してみましょう。 この記事では、「JavaScriptのテストってどうするの」という方や「そもそもテストって何」という方に向けて、JavaScriptにおけるテストについて紹介します。 テストってなんだろう 個人で普通にプログラミングしていると「テスト」という単語にはなかなか触れる機会がないと思います。ですが、プロジェクトがそこそこの規模になってくるとテストは非常に重要になってきます。 まずはテストとはなんなのか、どういった効果があるのかについて説明します。 単体テスト（ユニットテスト） プログラミングにおいて、特に小さな規模の開発においては
JavaScriptを単体テストする流行りのフレームワークJestを試してみる - Qiita
Jestとは JestはJavaScriptの単体テストのフレームワークです。 https://jestjs.io/ja/ テストランナーだけでなく、モック機能やカバレッジの取得を使用することができます。npmのトレンドとしては２０１９年から伸びてmochaを超えるものとなっています。 https://www.npmtrends.com/jest-vs-jasmine-vs-mocha-vs-qunit この記事は公式のサンプルコードを弄ってその挙動を確認するものとなっています。 また、実験環境は以下の通りです。 OS:MacOS Catalina 10.15.6 node.js: v14.10.1 簡単なはじめ方 jestを使用するためにnode.jsのプロジェクトを以下のように作成します。 # package.jsonを作成する npm init -y # package.jsonにj
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React/Yup/ObjectSchemaのテスト
Jestで標準出力(console.log())してデバッグする方法 - Qiita