こんにちは、戸田です。 このブログではTypeScriptの環境構築からJestを使用した簡単な四則演算のテストの方法を解説します。 環境構築 まずは環境構築をします。 今回はかなりシンプルな環境を構築します。 今回使用した環境は以下です。 Node.js v21.5.0 TypeScript v5.4.0 Jest v29.7.0 TypeScriptのインストール package.jsonをセットアップする npm init -y TypeScriptをインストールする npm install typescript --save-dev Node.jsのプログラムに必要な型宣言ファイルnode.d.tsをインストール npm install @types/node --save-dev TypeScriptの設定ファイルtsconfig.jsonを初期化 npx tsc --init
Findy Team+でフロントエンドエンジニアをしている 川村(@peijun333)です。 Findy では、フロントエンドのコード品質と安定性を確保するために Jest などのテストフレームワークを積極的に活用しています。通常、Jest は CLI から実行してテスト結果をコンソールで確認しますが、コマンドを用意する手間や、テスト経過のデバッグのために都度 console.log などでその内容を確認しなければならずとても不便です。 そこで、今回はテストの自動化とリアルタイムなフィードバックを提供する JavaScript の統合テストツールである Wallaby.js を紹介します。Wallaby.js を導入することで、開発効率の向上が期待できます。 Wallaby.js とは？ 前提条件 VS Code でテストの修正 Wallaby.js はリファクタリングに強い スナップシ
こんにちは。ナレッジワークの torii です。 7 月にフロントエンドエンジニアとして入社してもうすぐ半年、そろそろ技術記事の一つも書きたいなと思っていたところに、ちょうどいいネタを見つけたので投稿してみます！ Jest から Vitest に移行してみた 早速やったことですが、フロントエンドのテストフレームワークを Jest から Vitest に移行しました。理由としては、Jest が CJS を前提として動作しており、ESM 前提のモジュールを動かすのに一手間も二手間もかかるからです。 ナレッジワークのフロントエンドは Next.js を採用しており、テストフレームワークには Next.js と相性の良い Jest を採用していました。関数単位のテストや UI コンポーネントのテストを書く分には問題なかったのですが、それより上層（ページなど）になるとたちまち ESM 互換性の問題を
上記以外で特筆すべき点として、他の開発者(≒チームメンバー)にとっては、変更の影響をほとんど受けずに、ノーコストで上記恩恵を受けられる点があります。 これは Vitest の Jest に対する高い互換性のおかげでテストコードの書き方に大きな変更がなかったことと、テスト実行コマンドを npm-scripts によって隠蔽していたことによるもので、移行したことに気づきさえしない可能性もあります。 Vite を使ってないのに Vitest 使ってええんか？ 今回 Jest から Vitest への移行を行ったプロジェクトは、開発サーバーやプロダクションビルドには Webpack を使用しており、Vite は一切使用していませんでした。 そういったプロジェクトにおいても、Vite をベースとしたテストフレームワークである Vitest は使用して良いものでしょうか？ これについては Vitest
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
Features [jest-config] [BREAKING] Add mts and cts to default moduleFileExtensions config (#14369) [jest-config] [BREAKING] Update testMatch and testRegex default option for supporting mjs, cjs, mts, and cts (#14584) [@jest/core] [BREAKING] Group together open handles with the same stack trace (#13417, & #14543) [@jest/core, @jest/test-sequencer] [BREAKING] Exposes globalConfig & contexts to TestSe
こんにちは。株式会社スペースマーケットでフロントエンドエンジニアをしておりますwado63です。 以前弊社の記事でReactのテストの実践的なTipsを紹介していましたが、もっと細かい、テストをちょっとよくするかもしれないTipsを紹介したいと思います。 Mock関数に型を当てる jestのnamespaceには、jest.MockedFunctionという型があります。 これを使うことでMock関数に元の関数の型を当てることができます。 import { myFunction } from './myFunction' jest.mock('./myFunction', () => ({ myFunction: jest.fn() })) const mockedMyFunction = myFunction as unknown as jest.MockedFunction<typeo
先日 Vercel の@leeerob氏が次のようなツイートをしていました。 I'm working on updated testing docs for the @nextjs App Router. next@canary supports Jest for server & client components, metadata, server-only, and more なんと next@canary で、Server Components の Jest でのテスト実行がサポートされているとのことです！これは試さないと！ next@13.4.19 時点での Server Components テストの課題 Next.js App Router で開発するときの大きな課題の一つがテストで、現状では Server Components と testing-library を組み合わ
Support for React Server Components · Issue #1209 · testing-library/react-testing-library
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Features [jest-circus, jest-snapshot] Add support for snapshot matchers in concurrent tests (#14139) [jest-cli] Include type definitions to generated config files (#14078) [jest-snapshot] Support arrays as property matchers (#14025) [jest-core, jest-circus, jest-reporter, jest-runner] Added support for reporting about start individual test cases using jest-circus (#14174) Fixes [jest-circus] Preve
ここから下で話す際、主に使う言語・フレームワーク・ツールとしては - Typescript - React (Next.js) - Jest - React Testing Library - ブラウザテストツールとしてPlaywright を前提としています。ただ話す内容の本質的な部分はVueでもSvelteでも、Vitestだろうがあまり変わらないだろうなと思ってます。そう思って見ていただけると助かります。 現代ではReactでUIの単体テスト・インテグレーションテストを書く場合、Jest x React Testing Library を使うのが一般的かと思います。皆さんはJestでUIテストを書いていますか？Jestでコンポーネントの単体テストを書いていると辛いことがたくさんありませんか？例えば 大量のライブラリのモックによる(これってテストやる意味あるの・・・？)と感じる虚無感
On the Angular team, we believe testing is critical to build highly complex and scalable applications effectively. Testing takes many forms, and “unit tests” focus on testing the smallest units of a codebase. For Angular applications, this typically includes tests of individual components or services. We regularly survey Angular developers to make sure we are always providing the best experience,
Angular v16から、実験的機能として Jest によるユニットテスト実行がサポートされた。この記事では新規に作成した Angular プロジェクトでさっそく Jest を有効化してみた。Angular が Jest サポートを検討している背景などは公式ブログを参照してほしい。 Jest サポートを試す プロジェクト作成 まずはいつもどおり、 ng new コマンドで新しくプロジェクトを作成する。 Jestビルダーに切り替える 次に ng test コマンドで実行されるユニットテスト実行のビルダーをKarmaからJestに切り替える。 @angular-devkit/build-angular:karma に指定されている部分を @angular-devkit/build-angular:jest に変更する。 Jest によるテストはブラウザテストではなくNode.jsによる擬似的
こんにちは、テストが好きなsilverbirderと申します。Webフロントエンドのテストは実施していますか？ユニットテストやビジュアルリグレッションテストは広く知られていると思います。しかし、パフォーマンステストのためのテストコードはありますか？また、カオスエンジニアリングテストやアクセシビリティテストはありますか？ 今回、私はWebフロントエンドにおける網羅的なテストパターンを調査し、その結果をここで紹介したいと思います。これらを理解することで、読者の皆さんが適切なテスト戦略を策定する際の参考になれば幸いです。 前提 今回、テスト対象として取り上げる題材は、TodoMVCというTODOアプリです。フレームワークとしてReactを使用しますが、紹介するテストパターンはフレームワークに依存しないものです。ただし、使用するライブラリはReactに関連しているため、その点についてはご了承くださ
「Jestではじめるテスト入門」を書きましたー #Jest本 - Mitsuyuki.Shiiba
Jestではじめるテスト入門 本日「Jestではじめるテスト入門」がついに発売されました 🎉🎉🎉 peaks.cc CircleCI時代の同僚の伊藤さん @ganezasan が「Jestの自動テスト本の執筆を手伝ってくれませんか？」と声をかけてくれて「これからテストを書きたいって人に向けたJestの入門書を書きたいんですよ！！」って熱く語ってくれて「いいなぁ」と思ったので参加しました。本を書くなんて初めてのことなので、自分なんかに書けるかなぁとドキドキしてたのですが、周りの方々の助けのおかげで、なんとか書き上げることができました。 そして、監修はなんと和田さん @t_wada です。自分が自動テストについて書いた文章を、和田さんに監修していただけるなんて、それだけでとても幸せだなぁと思っていたのですが、「むちゃくちゃ面白かったです！」って言ってもらえたので、もう出版しなくても満足し
ページ数： 350ページ 電子版フォーマット： PDF 製本版： B5変形・モノクロ 発売日： 2023年3月24日 テスト未経験から中上級者へのガイドライン この本の序文を読む Jest はオールインワンのテストフレームワークです。JavaScript では、以前はテスト環境をセットアップするために、テストランナー、アサーションライブラリ、モックライブラリといくつかのライブラリを組み合わせる必要がありました。しかし、Jest は最初から単体テストを実行するために必要な機能がすべて含まれているため、Jest をインストールするだけでテストを書き始めることができます。 最近では、Node.js にもv18 からテストランナーやアサーションがビルトインの機能として追加されたり、Vitest という新しいテストフレームワークも誕生していたりします。しかし、Jest は既に機能が安定しており、情報
ペイトナー請求書のフロントエンドにスナップショットテストを導入した話 - Paytner Tech Blog
はじめに ペイトナー請求書のフロントエンドを主に担当している @fuqda です。 本稿では、ペイトナー請求書のフロントエンドの品質改善の一つとして、最近実施したスナップショットテストの導入についてご紹介させて頂ければと思います。 この記事の対象読者 Vue.js / Nuxt.jsでJestのスナップショットテストを実装する方法について関心がある方 テストコードがないフロントエンドにこれから自動テストを導入しようとしている方 スナップショットテストとは？ スナップショットのテストはUI が予期せず変更されていないかを確かめるのに非常に有用なツールです。 https://jestjs.io/ja/docs/snapshot-testing Jestの公式ドキュメントにも記載があるようにHTML要素の差分を検査し、違いがあれば失敗にするテストのことです。 なお、CSSのスタイル崩れなどの検知
フロントエンドテストにおける知見の宝庫を発見！「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 想定読者 フロントエンドの実装はできるが、テスト経験はない方 テストに対して解像度が低い方 これからテストを学びたいと思ってい
フロントエンドテストにおける知見の宝庫を発見！「javascript-testing-best-practices」 - Qiita
フロントエンドテストにおける知見の宝庫を発見！「javascript-testing-best-practices」JavaScriptテストフロントエンド はじめに 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 Test
本記事は Kent C. Dodds氏による Common mistakes with React Testing Library の和訳です。 React Testing Library のよくある間違い こんにちは👋 私がReact Testing Libraryを作ったのは、当時のテストの状況に満足していなかったからです。 それが DOM Testing Library に発展し、今ではすべての人気のある JavaScript フレームワークと DOM を対象とした(そうでないものも含めて)テストツールのための実装(ラッパー)があります。 時間の経過とともに、私たちは API にいくつかの小さな変更を加え、最適ではないパターンを発見してきました。 私たちが提供するユーティリティを使用する「より良い方法」を文書化しようと努力しているにもかかわらず、私はいまだにこのような最適ではないパ
フロントエンドにおける「単体テストの考え方/使い方」
本稿における「単体テスト」とは自動テストにおける単体テストを指します。手動テストのことではないので、ご了承ください。 単体テストの考え方/使い方という本を読みました。筆者自身、「単体テストはプロダクションコードの付属」という意識がどこかにありました。この本を読んで、単体テストについてあまりに何もわかってなかったことに気付かされ、単体テストの設計はプロダクションコードの設計と同じくらい重要という意識に変わりました。何のために単体テストをやるのか、いいテストとは、「単体」とは、など多くの点で学びを得られ、また、多くのプラクティスとアンチパターンを知ることができました。 本稿はこの本を読んで得られた学びを、フロントエンド開発、特にコンポーネント開発に適用することを試みた際のまとめです。より詳細な解説を求む方には本を手に取ってもらう前提で、できるだけポイントを抑えられるようにまとめることを目指しま
Our team is a couple of months into developing a new application, and our suite of unit 240 tests takes 46 seconds to run. That duration is not excessive yet, but it’s increasing in proportion to the number of tests. In a couple of months, it’ll take a couple of minutes to run our tests.
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 は TTY では色つきのログを出すが、そうでないときは色なしになる https://jestjs.io/docs/cli#--colors --colors オプションか、環境変数で FORCE_COLOR=true するととにかく色つきのログを出せる GitHub Actions では色つきのログに対応している A better logs experience with GitHub Actions | The GitHub Blog That’s why we are increasing the color support, including: ANSI colors 8-bit colors 24-bit colors https://github.blog/2020-09-23-a-better-logs-experience-with-github-actions/
スペースマーケット所属の711fumiです。 北欧へのあこがれが高まっています☃️ 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
Typesafe Jest lifecycle hooks "Providers" – Typesafe modular reusable lifecycle hooks Builtin providers: Dir Get a temp/given directory and instance of fs-jetpack pointing to it. Browser Get a Playwright browser. Page Get a Playwright page. Run Handy child-process methods powered by Execa. If Dir in upstream context then used for default CWD. ChildProcess Easily run a child-process over the test l
この記事は、Money Forward Engineering 2 Advent Calendar 2022の20日目の投稿です。 21日目の記事は、Taiga KIYOKAWAさんによる『react-i18next で日本語の改行箇所を制御したい時は、設定で wbr タグを使えるようにしよう』でした。 本日は、マネーフォワードに入社して3ヶ月目の私が、「コンポーネントを高品質に保つためのStorybook運用」というテーマで、記事を書いていきます👊 背景 私が開発に携わっているプロジェクトでは、マネーフォワードクラウドにある複数のプロダクトを横断して利用される機能を開発しており、その機能をマイクロフロントエンドとしてプロダクト側に提供しています。 より詳しく知りたい方は、Money Forward Engineering 1 Advent Calendar 2022の14日目に投稿され
Github Actions のテスト実行時間を速くするためにやったこと - Uzabase for Engineers
本記事は、NewsPicks Advent Calendar 2022 の 12/18 公開分の記事になります。 NewsPicks Web Reader Experience Unit でフロントエンドエンジニアをしているじゆんきち(@junkisai)です。 弊チームでは、ここ1年間くらいWeb 版のNewsPicksを新しい基盤に置き換えつつ、見ためも刷新するプロジェクト（以下リニューアルプロジェクト）を進めています。 Web 版 NewsPicks は、jest でロジックの単体テスト、コンポーネントのレンダリングテスト、 a11y テストを Github Actions 上で実行しています。しかし、コードの規模が大きくなるにつれ、テストの実行時間が最大で 10 分程度かかるようになってしまい、開発体験を阻害してしまっていました。 今回は、最大 10 分程度かかっていたテストの実行
どうもoreoです。 私は株式会社iCAREでフロントエンド開発を主に担当しており、2022年6月ごろから有志メンバーでフロントエンドのテスト拡充活動を始めました。機能開発を優先しながら、コツコツと活動を続け、4ヶ月間で共通モジュール内の純粋関数に対してユニットテストを追加することができました。この記事では、そこに至るまでの活動について記載します。 機能開発に並行してフロントエンドのテストを追加したい人の参考になれば幸いです！ 1 要約 毎週0~2h/人程の工数をかけてフロントエンドのテスト拡充活動を始めた。 テストを書く目的をすり合わせて簡単なロードマップを作成し、まずは共通モジュールの純粋関数に対してユニットテストを書くことにした。 全ての純粋関数に対してユニットテストを追加し、カバレッジを100%にすることができた。 また、純粋関数に関して、CircleCIでカバレッジの自動チェック
DBMS に依存するロジックのテストを書く時、主に2つの手法があると思います。 Repository 層などを mock する Service 層のテストをする時は、その下位の Repository 層を mock して、DBMS に依存しない形にしてからテストする レイヤードなアプリケーションで適用できる手法 テスト実行時も DBMS を裏で動かして、それを使う 本番と同じスキーマを持つ DBMS に対して、実際に insert したり select してテストする DBMS は docker-compose upとかで事前に立ち上げておく 双方にそれぞれ良さがあって、プロダクトによってどっちでやるか変わってくると思います。 この記事では 2 の手法を Prisma でどうやるかについて紹介します。 前提 実際のテストコードの例 テストヘルパーを作る 別解: ヘルパーを自動生成する je
Doubling down on local development with Workers: Miniflare meets workerd
Doubling down on local development with Workers: Miniflare meets workerd11/18/2022 Local development gives you a fully-controllable and easy-to-debug testing environment. At the start of this year, we brought this experience to Workers developers by launching Miniflare 2.0: a local Cloudflare Workers simulator. Miniflare 2 came with features like step-through debugging support, detailed console.lo
Mocking a JavaScript Class with Jest, Two Ways to Make it Easier
Mocking a JavaScript Class with Jest, Two Ways to Make it Easier
GitHub - Quramy/jest-prisma: Jest environment for integrated testing with Prisma client
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Wevoxのフロントエンドエンジニアをしているタガミです。最近はmonorepo構成に移行中のWevoxフロントエンドのテストやデザインシステムなどをいい感じにしようとしています。 この記事では、WevoxというSaaSプロダクトのフロントエンドにおける自動テストの話をします。Wevoxはリリースから5年以上が経過し、チームのメンバーも増え、またソースコードも巨大化しています。そんな中でフロントエンドも"式年遷宮"をして、改善を繰り返しています。中にはソースコードをガラッと変えるようなリファクタもあり、担当するエンジニアにとってはデグレの心配が付き纏います。そんな日々変化するフロントエンドを支えるのが自動テストです。 Wevoxの開発チームは決して大人数ではありません。そんなチームでも品質の改善のために一歩ずつ改善しつつある経験をもとに、フロントエンドの自動テストポイントをいくつかお伝えし
Jestでテストを書いてみよう（実践編）
こんにちは、エンジニアのYoheiです。 早速ですが、皆さんはテストコードを書いたことはありますか？ テストを書くとなると腰が重くなってしまう方もいるかもしれませんが、実はテストを書くと良いことがたくさんあるんです。 テストについてよくわからない方、これからテストを書き始めるという方はぜひ読んでみてください！ 前半は、テストの概要について説明します。 後半は、Javascriptの テスティングフレームワークである Jest を使って実際のコードを例に説明していきます。 まずはテストの概要について簡単に見ていきましょう。 テストとは ※学校でやるテストではありません。 ここでのテストとは、プログラムのテストです。 プログラムのテストとは、実装したプログラムが意図した通りに動いているかを検証するために行うものです。 テストの種類 テストには主に３つの種類が存在し、以下のように分類できます。
はてなブログで使われているフロントエンドのテストツールを統一した話 - Hatena Developer Blog
はてなでエンジニアアルバイトをしているid:wafuwafu13です。はてなブログのフロントエンドで使われているテストツールの統一を2021年11月頃から進めてきましたが、この8月に完了したので振り返りたいと思います。 はてなブログのフロントエンドに残された秩序の乱れ テストツールを統一する理由とツールの選定 移行をどう自動化したか（しなかったか） 余裕のあるスケジュールで小分けして作業を実施 はてなエンジニアのアルバイトは通年で募集中！ はてなブログのフロントエンドに残された秩序の乱れ 2020年のid:nanimono_demonaiさんの活動により、はてなブログのフロントエンドのテストはPhantomJSとKarmaを撤退し、Jestに移行されました。 はてなブログのフロントエンドに秩序はもたらされたのか - Speaker Deck これによって秩序がもたらされたものの、Node.
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
単体テストを書く時、モジュール間の関連を検証するため、一部のモジュールをモックする必要が出てくることがあります。モックは様々な手法がありますが、書き方によって、メンテナンス性やテストの可読性が変わります。一般的に行われるモック手法を確認しつつ、よりリーダブルなテストを書く方法を紹介します。 ログイン 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
【クラウド勤怠】Jestを使ってファイル・ディレクトリの命名規約をテストする - Money Forward Developers Blog
こんにちは。クラウド勤怠チームでエンジニアをしております katuo です。今回の記事ではチーム内でJestを使ってファイル・ディレクトリの命名規約を自動テストできるようにした話について書いていこうと思います。 コード規約作成に伴う問題 現在クラウド勤怠ではフロントエンドの再設計・コード規約の整備が進んでいます。コード規約が整備されて、可読性が向上したり、意思決定コストが下がったりするなどの恩恵を受ける一方で、PRレビューでディレクトリ/ファイル命名規約に関するレビューコストが全体として増加してしまいました。(例: 「〜の階層に定義するファイルは〇〇の形式で記述してください！」) 現在、クラウド勤怠ではフロントエンドのコード規約はGithubのWikiで管理しています。日常的に業務でコード規約を管理しているメンバーは問題ないのですが、そうでないメンバーは最新コード規約を把握するのが難しく、
実装例から見る React のテストの書き方 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！フロントエンドエキスパートチームの@nus3_です。 kintone のフロントエンド刷新プロジェクト（フロリア）では、品質を保ったまま開発を加速させるためにフロントエンドのテストを積極的に行っています。 今回はそんなフロントエンドのテストの実装例をいくつか紹介します。この記事がフロントエンドのテストを行う上での参考になれば幸いです。 テストに使用する主なパッケージ コンポーネントのテスト 補足: Testing Library の記法をチェックしてくれるeslint-plugin-testing-library カスタムフックのテスト 補足: React v18 では @testing-library/react の renderHook を使う 参考リンク 色々なテスト事例 setTimeout を使うコンポーネントのテスト 補足: Storybook の story を使
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScriptの環境構築から分かる、Jestを使用したテストの方法 | DevelopersIO
Wallaby.jsを使ってフロントエンド開発のテストを効率化しよう - Findy Tech Blog
フロントエンドのテスト基盤を Jest から Vitest に移行した話
Vite は使ってないけど Jest を Vitest に移行する
Release v30.0.0-alpha.1 · jestjs/jest
Reactのテストをちょっとよくするかもしれない細いTips
Next.jsでServer Componentsがちょっとだけテストできるようになってた
Release v29.6.0 · jestjs/jest
Jestのuiテストがつらすぎるので愚痴らせてください。そしてブラウザテストで本質的なuiテストをしよう
Moving Angular CLI to Jest and Web Test Runner
Angular: Angular CLI の Jest サポートを試す
Webフロントエンドにおける網羅的テストパターンガイド
Jestではじめるテスト入門 - PEAKS
Common mistakes with React Testing Library の和訳 - Qiita
Why Is My Jest Suite So Slow?
Learn, improve and generate code with AI | Refraction
GitHub ActionsでJestのログに色をつけられる - hogashi.*
React/Jestでのユニットテストに少し慣れてきたら役に立つtips
GitHub - prisma-labs/konn
ぼくたちがかんがえたさいきょうのStorybook 〜より高品質なコンポーネントを求めて〜
コツコツ始めるフロントエンドのテスト拡充活動(ユニットテスト編)
Prisma で本物のDBMSを使って自動テストを書く - mizdra's blog
フロントエンドの"ちょうどいい"自動テストのはじめかた - Atrae Tech Blog
リーダブルなテストのための、jest モックファクトリー関数