フロントエンドのテスト基盤を Jest から Vitest に移行した話
こんにちは。ナレッジワークの torii です。 7 月にフロントエンドエンジニアとして入社してもうすぐ半年、そろそろ技術記事の一つも書きたいなと思っていたところに、ちょうどいいネタを見つけたので投稿してみます！ Jest から Vitest に移行してみた 早速やったことですが、フロントエンドのテストフレームワークを Jest から Vitest に移行しました。理由としては、Jest が CJS を前提として動作しており、ESM 前提のモジュールを動かすのに一手間も二手間もかかるからです。 ナレッジワークのフロントエンドは Next.js を採用しており、テストフレームワークには Next.js と相性の良い Jest を採用していました。関数単位のテストや UI コンポーネントのテストを書く分には問題なかったのですが、それより上層（ページなど）になるとたちまち ESM 互換性の問題を
Jest 29: Snapshot format changes · Jest
Jest 29 is here, just a few short months after Jest 28. As mentioned in the Jest 28 blog post, this version contains just a couple of breaking changes, in order to make the upgrade as smooth as possible. The only breaking changes that should be noticeable are: Node versions 12 and 17 are dropped, both of which are EOL The snapshotFormat property is changed to: + snapshotFormat: { + escapeString: f
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
Meta Open Source is transferring Jest to the OpenJS Foundation
Meta Open Source is transferring Jest to the OpenJS Foundation Meta Open Source is officially transferring Jest, its open source JavaScript testing framework, to the OpenJS Foundation. With over 17 million weekly downloads and over 38,000 GitHub stars, Jest is the most used testing framework in the JavaScript ecosystem and is used by companies of all sizes, including Amazon, Google, Microsoft, and
Jest 28: Shedding weight and improving compatibility 🫶 · Jest
Jest 28 is finally here, and it comes with some long requested features such as support for sharding a test run across multiple machines, package exports and the ability to customize the behavior of fake timers. These are just some personal highlights, and we'll be highlighting more in this blog post. Additionally, as announced in the Jest 27 blog post last year, we have removed some packages that
JestでTypeScriptを高速化する | miyauci.me
JestでTypeScriptを高速化するJestでテストの高速化させる方法を紹介します。トランスフォーマーとしてesbuildやswcを紹介し、TypeScriptで遅くなりがちなトランスパイルを高速化させることで、テストを自体を高速化します。 はじめにesbuild の登場により、フロントエンドの世界は、開発環境により速度を求めるようになりました。vite の隆盛はその最たるものといってもいいでしょう。 esbuild や swc は高速な Go や Rust によって書かれ、更に多くの場合、Typescript の型チェックを省略しています。 tsc の型チェックは、大抵 IDE やワークフローで行われているので、これらを削ぎ落とすことで、純粋なコンパイラとして JavaScript への変換に特化しているということですね。 さて、Typescript コードをテストする際、多くの場
Jest 27: New Defaults for Jest, 2021 edition ⏩ · Jest
In the Jest 26 blog post about a year ago, we announced that after two major releases with few breaking changes, Jest 27 will flip some switches to set better defaults for projects that are new or can migrate smoothly. This gives us the opportunity to remove some packages from the default distribution of Jest 28 and publish them as separately installable and pluggable modules instead. Everyone on
Jestテストの並行実行と逐次実行をちゃんと理解する - Qiita
TL; DR (要約) Jestの実行時オプション(CLIオプション)と、テストメソッド(it,test)の書き方で、並行処理と順番(逐次)処理をコントロールする方法について、以下の4パターンを図で説明します。 複数のテストファイルを並行処理し、ファイル内のテストは順番に実行する 複数のテストファイルを順番に処理し、ファイル内のテストも順番に実行する 複数のテストファイルを並行処理し、ファイル内のテストも並行実行する 複数のテストファイルを順番に処理し、ファイル内のテストは並行実行する はじめに Jestでは、パフォーマンスのために複数のテストファイルが並行に処理（テスト）されます。しかし、並行処理が思わぬエラーを生むこともあります。 たとえば、データベースへ接続するテストやpuppeteerを使ったE2Eテストなど副作用を生じさせるテストの場合、テストの書き方や実行タイミングによってはテ
フロントエンドテストを雰囲気で書いているとハマりがちなところ - Qiita
この記事の対象読者 Webフロントエンドのテストコードを雰囲気で書いてる人 この記事の前提 テストフレームワークは Jest の利用を想定しています Jest自体のセットアップや使い方は一切触れていません フロントエンドテスト、慣れてないとハマりがち 経験上、フロントエンドのテストコードを書く際には、慣れていないとハマったり混乱してしまうポイントが多くあると思っています。 僕のdivタグ書き換えるコードがテストだと動かない エラーになるテストなのにパスしちゃう 慣れてくると何でもない部分ではありますが、基本的な考え方や躓きやすい箇所を整理してみました。 フロントエンドのテストコードはNode.js上で実行される フロントエンド開発では、実行環境として主にブラウザを対象とすることが多いでしょう。つまりWindowオブジェクトの利用やDOM操作が可能です。（たとえば location.href
About Queries | Testing Library
OverviewQueries are the methods that Testing Library gives you to find elements on the page. There are several types of queries ("get", "find", "query"); the difference between them is whether the query will throw an error if no element is found or if it will return a Promise and retry. Depending on what page content you are selecting, different queries may be more or less appropriate. See the pr
Fix the "not wrapped in act(...)" warning
Here's the code for that (if you were to do it with class components, don't worry a function version is coming later in the post): class UsernameFormClass extends React.Component { state = { status: 'idle', error: null } handleSubmit = async (event) => { event.preventDefault() const newUsername = event.target.elements.username.value this.setState({ status: 'pending' }) try { await this.props.updat
Jest 26: Tick Tock · Jest
When we started rebuilding Jest five years ago our goal was to provide a batteries-included zero-configuration test runner that is approachable for beginners, extensible for almost all testing use cases and scalable to large projects. One of the instrumental releases was Jest 15 which tied everything together and provided good defaults that allowed people to run Jest often without any setup. Howev
ava-to-jest.md
ava-to-jest.md AVAからJestへの移行 大枠の書き方 テストケースの定義 AVAのtest('コメント', () => {/* テスト内容 */});という書き方（xUnit形式）はJestでも可能です。AVAではimport test from 'ava';という感じでtest関数をインポートしていましたが、Jestではグローバル変数として定義されているのでインポートは不要です。test関数だけでなく、Jestが提供するAPIは全てグローバル変数で定義されているので、importせずに参照できます。 // AVA import test from 'ava'; test('テストケース名など', t => { t.true(true); }); // Jest // 全てのAPIはグローバルに定義されており、importは不要 test('テストケース名など', ()
Replacing Mocha with Jest
When everything works and clients are happy, sometimes we forget to upgrade stuff. That’s how a jsdom version from 2016 ended up in our testing stack. If you used Mocha earlier for testing web apps, you already know that you have to set up jsdom manually. I decided to replace Mocha with Jest while I was searching jsdom’s issue tracker and run into a post. It was about changing something in the pre
React+Redux環境に『Jest』と『 Enzyme』を導入し、フロントエンドでのテスト環境を構築しました - Zeals TECH BLOG
みなさんこんにちは！ Zealsでフロントエンドエンジニアとしてインターンをしている栂瀬といいます。 この度Zealsで、テスティングフレームワークのJestを導入しました！ 背景や導入にあたっての取り組みなど、何を行なったかを詳しくご紹介していきたいと思います！ Jest & Enzyme とは 背景 実際に動かしてみた 【準備】React Componentをテストしよう 実際のテストコードをご紹介 タグの有無をテスト イベントのテスト Reduxのテスト reducerのテスト テストコード勉強会 勉強会のコンテンツ：shallow is faster than mount ?? 検証結果 勉強会の成果 テスト導入のメリット 今後の展望 まとめ Jest & Enzyme とは JestとはFacebookが開発しており、細かい設定なしで簡単にフロントエンドのユニットテストを行うこと
Jestを使ってみてのハマりどころメモ - console.lealog();
JestいいですよねJest。 あれこれプラグインとかライブラリとか入れなくてもだいたいのことができて。 さて、この1ヶ月くらいひたすらJestでテストを書き続けて、ハマったとこをメモ。 逆に言えば、ここに書いてないことでは一切困ってなくて、Jest最高って感じ。 Karmaみたいなブラウザでテストする機能さえつけばもう一生ついていきます感すらある。 before / afterでもasync Docsにそれらしいコードはないけどできる。 beforeAll(done => { // some async tasks done(); }); beforeEach(async () => { await asyncTask(); }); afterEach(async done => { await asyncTask(); asyncTask2(done); }); afterAll(()
TypeScriptでJestを使うときの設定（ts-jest, @types/jestなど） - dackdive's blog
メモ。 TypeScript を使ったプロジェクトに Jest を導入する時に必要なパッケージや設定、とくに ts-jest と @types/jest が必ず必要なのかどうかがよくわかってなかったので調べた。 先にまとめ TypeScript -> JavaScript のコンパイルを TypeScript 自身でやるか Babel に任せるかで必要な設定が異なる。 （Babel 7 から TypeScript がサポートされた） @types/jest は（テストファイルも型チェックするなら）両方で必要 TypeScript のコンパイルに Babel を使う場合、@preset/typescript と babel-jest をインストールしておけば ts-jest は不要 TypeScript のコンパイルに TypeScript を使う場合、 ts-jest が必要。jest.c
An Overview of JavaScript Testing in 2020
(Updated on: 21.11.2021) This guide is intended to catch you up with the most important reasoning, terms, tools, and approaches to JavaScript testing for the year 2022. It combines information from the best articles recently released (they are referenced at the bottom) and adds from my own experience. It’s a little long but whoever reads and understands this guide, can safely assume they know the
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - skovhus/jest-codemods: Codemods for migrating to Jest https://github.com/facebook/jest 👾
solving the jest.mock()+esmodules hoisting problem