@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... 続きを読む

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

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... 続きを読む

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... 続きを読む

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

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

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

npmパッケージの公開用テンプレートを作ってみました | with TypeScript, Jest, ESLint, Prettier, etc. - m's blog

2020/07/09 48 users npm eslint Prettier husky テン

npm パッケージの公開用テンプレート を作ってみました。 本記事ではテンプレートの内容について、簡単に解説したいと思います。 以下は、2020/07/09 時点でテンプレートに含まれる内容です。 TypeScript CI/CD (publish by GitHub Actions) Jest ESLint Prettier EditorConfig husky ※ 上記以外の項目については、テン... 続きを読む

Jestを使ったVueコンポーネントのテストを導入した話 - MicroAd Developers Blog

2020/04/27 13 users 川上 Vueコンポーネント フロントエンドエンジニア 業務

はじめまして、フロントエンドエンジニアをしている川上です。 業務では、主にサービス要件に沿ったフロントエンド開発を担当しています。 今回は、私自身初めての経験だったフロントエンドのテスト導入手順や、 導入するにあたって気をつけた点などをお話しできればと思います。 はじめに Vueコンポーネントのテストに... 続きを読む

React+Redux環境に『Jest』と『 Enzyme』を導入し、フロントエンドでのテスト環境を構築しました - ZEALS TECH BLOG

2019/09/30 22 users テスティングフレームワーク ZEALS インターン 背景 導入

みなさんこんにちは！ Zealsでフロントエンドエンジニアとしてインターンをしている栂瀬といいます。 この度Zealsで、テスティングフレームワークのJestを導入しました！ 背景や導入にあたっての取り組みなど、何を行なったかを詳しくご紹介していきたいと思います！ Jest & Enzyme とは 背景 実際に動かしてみた 【準備... 続きを読む

Vue と Jest で Unit test を始めよう ｜ DevelopersIO

2019/07/01 59 users DevelopersIO 助力 Vue 本題 オープンソース

Vue と Jest で Unit test を始めよう 保守性の高いコードが書けていますか？ VueのComponent構成 ~ Unit test までの流れを書いています。 Unit testがあると、保守しながら長くメンテナンスしていけるコードになるので、 開発の助力になればと思います。 本題の前に Vue とは オープンソースのJavaScriptフレームワー... 続きを読む

テストの実行時間を2倍速くした話 - 技術探し

2019/06/10 33 users テスト 技術 実行時間 ２倍 オプショ

--runInBand PR 結果 直列実行 並列実行 戦略 ポートマップ 起動時 テストコード さいごに 追記 webpack-dev-serverのテストを高速化しました。 jestを使っていて、--runInBandを今までは使っていましたが、それを外しました。 --runInBand jestはデフォルトでワーカーを使い並列実行を行います。 しかし、このオプショ... 続きを読む

TypeScriptでJestを使うときの設定（ts-jest, @types/jestなど） - dackdive's blog

2019/04/14 51 users Types Babel TypeScript ts-jest

メモ。 TypeScript を使ったプロジェクトに Jest を導入する時に必要なパッケージや設定、とくに ts-jest と @types/jest が必ず必要なのかどうかがよくわかってなかったので調べた。 先にまとめ TypeScript -> JavaScript のコンパイルを TypeScript 自身でやるか Babel に任せるかで必要な設定が異なる。 （Babel 7 か... 続きを読む