Note Storybook Vitest Plugin は 2024 年 10 月 5 日現在実験的な機能として提供されており、API が将来にわたって変更される可能性があります。 Storybook v8.3 より、ストーリーをテストするためのテストランナーとして Vitest を使用できるようになりました。今までも composeStories 関数で作成済みのストーリーを使いまわし、Jest などのテストランナーを用いてたテストを行うことができましたが、複雑なセットアップが必要でした。 また Vitest では ブラウザモード により、ヘッドレスブラウザ上で Storybook のテストを高速に実行できる点が特徴です。ヘッドレスブラウザ上でテストを実行することにより、例えば jsdom や happy-dom などのシミュレーションを使用する方法と比べて、実際のブラウザでの挙動をよ
Vitest Browser Modeがアツい
Background これまでVitestでコンポーネントのテストを行う時は、jsdom や happy-dom を使ってブラウザ環境を偽装していました。しかし、偽のブラウザ環境を使うことは多くの問題があり、また開発者はテスト以外でどこにも存在しない環境を作り上げるという不毛な作業が必要でした。 この問題を解決するために、Playwright や Cypress などのテストフレームワークは Component Test をサポートしています。しかし、UnitテストでPlaywrightやCypressを使うのは少々Fatであり、Reactのhooksなどのテストをすることができません。 Vitest Browser Modeを使用することで、Vitest上でComponent Testが可能となり、これらの問題を解決できます。 Installation Browser ModeのSetu
Storybook 8.3 のリリーつについて 先日 Storybook 8.3 がリリースされました。 このリリースでの目玉機能は、なんといっても、待望の Vitest 対応ではないでしょうか。 以下は、7月末に一部公開されていたスクリーンキャスト。 とはいえ、何故か大々的に告知されていなかったり、Changelog には以下のようにあるのですが ⚡️ First-class Vitest integration to run stories as component tests 🔼 Next.js-Vite framework for Vitest compatibility and better DX 🗜️ Further reduced bundle size for a smaller install footprint 🌐 Experimental Story globa
こんにちは。ナレッジワークの torii です。 7 月にフロントエンドエンジニアとして入社してもうすぐ半年、そろそろ技術記事の一つも書きたいなと思っていたところに、ちょうどいいネタを見つけたので投稿してみます！ Jest から Vitest に移行してみた 早速やったことですが、フロントエンドのテストフレームワークを Jest から Vitest に移行しました。理由としては、Jest が CJS を前提として動作しており、ESM 前提のモジュールを動かすのに一手間も二手間もかかるからです。 ナレッジワークのフロントエンドは Next.js を採用しており、テストフレームワークには Next.js と相性の良い Jest を採用していました。関数単位のテストや UI コンポーネントのテストを書く分には問題なかったのですが、それより上層（ページなど）になるとたちまち ESM 互換性の問題を
Vitest公式になったeslint-plugin-vitestを導入して、適切なVitestのお作法を学んでみる
import vitest from "@vitest/eslint-plugin"; export default [ { files: ["tests/**"], // or any other pattern plugins: { vitest }, rules: { ...vitest.configs.recommended.rules, // you can also use vitest.configs.all.rules to enable all rules + // e.g. 'vitest/no-test-return-statement': 'error', + "vitest/max-nested-describe": ["error", { "max": 1 }] // you can also modify rules' behavior using optio
上記以外で特筆すべき点として、他の開発者(≒チームメンバー)にとっては、変更の影響をほとんど受けずに、ノーコストで上記恩恵を受けられる点があります。 これは Vitest の Jest に対する高い互換性のおかげでテストコードの書き方に大きな変更がなかったことと、テスト実行コマンドを npm-scripts によって隠蔽していたことによるもので、移行したことに気づきさえしない可能性もあります。 Vite を使ってないのに Vitest 使ってええんか？ 今回 Jest から Vitest への移行を行ったプロジェクトは、開発サーバーやプロダクションビルドには Webpack を使用しており、Vite は一切使用していませんでした。 そういったプロジェクトにおいても、Vite をベースとしたテストフレームワークである Vitest は使用して良いものでしょうか？ これについては Vitest
どうもみゅーとんです. 最近パフォーマンス周りで問題をおこしかけてしまったので, パフォーマンスの劣化を抑制する方法を調べてみました. 概要 3 行でまとめ public repository であれば, CodSpeed を無料で利用できる main ブランチでのパフォーマンスを計測しておき, Pull Request で劣化したら警告してくれる CodSpeed から, 内部処理を詳細に追うことができる 前提知識 vitest でパフォーマンステストを行う構成ができていることが条件になります. 導入方法についてはこの記事を確認してください. techblog.hacomono.jp CodSpeed とは docs.codspeed.io なんて読むんでしょうか・・？私はコードスピードと呼んでいますが, コッドスピードのほうが正しそう・・？ GitHub Actions で実行した P
この記事は 株式会社ゆめみの23卒 Advent Calendar 2023 7日目の記事です。 今北産業 ファイル component.test.tsx を置くと、Storybook test runnerのように全部のStoryのスモークテストとインタラクションテストがVitestとjsdomでできるよ！ ヘッドレスブラウザを使わずにテストできるので、CIやGit hookなど実行時間を少なくしたいシチュエーションで使えるよ！ でもブラウザで実行していないから複雑なインタラクションテストやアクセシビリティテストなど、一部のテストが不安定になるかもね！ 考えて使い分けよう Storybook をテストとして動かす Storybookでは、Storyファイルのplay 関数内にユーザのインタラクション（振る舞い）やアサーション（期待する結果）を記述することで、インタラクションテストを行うこ
JSer.info #685 - Storybook 8.0がリリースされました。 Storybook 8 Storybook: UI component explorer for frontend developers 破壊的な変更として、storiesOf APIの削除、*.stories.mdxの削除、StoryShots addonの削除、Yarn v1のサポート終了などが行われています。 詳細はマイグレーションガイドを参照してください。 Migration guide for Storybook 8.0 • Storybook docs 機能追加として、Chromaticとの連携機能の実装、MSWを使ったReact Server Component(RSC)のサポート。 そのほかには、SWCを使うことでビルドパフォーマンスの改善、react-docgenがデフォルトとなるように変
JSer.info #672 - Redux Toolkit v2.0.0に関連してRedux 5.0.0がリリースされました。 Release v5.0.0 · reduxjs/redux Redux 5.0.0では、TypeScriptへの書き換え、CJS/ESMのdual packageに変更、ES2020形式で出力するように変更。 また、createStoreを非推奨として、Redux Toolkitへの移行を推奨しています。 Release v2.0.0 · reduxjs/redux-toolkit 同時にリリースされたRedux Toolkit v2.0.0では、Redux v5/Reselect 5.0へのアップデート、createReducer/createSliceのextraReducersにおけるオブジェクト構文のサポートの削除などが行わています。 その他にも、mi
Vitest Browser Mode · vitest-dev/vitest · Discussion #5828
It's been some time since we gave any update on the Browser Mode, and Vitest 2.0 seems like a good time to explain how we feel about it. And we have a lot of plans! The initial purpose of Vitest was to allow running tests without a complex Jest setup but with the battle-tested Jest API everyone is already familiar with. This also meant faking the browser environment (with jsdom or happy-dom). With
JSer.info #695 - Vitest v2.0.0-beta.5がリリースされました。 Release v2.0.0-beta.5 · vitest-dev/vitest --merge-reportsがカバレッジをサポート、Promiseベースのmockに対するAssertionの追加、ブラウザモードの改善などが含まれています。 VitestのBrowser Modeは、jsdomやhappy-domを置き換える形で、コンポーネントテストのための仕組みとして作られています。 開発中のVitest 2.0ではCommands APIとmodule mockingが追加されています。 次のIssueに、VitestのBrowser Modeの目的や方向性についての解説が書かれています。 Vitest Browser Mode · vitest-dev/vitest · Discus
GitHub - vitest-dev/eslint-plugin-vitest: eslint plugin for vitest
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
JSer.info #700 - Vitest 2.0.0がリリースされました。 Release v2.0.0 · vitest-dev/vitest 非推奨のオプションを削除、一部オプションのデフォルト値の変更などの破壊的な変更が含まれています。 マイグレーションガイドも合わせて公開されています。 Migration Guide | Guide | Vitest Browser Mode改善、expect.pollの追加、test.forの追加などが行われています。 Browser Modeについては、次のページに詳しい説明が公開されています。 Vitest Browser Mode · vitest-dev/vitest · Discussion #5828 Node.js v22.5.0がリリースされました Node.js — Node v22.5.0 (Current) コアモジュ
はじめに こんにちは。アノテーションの及川です。 業務の中で、Vite + Vitest のコードを確認する機会があり、その構成や使い方を学ぶためハンズオン形式で実施したことを整理しました。 Vite Vite の詳細はこちらからご参照ください。 概要 Vite（フランス語で「速い」を意味する）は、高速な開発サーバーとビルドツールを提供します。 Vite は従来のモジュールバンドラーとは異なり、開発時にはネイティブESモジュールを利用してブラウザで直接モジュールをインポートします。これにより、開発時の起動が非常に高速になります。 特徴 高速なコールドスタート Vite は開発環境でのページリロードを必要とせず、依存関係のプリバンドリングによってプロジェクトの起動を高速化します。 ホットモジュールリプレースメント (HMR) ファイルが変更されたときに、その変更を即座にブラウザに反映させるこ
Lambda(Node.js)で、VitestのIn-Source Testingをする構成 | DevelopersIO
はじめに Vitestには、In-Source Testingというテスト方法があります。これは実装とテストコードを同一のファイルに記述できます。Rustは言語レベルでこの機能をサポートしていたりします。 見栄えの感じ方は、個人差はありますがテストコードが小規模だとメリットを感じる人がいると思います。また、同一ファイルに書くことで、プライベート関数を公開せずにテストできます。Javaは、パッケージプライベートという可視性があり、似たようなことができます。 そもそもプライベート関数をテストするべきか？という議論がありますが、本記事ではテストする方法があることの紹介にフォーカスします。個々のプロジェクトが抱えている問題の解決策として有用であれば採用してみてください。 前提 前提となる環境は以下です。 TypeScript Lambda Node.jsランタイム(ts-nodeのESM実行対応が
Improved Cloudflare Workers testing via Vitest and workerd
Improved Cloudflare Workers testing via Vitest and workerd2024-03-15 This post is also available in Español, Deutsch and Français. Today, we’re excited to announce a new Workers Vitest integration - allowing you to write unit and integration tests via the popular testing framework, Vitest, that execute directly in our runtime, workerd! This integration provides you with the ability to test anythin
はじめに Vitestにはvi.hoistedというメソッドが用意されています。追加は2023年5月のv.0.31.0で、まだ日の浅いメソッドです。 リリースノート このメソッドの意義を理解するために、ESM（ECMAScript モジュール）でのmockのhoist（巻き上げ）、VitestのESM対応、vi.hoistedの挙動について調べてみました。 環境 pnpm: 8.10.0 Vitest:0.34.6 MacBook Air (2020, M1） 想定読者 ESM（ECMAScript モジュール）、CommonJSの基本知識がある 下記の記事など参考になる記事がたくさんありますのでご覧ください。 Jest, Vitestの基本知識がある インストール、mockの扱いなどについては記述を割きません。 ESMでテストを書いている／書こうとしている Vitestを使う場合はほぼ当
Vitest 2.0 is here! This release page lists all changes made to the project during the beta. For the migration guide, please refer to the documentation. 🚨 Breaking Changes Simplify mock function generic types and align with jest - by @hi-ogawa in #4784 (a0c1d37) Remove --segfault-retry - by @sheremet-va in #5514 (ed60e) This flag was introduced to combat threads segfaults. Our current recommendat
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Storybook と Vitest の統合したコンポーネントテスト
Storybook 8.3 で導入された Vitest 対応を React と Next.js で試す
フロントエンドのテスト基盤を Jest から Vitest に移行した話
Vite は使ってないけど Jest を Vitest に移行する
(小ネタ) Vitest でパフォーマンス劣化を検知する - hacomono TECH BLOG
Vitest(jsdom)でStorybookのStory全部テストする大作戦
2024-03-19のJS: Storybook 8、Nuxt 3.11、Cloudflare Workers + Vitest
2023-12-08のJS: Redux 5.0.0、Vitest 1.0.0、Astro 4.0
2024-06-03のJS: vitest v2.0.0-beta.5(browser mode)、Rspack v0.7、ESLint Migrator
2024-07-18のJS: #700 - Vitest 2.0.0、Node.js 22.5.0(sqlite)、Private Browsing Mode
Vite + Vitest の環境を設定してみた | DevelopersIO
ESMのmock巻き上げ問題とVitestのvi.hoistedについて
Release v2.0.0 · vitest-dev/vitest