こんにちは。ナレッジワークの torii です。 7 月にフロントエンドエンジニアとして入社してもうすぐ半年、そろそろ技術記事の一つも書きたいなと思っていたところに、ちょうどいいネタを見つけたので投稿してみます！ Jest から Vitest に移行してみた 早速やったことですが、フロントエンドのテストフレームワークを Jest から Vitest に移行しました。理由としては、Jest が CJS を前提として動作しており、ESM 前提のモジュールを動かすのに一手間も二手間もかかるからです。 ナレッジワークのフロントエンドは Next.js を採用しており、テストフレームワークには Next.js と相性の良い Jest を採用していました。関数単位のテストや UI コンポーネントのテストを書く分には問題なかったのですが、それより上層（ページなど）になるとたちまち ESM 互換性の問題を
皆さんこんにちは。この記事では、筆者が最近業務中に経験した恐るべき罠についてシェアしたいと思います。 CIでユニットテストを実行することは、とても多くのプロジェクトで行われています。ユニットテストは特に、既存のコードの変更を自信を持って行うために必要なものです。弊社でも、CI (GitHub Actions) でユニットテストを実行しています。 あるとき、CIの挙動が不安定になったことをきっかけに、CI上でのユニットテストの実行について調べてみました。その結果、とんでもないことが判明したのです。 不安定になったCI 時折、CIにすごく時間がかかり、30分経ったあたりでタイムアウトしてしまうことがありました。そのときのログを見てみると、jestによるユニットテストが実行されている最中に、何のログも出力せずに突然止まっているようでした。そのようなときはリトライするとそこそこの確率で成功します。
上記以外で特筆すべき点として、他の開発者(≒チームメンバー)にとっては、変更の影響をほとんど受けずに、ノーコストで上記恩恵を受けられる点があります。 これは Vitest の Jest に対する高い互換性のおかげでテストコードの書き方に大きな変更がなかったことと、テスト実行コマンドを npm-scripts によって隠蔽していたことによるもので、移行したことに気づきさえしない可能性もあります。 Vite を使ってないのに Vitest 使ってええんか？ 今回 Jest から Vitest への移行を行ったプロジェクトは、開発サーバーやプロダクションビルドには Webpack を使用しており、Vite は一切使用していませんでした。 そういったプロジェクトにおいても、Vite をベースとしたテストフレームワークである Vitest は使用して良いものでしょうか？ これについては Vitest
こんにちは！バックエンドエンジニアのハラノです。 くらしのマーケットのシステムの中には、Node.js（NestJS）を使用したマイクロサービスが存在しており、今回 Node.js のバージョンアップを行いました。 バージョンアップの方針及び、実際にアップデートを行う際に出てきた問題とその対策をご紹介します。 バージョンアップの方針 バージョンアップの結果 各種対応において、発生した問題と対応 TypeScript のバージョンアップ NestJS のバージョンアップ @nestjs/common から HttpService, HttpModule が削除された Inject にInject(TestRepository.name)のように、クラス名を渡している部分について、依存関係の解決が行えなくなっていた RxJS のtoPromiseが Deprecated になった TypeOR
こんにちは、ドワンゴ教育事業 Web フロントエンドチームの猪井です。 この記事では babel-jest から @swc/jest に移行することで Jest によるテストが速くなった事例について紹介します。 JavaScript のテストツールは、Vitest のバージョンが 1 を迎えたり Bun が登場したりして、よく使われる Jest 以外にもよさそうな選択肢が増えています。業務の手が少し空いたタイミングでそれらについて調査し実際に試してみたところ、最終的に @swc/jest を使用することで既存のテストを大きく書き換えることなく実行時間を短縮できました。 今回試した JavaScript のテストツール 今回は Vitest、Bun、そして @swc/jest の 3 つを試してみました。 これら以外にも、Node.js 自体に搭載されているテストランナーや、@swc/jes
Migrating away from Jest and achieving over 90% reduction in running time
Unfortunately, I’ve been using Jest since 2019. No offense to the Jest team – I’m pretty sure they’re awesome and way smarter than I am, but I wish I had made this move earlier in this project. I’m not talking about UI testing here, so assume everything I’m saying is about server-side JS. If you’re happy with Jest, don’t switch! I’m not trying to convince anyone. I’m just sharing my experience bec
はじめに こんにちは。iimonでエンジニアをしている林と申します。 本記事はiimonアドベントカレンダ11日目の記事となります。 今回テスト戦略やjestについて調べたので記事にしてみようと思います。 テスト戦略 今回挙げるテストの種類以外にも様々なテストがあると思いますが、 今回はフロントエンド開発において必ず出てくるであろう「ユニットテスト」「インテグレーションテスト」「E2Eテスト」についてのテスト戦略を解説していきます。 テストの種類 上記で挙げたテストの詳細については下記になります。 ユニットテスト(単体テスト) 最も基本的なテスト 関数やメソッドなどの単位での動作を検証する 小さい単位で見ているので速度が速い 全体や結合してる部分など複数の単位が合わさった時に起きてしまう不具合については検出出来ない。 結合テスト(インテグレーションテスト) 複数のユニットを連携させて、正し
こんにちは、戸田です。 このブログでは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
こんにちは！サイボウズ株式会社フロントエンドエンジニアの おぐえもん（@oguemon_com） です。 JavaScriptのテスティングフレームワークの定番であるJestには、toBe()という便利なMatcher（評価用関数）が用意されています。 toBe()はexpect(A).toBe(B)の形式で記すことでAとBが等しいかどうかを評価してくれるのが特徴で、最も基本的な存在なのでテストコード初心者の方も多用されていることと思います。しかし、toBe()の挙動を正しく認識しておかないと、思わぬミスを招きかねません。そこで、この記事では、ある2つの値がtoBe()で等価判定されるのか、はたまた等価判定されないnot.toBe()なものなのかを見ながら、その挙動に迫ります。 この記事は執筆時点の最新版であるjest@29.7.0の挙動に基づいています。 toBe(), or not.t
React テストコード（Jest, React Testing Library）の学びと Tips - Qiita
はじめに 早いもので2023年も終わりが近づいてきました。皆様はいかがお過ごしでしょうか。毎年アドベントカレンダーの時期になると、今年一年で学び経験した技術の知識を棚卸しするために記事を書いています。2023年はよくテストを書いた年でした。React のテストコードで学んだことを書き記します。 テストにはいわゆる手動テストと自動テストがあります。どちらも必要ですし、用いる手法はケースバイケースなのかなと思います。テストにかける時間や労力は短期的に見るか長期的に見るかで手動テストと自動テストのどちらが良いかは一概には言えません。多くの場合は組み合わせて行うと思います。 テストレイヤーの切り方として、Ice-Cream Cones, Testing Pyramids, Testing Trophy など様々な考え方があります。上層ほど高コスト・低速。下層ほど低コスト・高速と言われています。 出
Node.jsの組み込みテストランナーとは 英語圏ではNode.js built-in test runnerとか呼ばれている存在で、Node.jsの組み込みテストランナーのこと。恐らくDenoのテストランナーに対抗して生まれた気配がする（Node.jsはDenoに機能追加があると真似する傾向があるため Node.jsの組み込みテストランナーは機能が二分されており、テストランナーとアサートに分かれている Jestみたいにエコシステムが発達しておらず、標準ではdescribeなどはimportする必要がある。TypeScriptをテストする場合は間にレジスター[^1]を嚙ます必要があるが、本項では扱わない Jest関数との対応リスト describe, it, beforeAll, afterAll, beforeEach, afterEach辺りは違和感がなかったが、それ以外は軒並み互換性
こんにちは、Sansan Engineering Unit の渡邉です🦐 私たちのチームではTypeScriptで開発しており、テストはJestを用いて書いています。ある日からテストが結構な頻度で落ちてしまうように（FLAKY *1に）なっていました...。 そこで、テストがFLAKYになっている原因を深掘り調査したところ、Jestのメモリまわりについて解像度が高まったので、備忘録代わりに残します。 結論 Jestにおけるタイムアウトエラーとメモリエラー（Out Of Memory）を次のオプションを設定し、防止できました。 `jest.config.js` ... testTimeout: 30000, // タイムアウト時間を延長 workerIdleMemoryLimit: '1024MB', // ワーカーが使用できるメモリ上限を制限 maxWorkers: 4, // テストを
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
{ "extends": "@tsconfig/strictest/tsconfig.json", "compilerOptions": { "target": "es2016", "module": "commonjs", "outDir": "dist", "noPropertyAccessFromIndexSignature": false, "noImplicitReturns": false, "baseUrl": "./", "paths": { "@/*": ["src/*"], "~/*": ["./*"] }, "esModuleInterop": true, "isolatedModules": true, "forceConsistentCasingInFileNames": true, "strict": true, "skipLibCheck": true, },
（2023/06）Jest における CommonJS / ECMAScript Modules の扱いについて - Qiita
1. 概要 JavaScript における CommonJS（以下、CJS）と ECMAScript Modules（以下、ESM）の問題は色々なところで発生する厄介な問題です。 Jest を使ったテストコードにおいてもこの問題に直面することがあります。 この文章は Jest における CommonJS / ECMAScript Modules の扱いについて包括的な情報提供を目指して書いています。 これを書くにあたって私は様々な情報収集をした他、不明瞭なところは実験サンプルを作って動きをみたり、関連するモジュールの中身を見てみたり、色々なことをしています。 正確な記載を心掛けますが、間違いを発見した場合は遠慮なく指摘をしてください。しかし、Node.js の世界は進歩が速いので受けた指摘をこの文章に反映するかどうかはわからないことを予め申し上げておきます。 基本的にはこの文章は執筆時点の
jest.mockがどう動いてるのか実行されたコードを覗く
株式会社IVRy （アイブリー）のエンジニアのkinashiです。 IVRyではテストツールとして Jest を使っています。 普段なにげなく使っているモックですが、 import したモジュールをどうやって上書きしてるのか気になったことはありませんか？ 呼び出す前に上書きしてるのかなという想像は付きますが、実際どんなコードが動いているのか見てみようと思います。 モックと言っても様々あり、下記の記事で紹介されているようにテストダブルの考え方では Dummy Object や Test Spy など5つのカテゴリに分類されます。 Jestにもこれらのモックを使用するための機能がありますが、この記事ではテスト対象のファイルで import しているモジュールを jest.mock を使用してモックした際の挙動について見ていきます。 実行環境 下記の package 構成で確認しました。
Fixes [expect, @jest/expect-utils] ObjectContaining support symbol as key (#14414) [expect] Remove @types/node from dependencies (#14385) [jest-core] Use workers in watch mode by default to avoid crashes (#14059 & #14085). [jest-reporters] Update istanbul-lib-instrument dependency to v6. (#14401) [jest-mock] Revert #13692 as it was a breaking change (#14429) [jest-mock] Revert #13866 as it was a b
Next.jsでJestを実行した際にvanilla-extractがうまく読み込まれない問題を暫定的に解決させる | DevelopersIO
こんにちは、CX事業本部のmorimorikochanです。 表題の通りNext.jsで構築したフロントエンドでJestを実行させようとしていたのですが、vanilla-extractがうまく読み込むことができませんでした。 あれこれ試行錯誤して暫定的な解決方法がわかったので、もし同じ問題ではまっている人のために共有したいと思います。 問題 vanilla-extractのフォーマットに沿った*.css.tsをimportしているコンポーネントのテストをJestで書くと、Jest実行時に*.css.tsの中身が読み込まれずundefinedになってしまいエラーが出てしまいます。 テスト対象コンポーネント import { ButtonStyles as styles } from './button.css' // ... export const ButtonA: FC<ButtonPr
Features [create-jest] Add npm init / yarn create initialiser for Jest projects (#14465) [jest-validate] Allow deprecation warnings for unknown options (#14499) Fixes [jest-resolver] Replace unmatched capture groups in moduleNameMapper with empty string instead of undefined (#14507) [jest-snapshot] Allow for strings as well as template literals in inline snapshots (#14465) [@jest/test-sequencer] C
jest で非同期関数をテストするときの注意点
不適切な書き方をすると、落ちるべき(誤った)テストが通過する場合がある。 結論 コールバック テスト関数の引数にdoneを入れる コールバック関数内の最後でdone() する Promise Promise をreturnするか、async / await で扱う 異常系のテストでは、catch 句の外側に expect.assertions(n) / expect. hasAssertions() を書くか、expect(Promise).rejectsを使う リンク Testing Asynchronous Code · Jest jest - Necessary to use expect.assertions() if you're awaiting any async function calls? - Stack Overflow 問題 適切な書き方をしなかった場合、非同期処理
みなさん、こんにちは！ Technology部のジョシュです。 AI技術の急速な発展により、従来のテスト手法を見直す機会も増えているのではないでしょうか。そこで今回は、ChatGPTやPhindなどのAIを利用して、ユニットテストとエンドツーエンド（e2e）テストのプロセスを効率化する方法を紹介します。 AIはスタッフのスキル不足の解消や、効率性と生産性を高めるために非常に有用です。AIをうまく利用することでコード作成プロセスをどのように加速させられるか、ご参考になれば幸いです。 Next.jsとJestを用いたユニットテスト アプローチ 最近のプロジェクトでは、Next.jsを用いてサービス、クラス、モジュールを先に開発し、テストに取り掛かりました。基本構造が完成した後、包括的なテストケースを作成するためにAIを活用しました。 テスト生成におけるAIの活用 主な目的は以下の3つです。 基
はじめに TypeORM を用いたプロジェクトで、実際のDBに問い合わせるリポジトリのテストができていない課題がありました。 PHP の Web フレームワーク Laravel 等ではテスト毎にDBをリセットする仕組みがあり、リクエスト～レスポンスまで一貫してモックせずDBアクセスまでテストすることもできます。車輪の再発明感はありますが、後学のために同様の仕組みを TypeORM に対応する形で構築してみようと思います。
はじめに APIテストが失敗すると原因調査が大変です。 特に複数サーバーを通過しているときは探し回らなくてはいけません。 シナリオテストとして複数のリクエストを投げている場合は更に大変になります。 これを解決するために、OpenTelemetryをJestに組み込むEchoedというパッケージを作りました。 Echoedは、Jestで実行したHTTPリクエストの詳細をhtmlにして出力します。 それによって、 失敗したテストのデバッグが捗る (OpenTelemetryのトレーシングとログを一箇所に集約するので) CIで実行できる (外部のサービスを使わない) デバッグ実行ができる (Jestなので) 既存のライブラリを使ってテストが作れる 並列で実行できる 既存のテストをそのまま使える というメリットがあります。 何ができるか Echoedを入れたJestを実行するとhtmlファイルが作
Jest： node.jsでテストを実行する 以下に該当するファイルをtestファイルと認識する .spec.js .test.js __test__ディレクトリ配下のjsファイル getByRoleのnameオプションの使い方 主に以下の値をマッチさせられる labelのテキスト（input要素） ※label自身ではなく、そのlabelに紐づいたinput要素を取得する aria-labelの値 text content ※getByTextでも対応可能だが、getByRoleの方がベターな方法であるとのこと aria-labelとtext content双方の指定がある場合、aria-labelでしかマッチできなくなるっぽい
この記事について Google Map APIを使ったクラスやモジュールのテストをかけるようになりましょう。今回は@googlemaps/jest-mocksを使ってテストを書きましょう。Maps JavaScript API のテストが容易になるらしい。 先に結論を３つ Google Mapをモックしてくれるモジュールに@googlemaps/jest-mocksというものがある 使い方はinitializeメソッドを呼び出し、Google Map APIを用いたテストデータを作成、実行するだけ MarkerやPolygonなどのGoogle Mapオブジェクト、クリックやドラッグイベント時の挙動もテストすることが可能 @googlemaps/jest-mocksとは Google Mapをモックしてくれるモジュールです。本来ならば、テストを実行するたびにgoogle map apiを実
【Prismaとテストシリーズ】jest-prismaでテストケースごとに隔離されたトランザクションで快適にテストできるか試してみた | DevelopersIO
【Prismaとテストシリーズ】jest-prismaでテストケースごとに隔離されたトランザクションで快適にテストできるか試してみた 「前のテストケースで追加されたレコードのせいで他のテストが失敗した」、「自分でレコードのクリーンアップをするのは厳しい」、「いい感じにテストケースごとにDBのトランザクションはる方法がないかな」というモチベーションで試してみました。Rspecで表現すると `use_transactional_fixtures` に該当すると思います。 こんにちは。AWS事業本部モダンアプリケーションコンサルティング部に所属している今泉（@bun76235104）です。 PrismaはTypeScriptでも利用できるORMの一つです。 私もよく利用させていただくのですが、DBが絡むコードのテストの時には以下のようなことを気にしませんか？ Docker（コンテナ）を使ってモッ
type Size = { width: number; height: number; }; const imageSize = (file: File): Promise<Size> => { return new Promise((resolve, reject) => { const img = document.createElement("img"); img.onload = () => { resolve({ width: img.width, height: img.height, }); }; img.src = URL.createObjectURL(file); }); }; export default imageSize; ここでURL.createObjectURLとloadイベントをモックしようとして少しハマったので記録を残しておきます。 Jestのバージョ
Jestは、next/routerをテストできません。というわけでモックを作って対応するのですが、素直にモック関数を作るだけでは動いてくれなかったので、備忘録をアウトプットしておきます。 How to mock useRouter? モックの作り方 import { useRouter } from 'next/router' const Example: NextPage = () => { const router = useRouter() const currentUser = useRecoilValue(currentUserState) useEffect(() => { currentUser === null && router.push('/login') }, [currentUser]) return ( <> {currentUser ? <Components
こんにちは😃、 CX事業本部のmorimorikochanです。 年末年始はひたすら実家でダラダラしてました。 今回は、Jestでテストを並列実行させるためにmaxWorkersを機械的に取得する必要があったので調べてまとめてみました。 先に結論 # あらかじめjqのインストールが必要です npx jest --showConfig | jq .globalConfig.maxWorkers # `npm run`経由なら`--silent`が必要です npm run test --silent -- --showConfig | jq .globalConfig.maxWorkers 私の環境では、7と出力されました。これは同時に、私のローカルマシンではコア数が8であることも表してます maxWorkersとは Jestが実行される際、Jestは複数あるテストファイルを効率よく処理する
Jest[1]は、Jasmine（英語版）[2]の上に構築され、Meta（旧Facebook）によってメンテナンスされているJavaScriptのテストフレームワークである。 解説[編集] Christoph Nakazawa（英語版）によって設計・開発され、シンプルさと大規模なWebアプリケーションのサポートに重点を置いている。Babel、TypeScript、Node.js、React、Angular、Vue.js、Svelteを使用するプロジェクトで動作する。Jestは、テストフレームワークを初めて使用するユーザーのために、多数の設定が必要ないように作られている。 使い方とテストの例[編集] インストール[編集] JavaScriptのパッケージマネージャーnpmを使用して、JestをNode.jsにインストールする。
Storybook の interaction testing と jest を組み合わせる 2022.01.22 Storybook の Component Story Format 3.0 では新機能として `play()` 関数が追加されました。 `play()` 関数は Storybook 上で ユーザーのクリックやフォーム入力のようなインタラクションな操作を表現することができます。 `play()` 関数の大きな特徴としては Component Story Format の移植性の高さを利用して Storybook 上で定義したインタラクションを `Jest` など他の領域においても再利用できることです。 Storybook の Component Story Format 3.0 では新機能として play() 関数が追加されました。 play() 関数は Storybook
Typescript・Prettier・ESLint・JestでTypescriptの実行環境を0から構築してみた
内容 Typescriptでプロジェクトを構築するために、prettier・ESLint・jestが導入されたTypescriptプロジェクトを0から作成します。 今回はフロントエンドではなく、Node.jsの実行環境を作成します。 完成品は、このリポジトリに配置しています。 準備 以下を準備していきます。 npm環境の構築 typescript prettier ESLint jest npm環境の構築 jsのプロジェクトを作成するということで、npm環境の構築から始めます。プロジェクトを作成する予定のディレクトリの中で、以下のコマンドを実行 ディレクトリにpackage.jsonというファイルが作成されます。 これで、npm環境の構築は完了し、このプロジェクトで、npm moduleが使用できるようになりました。 typescript環境の構築 次に、typescript環境を構築しま
Jestを使った関数のテストについて - Qiita
Jestを使った関数のテストについて 今回は、Jestを使用して関数をテストするサンプルプログラムについて、わかりやすく解説していきます。 下記はテスト元のサンプルプログラムになります /** * 指定された郵便番号から住所を取得するためにAPIを呼び出します。 * @param {string} zipcode - 検索する郵便番号（ハイフンなしの7桁）。 * @returns {Promise} - APIからのレスポンスを含むPromiseオブジェクト。 * @throws {Error} - 引数が空の文字列であるか、7桁の数字でない場合にエラーをスローします。 */ function getZipCloud(zipcode) { if (!zipcode) { return Promise.reject(new Error("郵便番号を入力してください。")); } else i
【初心者向け】JavaScriptテスト完全ガイド：JestとSupertestで始める7つのステップ - Qiita
1. はじめに 目的 この記事の目的は、JavaScriptでテストを簡単に行うための方法を示すことです。特に、JestとSupertestという二つの強力なツールを使用して、テストの基本から応用までをステップバイステップで解説します。これにより、開発者がより効率的に、そして自信を持ってコードをリリースできるようになることを目指しています。 対象読者 この記事は、主にJavaScriptを使用してウェブアプリケーションを開発している開発者を対象としています。特に、Node.jsとExpressフレームワークを使用している開発者にとって有益です。初心者から中級者まで、幅広いレベルの開発者が対象です。 なぜJestとSupertestを使うのか？ JestとSupertestは、JavaScriptのテストを効率化し、信頼性を向上させるための強力なツールです。以下の理由から、これらのツールを選
Jestはデフォルトでcacheを利用するのですが、CIでも利用できるようにしとくと高速化できそうだったのでやり方をメモ📝 Whether to use the cache. Defaults to true. Disable the cache using --no-cache. Jest CLI Options · Jest jestでcacheを保存するパスを指定する CIでcacheしやすいようにcacheの配置先をcacheDirectoryで明示的に指定します。 module.exports = { cacheDirectory: "node_modules/.cache/jest" // ... } The directory where Jest should store its cached dependency information. Configuring Jes
こんにちは、ゆせです。 今回は、案件でjestを使用するとのことだったので、勉強としてjestの公式Docを見ながらやっていました。が、エラーが出たので、もし同じエラーにぶち当たった人に向けて参考になればという思いで記事にしようと思います。 本題に入る 以下が、エラー文になります。 $ npm test > study-jest@0.1.0 test > jest Error: Jest: Failed to parse the TypeScript config file /WorkSpace/NextSpace/study-jest/jest.config.ts Error: Jest: 'ts-node' is required for the TypeScript configuration files. Make sure it is installed Error: Canno
はじめに TypeScript+Jestをdocker環境で構築したときのメモ記事です。 コードをぺたぺた張っていきそこにメモを残していく。 内容 Dockerfile イメージはnode:20を使用当時のLTS。 ENVでnode_modulesを環境変数に指定しないとTypeScriptがコンパイルできなかった。 COPY ./app/package*.json ./これがないとRUN npm install時にpackage.jsonから依存関係を取得できない。 FROM node:20 WORKDIR /app ENV PATH /app/node_modules/.bin:$PATH COPY ./app/package*.json ./ RUN npm install docker-compose.yaml build：contextは特に気にせずルートディレクトリ、Docke
会社のAngular v17 のプロジェクトにtesting-library/angularとjestでテスト環境を構築しようとしたら、思いの外時間がかかったので備忘録。 ライブラリの整理 Angularの標準搭載のテストライブラリのKarmaは必要なくなるので削除する。 npm remove karma\ karma-chrome-launcher\ karma-coverage-istanbul-reporter\ karma-jasmine\ karma-jasmine-html-reporter
jestでもDataProviderが使いたい！
はじめに jestのテストを書いているうちに、ケースが増えてきて見づらくなってしまったのでPHPUnitのDataProvider的なのを書けないか調べたところあったので備忘録として残しておきます。 テスト対象の関数 下記のような足し算をする関数があるとします。ではこの関数のテストを書いてみましょう！ export const addition = ( firstNumber: number, secondNumber: number ): number => { return firstNumber + secondNumber; }; よく書く書き方 test.eachを使う場合はおそらくこういった書き方をすると思います。 しかしこの渡している配列郡をパット見て、どれが何のパラメーターか分かりづらいですよね... そこで今回はPHPUnitのDataProviderみたいな形で書き直し
Intro Jestが登場する以前は、JavaScriptのコードをテストするために、複数のテストライブラリを組み合わせて使用する必要がありました。例えば、Mocha + Expect + Sinonといったライブラリを使ってテストを行ったり、テストカバレッジを測定するためにIstanbulというライブラリを使用したりしていました。わぁ...聞くだけで、テストのために使用するライブラリが非常に多いことがわかります。 しかし、Jestが登場してからは、Test Runner、Matcher、Mocking、Coverage測定まで、すべてを提供してくれるため非常に便利になりました。 通常、テストライブラリは開発依存としてインストールします。 { "name": "jesttest", "version": "1.0.0", "description": "", "main": "index.
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドのテスト基盤を Jest から Vitest に移行した話
そのテスト、最後まで実行されていますか？ jestとnpm-run-allの恐るべき罠
Vite は使ってないけど Jest を Vitest に移行する
Node.js18を20にアップデートして、jestの実行速度を3倍にした - くらしのマーケット開発ブログ
@swc/jestで手間をかけずにテストを早くする - ドワンゴ教育サービス開発者ブログ
jest基礎とテスト戦略 - iimon TECH BLOG
TypeScriptの環境構築から分かる、Jestを使用したテストの方法 | DevelopersIO
To be, or not to be: JestのtoBe()の動きを知ろう！
Node.js組み込みテストランナーとJest比較メモ
Jest のメモリまわりでハマった話 - Sansan Tech Blog
Release v30.0.0-alpha.1 · jestjs/jest
Node + Hono + Prisma + Jestで環境構築
Release v29.6.3 · jestjs/jest
Release v29.7.0 · jestjs/jest
AIを使ったJestテストコードの書き方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
TypeORM + jest で DB アクセスを伴うテストを書いてみた
OpenTelemetry+JestでAPIテストを捗らせるパッケージを作りました
React Testing LibraryとJestについて学んだことをメモ
【Google Maps API】@googlemaps/jest-mocksを使ってテストコードを書こう
JestでURL.createObjectURLとloadイベントをモックする
Jestでnext/routerをモック化 - Breathnote
JestのmaxWorkersをコマンドラインから確認する | DevelopersIO
)
Jest (JavaScriptフレームワーク) - Wikipedia
Storybook の interaction testing と jest を組み合わせる
JestのcacheをCIでも利用して高速化するメモ📝 - Madogiwa Blog
jestの公式ドキュメント見ながらテストしてたが、エラー出た - Qiita
TypeScript + Jestをdocker環境で構築する - Qiita
Angularプロジェクトにtesting-libraryとjestを入れてみた
Jestの使い方を簡単に調べてみます - Qiita