テストとは人によって反応が分かれるものの1つであり、大喜びする人もいれば、見ないようにして去ろうとする人もいます。あなたがどちらの側であるにせよ、ここではフロントエンドのテストは皆のためのものであるということを説明します。実際、テストには多くの種類があり、それがテストに対して初めに恐れや混乱を感じる一因なのかもしれません。 この記事では、特に有名で広く利用されている種類のテストを扱います。なかには目新しいものはないと感じる読者の方もいらっしゃるかもしれませんが、少なくとも復習にはなるでしょう。どちらにせよ、筆者の目標は、この記事を通じて世の中のさまざまな種類のテストについて理解を深めてもらうことです。ここではユニットテスト、統合テスト、アクセシビリティテスト、ビジュアルリグレッションテストなどを一緒に見ていきます。 さらに、Mocha、Jest、Puppeteer、Cypressなど、各種
フロントエンドにおける「単体テストの考え方/使い方」
本稿における「単体テスト」とは自動テストにおける単体テストを指します。手動テストのことではないので、ご了承ください。 単体テストの考え方/使い方という本を読みました。筆者自身、「単体テストはプロダクションコードの付属」という意識がどこかにありました。この本を読んで、単体テストについてあまりに何もわかってなかったことに気付かされ、単体テストの設計はプロダクションコードの設計と同じくらい重要という意識に変わりました。何のために単体テストをやるのか、いいテストとは、「単体」とは、など多くの点で学びを得られ、また、多くのプラクティスとアンチパターンを知ることができました。 本稿はこの本を読んで得られた学びを、フロントエンド開発、特にコンポーネント開発に適用することを試みた際のまとめです。より詳細な解説を求む方には本を手に取ってもらう前提で、できるだけポイントを抑えられるようにまとめることを目指しま
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 自分は2021年に新卒でweb系の開発会社にフロントエンジニアとして入社し2022年で2年目になります。 実務ではReact×TypeScriptを利用したフロント周りの開発をメインで行なっていなす。 今回は実務でNext.jsプロジェクトにテストを導入することになり「React-Testing-Library」と「Jest」について改めて学び直したのでその内容を紹介します。 はじめに「React-Testing-Library」と「Jest」の概要を説明しその上で具体的なテストコードを何パターンか書いていきます。 この記事の
フロントエンドテストにおける知見の宝庫を発見！「javascript-testing-best-practices」 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
実装例から見る React のテストの書き方 - Cybozu Inside Out | サイボウズエンジニアのブログ
2024/04/17: 更新 内容を更新した記事を書きましたので、よかったらこちらも併せて、ご覧ください。 zenn.dev こんにちは！フロントエンドエキスパートチームの@nus3_です。 kintone のフロントエンド刷新プロジェクト（フロリア）では、品質を保ったまま開発を加速させるためにフロントエンドのテストを積極的に行っています。 今回はそんなフロントエンドのテストの実装例をいくつか紹介します。この記事がフロントエンドのテストを行う上での参考になれば幸いです。 テストに使用する主なパッケージ コンポーネントのテスト 補足: Testing Library の記法をチェックしてくれるeslint-plugin-testing-library カスタムフックのテスト 補足: React v18 では @testing-library/react の renderHook を使う 参考
Wevoxのフロントエンドエンジニアをしているタガミです。最近はmonorepo構成に移行中のWevoxフロントエンドのテストやデザインシステムなどをいい感じにしようとしています。 この記事では、WevoxというSaaSプロダクトのフロントエンドにおける自動テストの話をします。Wevoxはリリースから5年以上が経過し、チームのメンバーも増え、またソースコードも巨大化しています。そんな中でフロントエンドも"式年遷宮"をして、改善を繰り返しています。中にはソースコードをガラッと変えるようなリファクタもあり、担当するエンジニアにとってはデグレの心配が付き纏います。そんな日々変化するフロントエンドを支えるのが自動テストです。 Wevoxの開発チームは決して大人数ではありません。そんなチームでも品質の改善のために一歩ずつ改善しつつある経験をもとに、フロントエンドの自動テストポイントをいくつかお伝えし
DBMS に依存するロジックのテストを書く時、主に2つの手法があると思います。 Repository 層などを mock する Service 層のテストをする時は、その下位の Repository 層を mock して、DBMS に依存しない形にしてからテストする レイヤードなアプリケーションで適用できる手法 テスト実行時も DBMS を裏で動かして、それを使う 本番と同じスキーマを持つ DBMS に対して、実際に insert したり select してテストする DBMS は docker-compose upとかで事前に立ち上げておく 双方にそれぞれ良さがあって、プロダクトによってどっちでやるか変わってくると思います。 この記事では 2 の手法を Prisma でどうやるかについて紹介します。 前提 実際のテストコードの例 テストヘルパーを作る 別解: ヘルパーを自動生成する je
こんにちは、テストが好きなsilverbirderと申します。Webフロントエンドのテストは実施していますか？ユニットテストやビジュアルリグレッションテストは広く知られていると思います。しかし、パフォーマンステストのためのテストコードはありますか？また、カオスエンジニアリングテストやアクセシビリティテストはありますか？ 今回、私はWebフロントエンドにおける網羅的なテストパターンを調査し、その結果をここで紹介したいと思います。これらを理解することで、読者の皆さんが適切なテスト戦略を策定する際の参考になれば幸いです。 前提 今回、テスト対象として取り上げる題材は、TodoMVCというTODOアプリです。フレームワークとしてReactを使用しますが、紹介するテストパターンはフレームワークに依存しないものです。ただし、使用するライブラリはReactに関連しているため、その点についてはご了承くださ
JestでTypeScriptを高速化する
はじめにesbuild の登場により、フロントエンドの世界は、開発環境により速度を求めるようになりました。vite の隆盛はその最たるものといってもいいでしょう。 esbuild や swc は高速な Go や Rust によって書かれ、更に多くの場合、Typescript の型チェックを省略しています。 tsc の型チェックは、大抵 IDE やワークフローで行われているので、これらを削ぎ落とすことで、純粋なコンパイラとして JavaScript への変換に特化しているということですね。 さて、Typescript コードをテストする際、多くの場合ts-jestやbabel-jestをトランスフォーマーとして使用していると思います。しかし、これらによってテストの速度が低下することがあります。 今回は jest の実行を高速化し、高速なテストを実現する方法を紹介します。 結論先に導入方法につ
jestでDBありのテストを高速化する
課題link お手伝いしているシステムでNestJSを採用しているバックエンドのテストが遅いという課題があったので対処した。 前提link フレームワークDBテストランナーその他 テストの総数は700弱。 最終結果link 最終的には2段階の改修を経てローカルのテストが3倍速程度高速化した。 # before Test Suites: 145 passed, 145 total Tests: 2 skipped, 681 passed, 683 total Snapshots: 0 total Time: 925.063 s Ran all test suites. Done in 926.48s. # ts-jestを@swc/jestに置き換えた Test Suites: 145 passed, 145 total Tests: 2 skipped, 681 passed, 683 t
フロントエンドテストにおける知見の宝庫を発見！「javascript-testing-best-practices」
はじめに JavaScriptにおけるテストのベストプラクティスをまとめた「javascript-testing-best-practices」というGitHubレポジトリが大変勉強になったため、特に参考になった内容をまとめて共有したいと思います。 （補足）本レポジトリにはfrontendのみならずbackendのテストに関する情報もありますが、今回はfrontendに焦点を当てて共有します。そのため扱うSectionは以下の4つです。 Section 0: The Golden Rule Section 1: The Test Anatomy Section 3: Frontend Section 4: Measuring Tests Effectiveness 想定読者 フロントエンドの実装はできるが、テスト経験はない方 テストに対して解像度が低い方 これからテストを学びたいと思ってい
対象 業務レベルでサーバーサイドで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が正常に削除できること
フロントエンドLT会 - vol.5 #frontendlt の登壇資料です。 https://rakus.connpass.com/event/232039/ UI Testing Handbook https://storybook.js.org/tutorials/ui-testing-…
スペースマーケット所属のfumink7です。 北欧へのあこがれが高まっています☃️ ReactでのWebアプリケーション開発をはじめる中で、ユニットテストを書き始めたときに知って役立ったtipsをまとめてみました。 テスト環境 テスティングフレームワークはJest、UIテストのためにTesting Libraryを使用しています typescript@4.9.4 React@18.2.0 jest@28.1.0 @testing-library/react@13.3.0 ①アサーション 特定の要素内に絞って要素検索を行う - within getBy、findByなどで「要素A内にある要素Bを取得する」場合にwithinを使って要素Aを指定することができます。 const formElement = screen.getByRole('form') expect( within(formE
Findy Team+でフロントエンドエンジニアをしている 川村(@peijun333)です。 Findy では、フロントエンドのコード品質と安定性を確保するために Jest などのテストフレームワークを積極的に活用しています。通常、Jest は CLI から実行してテスト結果をコンソールで確認しますが、コマンドを用意する手間や、テスト経過のデバッグのために都度 console.log などでその内容を確認しなければならずとても不便です。 そこで、今回はテストの自動化とリアルタイムなフィードバックを提供する JavaScript の統合テストツールである Wallaby.js を紹介します。Wallaby.js を導入することで、開発効率の向上が期待できます。 Wallaby.js とは？ 前提条件 VS Code でテストの修正 Wallaby.js はリファクタリングに強い スナップシ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 自分は2021年に新卒でweb系の開発会社にフロントエンジニアとして入社し2022年で2年目になります。 実務ではReact×TypeScriptを利用したフロント周りの開発をメインで行なっていなす。 今回は実務でNext.jsプロジェクトにテストを導入することになり「React-Testing-Library」と「Jest」について改めて学び直したのでその内容を紹介します。 はじめに「React-Testing-Library」と「Jest」の概要を説明しその上で具体的なテストコードを何パターンか書いていきます。 この記事の
ここから下で話す際、主に使う言語・フレームワーク・ツールとしては - Typescript - React (Next.js) - Jest - React Testing Library - ブラウザテストツールとしてPlaywright を前提としています。ただ話す内容の本質的な部分はVueでもSvelteでも、Vitestだろうがあまり変わらないだろうなと思ってます。そう思って見ていただけると助かります。 現代ではReactでUIの単体テスト・インテグレーションテストを書く場合、Jest x React Testing Library を使うのが一般的かと思います。皆さんはJestでUIテストを書いていますか？Jestでコンポーネントの単体テストを書いていると辛いことがたくさんありませんか？例えば 大量のライブラリのモックによる(これってテストやる意味あるの・・・？)と感じる虚無感
はじめに こんにちは、CX事業本部MAD事業部の森茂です。 今回まだ開発版ではありますが、昨年末に公開されたVue.jsやViteの作者Anthony Fu氏@antfu7、Patak氏@patak_devが開発しているJestに代わるあたらしい高速テストフレームワークVitestをReactで試してみました。 VitestはVite環境で動作する高速なテストフレームワークで、VueやReact、Svelte、litなどなどさまざまなフレームワークで動作します。ChaiやJestのアサーション、スナップショットが互換的に動作するので既存のテストコードをほぼ同じ書き方で利用することができます。またc8を利用したcoverageの作成にも対応しています。 Jestでは環境の構築にそれなりの手間がかかりますが、Vitestはライブラリのインストールと簡単な設定を追記するだけで利用することが可能で
CLI用のコマンドを作ってみようと思いたったのですが、CLI開発フレームワークoclifを試してみたらとても簡単で環境構築もすんなりできたのでびっくりしたという話。 概要 ある用途で思いたってCLIのコマンド作ろうと思った oclifというCLI用のフレームワークがあったので試してみた 簡単すぎてびっくりした 追加でPrettierとJestも対応してみました 動機 誰しもCLIのコマンドをつくりたくなることがたまにある。僕はある。 今回はGUIを作るまでもなく、コマンドでシュッと実行したい作業があったので勉強と遊びを兼ねてコマンドを作ることにしました。CLIの開発ツールはいろいろありますが、今回はやりたいことを実現するのにすでに知見としてあるものを流用したい背景aからNode.jsでやることにしまた。 Node.jsにもCLI用を作るためのライブラリがさらにいくつかありますが、今回はoc
なぜ執筆プロジェクトを立ち上げたのか？ 2020年の年末から年明けに開催された技術書典10で「はじめてのJest入門」を執筆しました。私自身はIT業界に約10年いますが、受託案件やR&Dのようなプロジェクトに参加することが多く、テストについての経験があまり得られないまま過ごしてきました。そんな中で社内のメンター＆メンティープログラムでTDD（Test-Driven Development：テスト駆動開発）について学ぶ機会があり、セッションを通して学んだことを記憶に残す意味でも、この本を書くことに至りました。しかし、前回の書籍ではTDDやテスト自体の概念についてはあまり触れず、セッションで利用したJestの基本的な機能や使い方についてフォーカスしました。 前回の技術書典10のイベントを通じて、同じような悩みや課題感を持った方多くがいることを知ることができました。JavaScriptは元々フロ
Storybook 駆動開発 @ CSF3.0
Storybook CSF3.0 の概要 単体テスト・結合テスト・Storybook を充実させるためには、多くの工数が必要です。堅牢なフロントエンド開発のためとはいえ、これらのメンテナンスは日に日に負担が増しています。似かよったテストケースでは、同じような下作業をそれぞれに用意する必要がありました。 Component Story Format（CSF）は、この課題への取り組みとして開発されました。「様々なソリューションで再利用可能な資材」 が用意できれば、開発は素早く・より楽しいものになります。リリース間近の CSF3.0 はより一層、そのゴールを明確に示してくれています。 testing-library で Story にインタラクションを CSF3.0 新機能の中で際立っているものが play 関数 です。@testing-library/user-eventを利用すると、Stor
「Jestではじめるテスト入門」を書きましたー #Jest本 - Mitsuyuki.Shiiba
Jestではじめるテスト入門 本日「Jestではじめるテスト入門」がついに発売されました 🎉🎉🎉 peaks.cc CircleCI時代の同僚の伊藤さん @ganezasan が「Jestの自動テスト本の執筆を手伝ってくれませんか？」と声をかけてくれて「これからテストを書きたいって人に向けたJestの入門書を書きたいんですよ！！」って熱く語ってくれて「いいなぁ」と思ったので参加しました。本を書くなんて初めてのことなので、自分なんかに書けるかなぁとドキドキしてたのですが、周りの方々の助けのおかげで、なんとか書き上げることができました。 そして、監修はなんと和田さん @t_wada です。自分が自動テストについて書いた文章を、和田さんに監修していただけるなんて、それだけでとても幸せだなぁと思っていたのですが、「むちゃくちゃ面白かったです！」って言ってもらえたので、もう出版しなくても満足し
本連載について はじめまして！ サイボウズ フロントエンドエキスパートチームのnus3です。 本連載では、Webフロントエンドに関してもう一歩踏み込んだ知識について、サイボウズフロントエンドエキスパートチームのメンバーによって不定期で解説記事を掲載しています。 本記事では、モダンフロントエンドにおけるテストについて、その種類や導入方法などを紹介します[1]。 モダンフロントエンドでのテスト ここ数年のWebフロントエンドでは次のように、さまざまな変化がありました。 ReactやVue.jsといった宣言的UIを採用したライブラリの普及 TypeScript中心としたエコシステムの発展 ES Modulesの採用の広がり ViteやSWC、RspackやTurbopackなどの新しいビルドツールの登場 この変化に合わせて、Webフロントエンドを対象にしたテストのツールや手法も増えてきました。
Composition API + Jestでコンポーネントを一切マウントせずに書けるフロントエンド単体テストパターン - ANDPAD Tech Blog
どうもこんにちは！ 2021年4月にANDPADにジョインし、現在チームでフロントエンドの開発をしている鳩です。 こちらのVue Composition APIをチームで導入して得られたメリット - ANDPAD Tech Blogでも取り上げられていますが、私のチームでもOptions API + Vuex で実装されていたコンポーネントをComposition API + without Vuex のパターンへ書き換えを行っています。 Composition APIへ書き換える最大のメリットは、コンポーネントのロジック部分の多くを単なるJavaScript関数として切り出せるので、コンポーネントとロジックを疎結合な状態に分離でき、単体テストが恐ろしく書きやすくなるという点です。 そんなわけで、コンポーネントを一切マウントせずに書けるフロントエンドあるあるテストパターンを紹介していこうと
単体テストを書く時、モジュール間の関連を検証するため、一部のモジュールをモックする必要が出てくることがあります。モックは様々な手法がありますが、書き方によって、メンテナンス性やテストの可読性が変わります。一般的に行われるモック手法を確認しつつ、よりリーダブルなテストを書く方法を紹介します。 ログイン API を呼び出す Web API クライアント 今回紹介する、モック対象の Web API クライアントです。Native Fetch API を関数でラップした、自作の Web API クライアント（ログインするためのlogin関数）です。 export type Data = { redirectUrl: string; }; export type Input = { email: string; password: string; }; export async function l
テスト自動化の協業を加速する！ テックタッチのフロントエンドにおけるテストの分類 - Techtouch Developers Blog
フロントエンドエンジニアの 92thunder です。去年北海道旭川市に移住しまして、長らく打ち合わせを続けてきた家が10月にデプロイされたのでQoLが爆上がりしています。 テックタッチではデプロイ頻度を上げるためにテスト自動化に取り組んでいます。テスト自動化をQAエンジニアと進めていくためにテストの分類を策定する取り組みを始めました。この記事では、テックタッチにおけるフロントエンドのテストの分類とそれを策定するにあたって意識したポイントについて説明します。 デプロイ頻度改善のため、テスト自動化に取り組む なぜテストの分類が必要か テストの分類 コンポーネントテスト インテグレーションテスト テストの分類で意識したこと テストサイズを意識してコスパの良い自動テストへ 一般的な分類より、社内でのテストの呼び分けやすさを重視 おわりに デプロイ頻度改善のため、テスト自動化に取り組む テックタッ
Jest で落ちたアサーションを GitHub のアノテーションに出す - Diary of a Perpetual Student
最近 GitHub Actions を弄くり倒すことにハマっていて、 GitHub の Checks API を利用して annotation を出すおもてなしをすることだけが生きがいだと思って生活していました。 そんな中、JavaScript (TypeScript) のコードのテストでよく使われている Jest で、どの assertion が落ちているかを annotation で分かりやすく表示したいと思っていました。自作で頑張ろうかな～と思って調べていると、 Jest 28.0.0 （2022年4月末ごろリリース）から Github Actions で annotation を出す reporter 機能が組み込まれていたという事実を知りました。 jestjs.io この便利機能が思ったより世の中で使われていない感じがしたので紹介します。 サンプル こちらをどうぞ： github
Testing with Next.js
先日、Next.js におけるテスト手法について、公式ドキュメントが追加され話題になりました。 取り上げられている 2 者はよく知られており、いずれかに触れたことがある方も多いかと思います。この公式ドキュメントページでは「何を使って」を紹介しているのみなので、どちらを選ぶべきか悩んだ方もいるのではないでしょうか？ Cypress Jest & React Testing Library この判断についてはドキュメントに書かれていなかったので、筆者なりの見解を紹介していきたいと思います。 お勧めは「Jest & React Testing Library に寄せる」 Cypress は GUI が素晴らしく、テストを書く環境としてはとても体験が良いです。しかしテストが増えていくにつれ、以下のような点で DX 低下を招くことがあります。 CI の実行コストが高く、実行時間が長い cypress
Next.js でテスト駆動開発を進める時に必ず関門となる各種機能のモックに関するベストプラクティスを紹介します。 今回は Router などの機能をモックした render を作成して、共通のコンポーネントとして利用することを目標としましょう。 バージョン情報 Node.js：15.11.0 React：17.0.2 Next.js：10.2.2 Jest：26.6.3 React Testing Library @testing-library/react：11.2.5 Router を使用した際の問題点 next/router
この記事は、Money Forward Engineering 2 Advent Calendar 2022の20日目の投稿です。 21日目の記事は、Taiga KIYOKAWAさんによる『react-i18next で日本語の改行箇所を制御したい時は、設定で wbr タグを使えるようにしよう』でした。 本日は、マネーフォワードに入社して3ヶ月目の私が、「コンポーネントを高品質に保つためのStorybook運用」というテーマで、記事を書いていきます👊 背景 私が開発に携わっているプロジェクトでは、マネーフォワードクラウドにある複数のプロダクトを横断して利用される機能を開発しており、その機能をマイクロフロントエンドとしてプロダクト側に提供しています。 より詳しく知りたい方は、Money Forward Engineering 1 Advent Calendar 2022の14日目に投稿され
はてなブログで使われているフロントエンドのテストツールを統一した話 - Hatena Developer Blog
はてなでエンジニアアルバイトをしているid:wafuwafu13です。はてなブログのフロントエンドで使われているテストツールの統一を2021年11月頃から進めてきましたが、この8月に完了したので振り返りたいと思います。 はてなブログのフロントエンドに残された秩序の乱れ テストツールを統一する理由とツールの選定 移行をどう自動化したか（しなかったか） 余裕のあるスケジュールで小分けして作業を実施 はてなエンジニアのアルバイトは通年で募集中！ はてなブログのフロントエンドに残された秩序の乱れ 2020年のid:nanimono_demonaiさんの活動により、はてなブログのフロントエンドのテストはPhantomJSとKarmaを撤退し、Jestに移行されました。 はてなブログのフロントエンドに秩序はもたらされたのか - Speaker Deck これによって秩序がもたらされたものの、Node.
data-testidはいつ使うべきか？そもそも使うべきなのか？ | フューチャー技術ブログ
Playwrightあるいはそのロケーターの元ネタとなっているTesting Libraryでは、DOMを指定する方法として data-testid 属性を扱ったクエリーを提供しています。どちらでも getByTestId(ID文字列) メソッドを使い、この属性値を使った要素の取得が行えます。しかし、ドキュメントを見ると、PlaywrightもTesting Libraryも、「他の手法が使えないときの最終手段」としています。 In the spirit of the guiding principles, it is recommended to use this only after the other queries don’t work for your use case. Using data-testid attributes do not resemble how your
Vitest
Vitest was created to make testing just work for Vite apps. By building on top of Vite, Vitest natively understands your Vite config and is able to reuse the same resolve and transform pipelines. You can also use Vitest even if you are not using Vite. It is Jest-compatible and works for backend code too. Learn more
こんにちは。ナレッジワークの torii です。 7 月にフロントエンドエンジニアとして入社してもうすぐ半年、そろそろ技術記事の一つも書きたいなと思っていたところに、ちょうどいいネタを見つけたので投稿してみます！ Jest から Vitest に移行してみた 早速やったことですが、フロントエンドのテストフレームワークを Jest から Vitest に移行しました。理由としては、Jest が CJS を前提として動作しており、ESM 前提のモジュールを動かすのに一手間も二手間もかかるからです。 ナレッジワークのフロントエンドは Next.js を採用しており、テストフレームワークには Next.js と相性の良い Jest を採用していました。関数単位のテストや UI コンポーネントのテストを書く分には問題なかったのですが、それより上層（ページなど）になるとたちまち ESM 互換性の問題を
CI 環境でのユニットテストの実行時間を2倍速くした話 (Jest + Mongo DB + Circle CI) - ミツモア Tech blog
こんにちは。ミツモアでテックリードしております白柳（@yanaemon) です。 ミツモアのプロダクトは TypeScript で、クライアントサイドの React とサーバサイドの Node.js で書かれており、ユニットテストは Jest + Mongo DB + Circle CI を利用しています。 しかし、プロダクトが大きくなるにつれて、全ユニットテストを実行するのに 10 分程度かかり、開発効率が悪くなっていました。 今回は、それを 2 倍以上速度改善した取り組みについて紹介します。 実施したこと いきなりですが、具体的に実施したことと、改善結果になります。 実施内容 改善結果 1. ファイル分割をし、並列度をあげる これ単体では速度改善は期待できない 2. テスト対象を修正されたファイルのみにする x1 ~ x10 速度 UP ※ただし最終的にはやめました 3. DB 生成な
JestでHTTPリクエストをインターセプトしてモックを返すのに利用したMock Service Worker（msw）の紹介をしたいと思います。環境はNodeです。 テスト対象の実装 http://example.com/examples からデータを取得する、という想定の実装です。 import fetch from 'isomorphic-unfetch'; export class GetExampleError extends Error {} export async function getExamples(): Promise<string> { const result = await fetch('http://example.com/examples'); if (!result.ok) { throw new GetExampleError('Received ge
![[msw, Jest, Node.js] mswを利用してHTTP境界のテストを書く](https://cdn-ak-scissors.b.st-hatena.com/image/square/da3a5e76411c8a9a90626f61cdbbca75dd2ab753/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fog-image-lake-nine.vercel.app%2F%2A%2A%255Bmsw%2C%2520Jest%2C%2520Node.js%255D%2520msw%25E3%2582%2592%25E5%2588%25A9%25E7%2594%25A8%25E3%2581%2597%25E3%2581%25A6HTTP%25E5%25A2%2583%25E7%2595%258C%25E3%2581%25AE%25E3%2583%2586%25E3%2582%25B9%25E3%2583%2588%25E3%2582%2592%25E6%259B%25B8%25E3%2581%258F%2A%2A.png%3Fmd%3D1%26fontSize%3D100px)
CSF3.0 が間近に迫っているが、まだリリース前という状況。Storybook は、Component テストと Storybook の垣根を壊す事を目指しており、CSF3.0 は Storybook に閉じた話ではなくテスト戦略に関わってくる。 現状 Storybook 環境を整備するにあたり、どう備えておくべきかを考える。 npm i -D @storybook/react@next で beta を install し、.storybook/main.js に以下を追加すれば CSF3.0 を試す事ができる。
Next.js 12 における Jest サポートの強化 2/18 に Next.js 12.1 がリリースされました。 本バージョンの新機能として「next/jest プラグインを使った Zero-configuration Jest のサポート」が挙げられています。 この新機能自体は Next.js 12.0 の時点からベータ版として利用できるようにはなっていましたが、この度安定版がリリースされた形となります。 next/jest プラグインを使って Next.js アプリのテスト環境を構築する next/jest プラグインを使う方法は以下の２点が挙げられます。 新規でアプリを作る際、時間がないときは１番の方法を取ってもいいでしょう。今回は２番の方法を紹介します。 （テンプレートが TS で書かれているのは地味に嬉しいポイント） create-next-app コマンドでテンプレート
上記以外で特筆すべき点として、他の開発者(≒チームメンバー)にとっては、変更の影響をほとんど受けずに、ノーコストで上記恩恵を受けられる点があります。 これは Vitest の Jest に対する高い互換性のおかげでテストコードの書き方に大きな変更がなかったことと、テスト実行コマンドを npm-scripts によって隠蔽していたことによるもので、移行したことに気づきさえしない可能性もあります。 Vite を使ってないのに Vitest 使ってええんか？ 今回 Jest から Vitest への移行を行ったプロジェクトは、開発サーバーやプロダクションビルドには Webpack を使用しており、Vite は一切使用していませんでした。 そういったプロジェクトにおいても、Vite をベースとしたテストフレームワークである Vitest は使用して良いものでしょうか？ これについては Vitest
Guides: Testing | Next.js
In React and Next.js, there are a few different types of tests you can write, each with its own purpose and use cases. This page provides an overview of types and commonly used tools you can use to test your application. Types of tests Unit Testing involves testing individual units (or blocks of code) in isolation. In React, a unit can be a single function, hook, or component. Component Testing is
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドのテストは皆のためのもの | POSTD
【入門】フロントエンドのテスト手法まとめ - Qiita
フロントエンドの"ちょうどいい"自動テストのはじめかた - Atrae Tech Blog
Prisma で本物のDBMSを使って自動テストを書く - mizdra's blog
Webフロントエンドにおける網羅的テストパターンガイド
JestのTips集10選。サーバーサイドでNode.jsのJestを書いたことない人向け
StorybookのUI Testing Handbookを読んだ
React/Jestでのユニットテストに少し慣れてきたら役に立つtips
Wallaby.jsを使ってフロントエンド開発のテストを効率化しよう - Findy Tech Blog
【入門】フロントエンドのテスト手法まとめ - Qiita
Jestのuiテストがつらすぎるので愚痴らせてください。そしてブラウザテストで本質的なuiテストをしよう
あたらしいテストフレームワークVitestをReactで試してみた | DevelopersIO
CLIツールを作るためにoclifを試してみたら簡単すぎて吃驚した | Trial and Spiral
テスト未経験から中上級者へのガイドライン！「Jestではじめるテスト入門」出版プロジェクト！ - PEAKS
モダンなフロントエンドにおけるテストについて ［Modern Featured Test］ | gihyo.jp
リーダブルなテストのための、jest モックファクトリー関数
Next.js の Jest / React Testing Library でモック (mock) を含めた render で開発効率を高めよう | fwywd（フュード）powered by キカガク
ぼくたちがかんがえたさいきょうのStorybook 〜より高品質なコンポーネントを求めて〜
フロントエンドのテスト基盤を Jest から Vitest に移行した話
[msw, Jest, Node.js] mswを利用してHTTP境界のテストを書く
Storybook CSF3.0 時代のテストに備える
Next.js 12でJestの設定がかなり楽になった
Vite は使ってないけど Jest を Vitest に移行する
anond.hatelabo.jp
dev.classmethod.jp
helentech.jp
www.jiji.com
www.47news.jp
www.47news.jp