Node.js18を20にアップデートして、jestの実行速度を3倍にした - くらしのマーケット開発ブログ

2024/03/19 9 users 実行速度 アップ 3倍

こんにちは！バックエンドエンジニアのハラノです。 くらしのマーケットのシステムの中には、Node.js（NestJS）を使用したマイクロサービスが存在しており、今回 Node.js のバージョンアップを行いました。 バージョンアップの方針及び、実際にアップデートを行う際に出てきた問題とその対策をご紹介します。 バージョン... 続きを読む

@swc/jestで手間をかけずにテストを早くする - ドワンゴ教育サービス開発者ブログ

2024/02/26 11 users SWC Bun Vitest 手間 ドワンゴ教育事業

こんにちは、ドワンゴ教育事業 Web フロントエンドチームの猪井です。 この記事では babel-jest から @swc/jest に移行することで Jest によるテストが速くなった事例について紹介します。 JavaScript のテストツールは、Vitest のバージョンが 1 を迎えたり Bun が登場したりして、よく使われる Jest 以外にもよさそう... 続きを読む

新しい UI テストの手法を提供するテストライブラリ SafeTest

2024/02/25 100 users React angular Svelte Vitest Vue

新しい UI テストの手法を提供するテストライブラリ SafeTest 2024.02.25 SafeTest は Playwright と Jest/Vitest を組み合わせた UI テストライブラリです。特定のライブラリに依存せず、React, Vue, Angular, Svelte などのフレームワークに対応しています。SafeTest は単体テストと Playwright を使った E2E テストの... 続きを読む

フロントエンドのテスト基盤を Jest から Vitest に移行した話

2023/12/26 15 users Vitest テストフレームワーク ナレッジワーク 半年

こんにちは。ナレッジワークの torii です。 7 月にフロントエンドエンジニアとして入社してもうすぐ半年、そろそろ技術記事の一つも書きたいなと思っていたところに、ちょうどいいネタを見つけたので投稿してみます！ Jest から Vitest に移行してみた 早速やったことですが、フロントエンドのテストフレームワークを J... 続きを読む

そのテスト、最後まで実行されていますか？　jestとnpm-run-allの恐るべき罠

2023/12/05 8 users ユニットテスト GitHub Actions 筆者 既存 自信

皆さんこんにちは。この記事では、筆者が最近業務中に経験した恐るべき罠についてシェアしたいと思います。 CIでユニットテストを実行することは、とても多くのプロジェクトで行われています。ユニットテストは特に、既存のコードの変更を自信を持って行うために必要なものです。弊社でも、CI (GitHub Actions) でユニッ... 続きを読む

いまNext.jsで新規サービスを立ち上げるときの観点（Router・CSS・認証・監視など/2023年末）

2023/10/20 326 users 観点 Next.js 新規サービス StorYBook PoC

免責事項 社内向けに展開するように雑にまとめました Next.jsの知見が深くない人がリードしてPoCを立ち上げなきゃいけなくなったが、社内的にはNext.jsを推奨しているみたいな場面を想定しています なので自信ないところも多いですが割と断言するように心がけて書いています PoCの立ち上げ想定なので、jest/Storybookな... 続きを読む

Next.jsでServer Componentsがちょっとだけテストできるようになってた

2023/09/11 11 users Server Components Next.js I'm

先日 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 でのテスト実行がサポートされてい... 続きを読む

「フロントエンド開発のためのテスト入門」の感想

2023/05/02 7 users テスト入門 フロントエンド開発 感想 テスト 時期

同じ時期に Jest 本（Jest ではじめるテスト入門）を書いていたので、他の方はどのようにテストについて書くのか気になったので読んでみました。 Jest 本との比較 Jest 本と比較し、「フロントエンド開発のためのテスト入門（歯車本と呼ぶそうです）」は Jest の説明など重複している部分はありましたが、特徴が全く違う... 続きを読む

MSW を活用した WebAPI リグレッションテスト

2023/04/23 16 users リグレッションテスト WebAPI MSW モックサーバー

MSW はネットワークレベルでリクエストをインターセプトする、自動テストで便利なモックサーバーです。過去記事でも紹介したとおり、スパイ（モック関数）をネットワークレベルに忍ばせることが可能です。実際に WebAPI が呼ばれた時の Payload の検証は、Jest 組み込みのモック機能では実現できない領域です。本稿は「W... 続きを読む

ペイトナー請求書のフロントエンドにスナップショットテストを導入した話 - Paytner Tech Blog

2023/03/02 13 users フロントエンド スナップショットテスト 本稿 Nuxt.js

はじめに ペイトナー請求書のフロントエンドを主に担当している @fuqda です。 本稿では、ペイトナー請求書のフロントエンドの品質改善の一つとして、最近実施したスナップショットテストの導入についてご紹介させて頂ければと思います。 この記事の対象読者 Vue.js / Nuxt.jsでJestのスナップショットテストを実装する... 続きを読む

GitHub ActionsでJestのログに色をつけられる - hogashi.*

2023/01/12 12 users hogashi tty GitHub Actions ロク

Jest は TTY では色つきのログを出すが、そうでないときは色なしになる https://jestjs.io/docs/cli#--colors --colors オプションか、環境変数で FORCE_COLOR=true するととにかく色つきのログを出せる GitHub Actions では色つきのログに対応している A better logs experience with GitHub Actions | The GitHub Blog... 続きを読む

「State of JavaScript 2022」公開。利用率1位のフロントエンドライブラリはReact、レンダリングはNext.js、テストはJestなど、4万人のエンジニアが回答

2023/01/11 121 users 国別分布 React インド イギリス 同時

JavaScriptに興味を持つ世界中のIT技術者3万9472人が回答したアンケートの結果をまとめた「State of JavaScript 2022」が公開されました（日本語訳版が同時公開されています）。 回答者の国別分布を上位5位までを見ると米国が11.9％、ドイツが5.2％、フランスが3.7％、イギリス（UK）が3.6％、そしてインドが3.2％。 言... 続きを読む

会計PlusのWebフロントエンドパフォーマンス改善 | Money Forward Engineers' Blog

2022/10/19 14 users Money Forward Engineers Blog

大阪開発拠点でマネーフォワード会計Plus（以下、会計Plus）プロダクトのフロントエンドエンジニアをやってます、しばもとです。好きな食べ物は、ポンデリングです。 私が所属する会計PlusのWebフロントエンドで改善活動を行いました。その改善活動としてビルド時間の短縮、バンドルサイズの削減、Jestの実行時間短縮な... 続きを読む

Jest で落ちたアサーションを GitHub のアノテーションに出す - Diary of a Perpetual Student

2022/09/08 12 users アノテーション GitHub アサーション 生きがい テスト

最近 GitHub Actions を弄くり倒すことにハマっていて、 GitHub の Checks API を利用して annotation を出すおもてなしをすることだけが生きがいだと思って生活していました。 そんな中、JavaScript (TypeScript) のコードのテストでよく使われている Jest で、どの assertion が落ちているかを annotation で分かりや... 続きを読む

リーダブルなテストのための、jest モックファクトリー関数

2022/09/01 14 users リーダブル モック モジュール 単体テスト 手法

単体テストを書く時、モジュール間の関連を検証するため、一部のモジュールをモックする必要が出てくることがあります。モックは様々な手法がありますが、書き方によって、メンテナンス性やテストの可読性が変わります。一般的に行われるモック手法を確認しつつ、よりリーダブルなテストを書く方法を紹介します。 ログイ... 続きを読む

jestでDBありのテストを高速化する

2022/07/02 145 users NestJS ts-jest フレームワーク 総数 改修

課題 お手伝いしているシステムでNestJSを採用しているバックエンドのテストが遅いという課題があったので対処した。 前提 フレームワーク DB テストランナー その他 NestJS postgres jest TypeScript, ts-jest テストの総数は700弱。 最終結果 最終的には2段階の改修を経てローカルのテストが3倍速程度高速化した。 # b... 続きを読む

Testing Next.js - getServerSideProps & API Routes -

2022/05/11 8 users getServerSideProps 本稿 Next.js

Next.js の getServerSideProps & API Routes テスト手法についてまとめました。getServerSidePorps & API Routes に関するテストは「Cypress・Playwright」を利用することが多いと思いますが、本稿は Jest 単体テストの紹介です。 Ecosystem Dependencies テストに使用するエコシステム一式です（Jest 等は略） msw nod... 続きを読む

JestのTips集10選。サーバーサイドでNode.jsのJestを書いたことない人向け

2022/04/11 100 users サーバーサイド ベストプラクティス Tips node.js

対象 業務レベルでサーバーサイドでJestを書いたことはないけれど、新プロジェクトでは書くことになったみたいな方を想定して記述しています。 Jestについては中々ベストプラクティスが集まりにくいので、経験的にこう書くと「きれいに」・「早く」・「正確に」書けるよというTipsを集めてみました。もし、よろしければ... 続きを読む

Node.js の assert の小話 - from scratch

2021/12/27 14 users assert test node.js 便利ライブラリ 歴史

Node.js Advent Calendar の4日目の記事 です。 Node.js の assert は結構歴史が深いです。あまり直接使ってる人は少ないかもしれません。使うとしたら test で使ったりするケースでしょうか。 それも最近は jest に生えてる便利ライブラリを使うほうが多いのかもしれないですね。 unassert なんかで開発中に埋め込んで... 続きを読む

【Rome】RomeはJavaScriptをやめてRustにするってよ - Qiita

2021/09/27 17 users Qiita rust Rome Webpack Babel

RomeはLinterでありCompilerでありBundlerでありFormatterでありTesterでありMinifierであり…… ともかく、フロントエンドの統合ツールチェーンです。 これまでBabel、ESLint、webpack、Prettier、Jestなど様々なツールでバラバラに行っていた作業が、Romeひとつ使うだけで完結するようになるという、これまで何度再発明... 続きを読む

JestでTypeScriptを高速化する | miyauci.me

2021/09/02 138 users SWC esbuild TypeScript トランスパイル

JestでTypeScriptを高速化するJestでテストの高速化させる方法を紹介します。トランスフォーマーとしてesbuildやswcを紹介し、TypeScriptで遅くなりがちなトランスパイルを高速化させることで、テストを自体を高速化します。 はじめにesbuild の登場により、フロントエンドの世界は、開発環境により速度を求めるようにな... 続きを読む

Composition API + Jestでコンポーネントを一切マウントせずに書けるフロントエンド単体テストパターン - ANDPAD Tech Blog

2021/08/20 11 users Vuex ANDPAD コンポーネント フロントエンド チーム

どうもこんにちは！ 2021年4月にANDPADにジョインし、現在チームでフロントエンドの開発をしている鳩です。 こちらのVue Composition APIをチームで導入して得られたメリット - ANDPAD Tech Blogでも取り上げられていますが、私のチームでもOptions API + Vuex で実装されていたコンポーネントをComposition API + witho... 続きを読む

ts-jestとESM - lacolaco notes

2021/06/02 6 users ESM docs ts-jest true NEXT

#Jest v27 / ts-jest v27 https://jestjs.io/ja/docs/next/ecmascript-modules Node.js の --experimental-vm-modules オプションが必要 ESMとして扱いたいファイルの拡張子を extensionsToTreatAsEsm で宣言する必要あり JestがESMをサポートしている状態では内部的に supportsStaticESM フラグがtrueになる このフラグ... 続きを読む

なぜJestのmockライブラリに混乱してしまうのか？ - Qiita

2020/12/22 120 users テスティングフレームワーク Qiita sinon モック

はじめに JavaScriptのモックライブラリでは、 sinon などが有名であるが、テスティングフレームワークに Jest を使ってるならば Jest組み込みのモックライブラリで済ませたほうが学習コスト少なくて済むだろうと思える。 しかし、 sinon の感覚でJestのモックライブラリを使おうとすると違和感というのか、モックへの考... 続きを読む

jestのテストが遅い場合に確認すべきこと - ishikawa_pro's memorandum

2020/10/19 9 users memorandum テストフレームワーク mocha 去年

こんにちは。 急に寒くなりましたね。 僕は最近iPad Air4 を予約しました。 今日は、javascriptのテストフレームワークのjestについてです。 業務では去年くらいから新規サーバーアプリケーションはjavascriptではなくTypeScriptを使っています。 それに合わせてテストフレームワークもmochaからjestへ移行しました。 je... 続きを読む