並び順

ブックマーク数

期間指定

  • から
  • まで

1 - 40 件 / 40件

新着順 人気順

Vitestの検索結果1 - 40 件 / 40件

タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。

Vitestに関するエントリは40件あります。 テストtestjavascript などが関連タグです。 人気エントリには 『あたらしいテストフレームワークVitestをReactで試してみた | DevelopersIO』などがあります。
  • あたらしいテストフレームワークVitestをReactで試してみた | DevelopersIO

    単純なテストですがそれでも各項目で想像以上に速度の差があることがわかりました。 開発環境 MacBook Pro (13-inch, M1, 2020) macOS Monterey node v16.13.1 vite v2.7.2 vitest v0.1.20 jest 27.4.7 ts-jest 27.1.3 happy-dom 2.27.0 さいごに まだ開発中ながら一度この速度感に慣れてしまうとJestには戻れなくなってしまいそうです。。Jest互換の記載で書きすすめることができ、移行も容易そうなので正式リリース後にはテストフレームワークとして有力な選択肢となりそうです。Vitest今後の開発が楽しみですね。

      あたらしいテストフレームワークVitestをReactで試してみた | DevelopersIO
    • Vite+Vitest+Ladleで快適フロントエンド開発 | 株式会社ヌーラボ(Nulab inc.)

      SPAにするとNext.jsの嬉しさが半減しますが、/pages/以下のディレクトリ構造がそのままエンドポイントのパスに対応する、ディレクトリベースのルーティングをとても気に入っていたので、ほぼルーティングだけのためにNext.jsを使い続けていました。 今年(2023年)の春頃、高機能なNext.jsをルーティングのためだけに使いつづけるのはやはり違う気がする、と調べていて「ViteとReact Routerを使えば簡単にディレクトリベースのルーティングできるよ」という記事を見つけたのが、実はViteを知った最初でした。流行に鈍感…これが老化か…。 Simplifying Routing in React with Vite and File-based Routing Viteにはimport.meta.glob()という機能があり、トランスパイル時にディレクトリ以下のファイルを列挙し

        Vite+Vitest+Ladleで快適フロントエンド開発 | 株式会社ヌーラボ(Nulab inc.)
      • Vitestを使った型テストの始め方

        WeJS @ 42nd https://wajs.connpass.com/event/293440/

          Vitestを使った型テストの始め方
        • Vitest

          Vite PoweredReuse Vite's config and plugins - consistent across your app and tests. But it's not required to use Vitest!

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

            こんにちは。ナレッジワークの torii です。 7 月にフロントエンドエンジニアとして入社してもうすぐ半年、そろそろ技術記事の一つも書きたいなと思っていたところに、ちょうどいいネタを見つけたので投稿してみます! Jest から Vitest に移行してみた 早速やったことですが、フロントエンドのテストフレームワークを Jest から Vitest に移行しました。理由としては、Jest が CJS を前提として動作しており、ESM 前提のモジュールを動かすのに一手間も二手間もかかるからです。 ナレッジワークのフロントエンドは Next.js を採用しており、テストフレームワークには Next.js と相性の良い Jest を採用していました。関数単位のテストや UI コンポーネントのテストを書く分には問題なかったのですが、それより上層(ページなど)になるとたちまち ESM 互換性の問題を

              フロントエンドのテスト基盤を Jest から Vitest に移行した話
            • Vitestでドキュメンテーションテストする

              ドキュメンテーションテストをご存知でしょうか。 ドキュメンテーションテストとは、ドキュメントに記載されたコードを実行し、その結果が期待通りであるかを検証するテストのことです。 これにより、ドキュメントの内容が常に最新の状態であることを保証することができます。 Rustでは公式がrustdocというツールを提供しており、これを使うことでドキュメンテーションテストを行うことができます。 この記事では、TypeScript/JavaScriptでドキュメンテーションテストを行うVitest向けのプラグインを紹介します。 vite-plugin-doctest vite-plugin-doctestは、Vitestのエコシステムを利用してドキュメンテーションテストを行うためのプラグインです。 Vitestとは おそらく、この記事を読んでいる方はほとんど知っていると思いますが、VitestとはVit

                Vitestでドキュメンテーションテストする
              • Vite は使ってないけど Jest を Vitest に移行する

                上記以外で特筆すべき点として、他の開発者(≒チームメンバー)にとっては、変更の影響をほとんど受けずに、ノーコストで上記恩恵を受けられる点があります。 これは Vitest の Jest に対する高い互換性のおかげでテストコードの書き方に大きな変更がなかったことと、テスト実行コマンドを npm-scripts によって隠蔽していたことによるもので、移行したことに気づきさえしない可能性もあります。 Vite を使ってないのに Vitest 使ってええんか? 今回 Jest から Vitest への移行を行ったプロジェクトは、開発サーバーやプロダクションビルドには Webpack を使用しており、Vite は一切使用していませんでした。 そういったプロジェクトにおいても、Vite をベースとしたテストフレームワークである Vitest は使用して良いものでしょうか? これについては Vitest

                  Vite は使ってないけど Jest を Vitest に移行する
                • Vitest公式のVSCodeプラグインがリリースされました | DevelopersIO

                  はじめに こんにちは、CX事業本部MAD事業部の森茂です。 2022年4月24日にVitest公式のVSCodeプラグインがアナウンスされました。 Vitestはあたらしいテストフレームワークとして昨年末に公開されました。年初に紹介記事を書いたときにはまだv0.2系でしたが、あっという間にv0.9.4まで開発が進み(2022年4月24日現在)正式版のリリースまであと少しというところまで来ています。勝手な予想ですが、5月にはリリースされそうなVite v3とあわせてのリリースとかありそうでしょうか??? プラグイン自体は2022年3月末にリリースされていたようですが、作者の@zxch3n氏がVitestチームへ参画し公式のVSCodeプラグインとしてアナウンスされたようです。 動作環境 プラグインを利用するには下記環境が必要となります。またプラグイン自体はまだプレビュー版となっているようです

                    Vitest公式のVSCodeプラグインがリリースされました | DevelopersIO
                  • Vitest はどれくらい早いのか ~ Jest と比較 ~

                    Vitest は Vite ベースのテスティングフレームワークです。 Vue/Vite チームの antfu 氏と、Vite チームの patak 氏が中心となって作っています。 発表されてからしばらく早期アクセスのためリポジトリ等が非公開でしたが、昨日公開されたので触ってみました。 (現在、鋭意開発中のため、まだプロダクション環境では使わないよう注意書きがあります)

                      Vitest はどれくらい早いのか ~ Jest と比較 ~
                    • はんずおんVitest

                      Next.jsとKtorとLaravelの周辺知識について書きます。最近は「負債になりにくい設計」「どうすればアプリケーションの品質を高められるか?」「どうすればアプリケーションを安定かつ安全かつ効率的に動かせるのか?」に関心があります。 アイコン▶︎Twitter@amon_mikio。

                        はんずおんVitest
                      • Testing Types | Vitest

                        Vitest allows you to write tests for your types, using expectTypeOf or assertType syntaxes. By default all tests inside *.test-d.ts files are considered type tests, but you can change it with typecheck.include config option. Under the hood Vitest calls tsc or vue-tsc, depending on your config, and parses results. Vitest will also print out type errors in your source code, if it finds any. You can

                          Testing Types | Vitest
                        • ViteとVitestで開発のリズムを上げる - エムスリーテックブログ

                          【Unit4 ブログリレー 1日目】 Viteは"ヴィート"と読みます♫ もう覚えましたね♫*1 こんにちは、エムスリーエンジニアリンググループの山田(@Satoki_1226)です。 本日より、Unit4でもブログリレーを行うこととなりました。Unit4は医療系ポータルサイト m3.com の開発・運営を担当するチームです。Unit4エンジニアがリレー形式でテックブログを執筆し、どんなメンバーがいるのか・どのような開発をしているのかなど、ご紹介できればと思います。 トップバッターである私からは、m3ラウンジというサービスのVite移行時に得られた知見をもとに、 Vite/Vitestへの移行によって感じた「速さ」 移行時の手順とポイント をお伝えできればと思います。Viteが気になっている方や、Vite移行の進め方に困っている方にとって少しでも参考になれば幸いです。なお掲載しているサンプ

                            ViteとVitestで開発のリズムを上げる - エムスリーテックブログ
                          • (小ネタ) Vitest でパフォーマンス劣化を検知する - hacomono TECH BLOG

                            どうもみゅーとんです. 最近パフォーマンス周りで問題をおこしかけてしまったので, パフォーマンスの劣化を抑制する方法を調べてみました. 概要 3 行でまとめ public repository であれば, CodSpeed を無料で利用できる main ブランチでのパフォーマンスを計測しておき, Pull Request で劣化したら警告してくれる CodSpeed から, 内部処理を詳細に追うことができる 前提知識 vitest でパフォーマンステストを行う構成ができていることが条件になります. 導入方法についてはこの記事を確認してください. techblog.hacomono.jp CodSpeed とは docs.codspeed.io なんて読むんでしょうか・・?私はコードスピードと呼んでいますが, コッドスピードのほうが正しそう・・? GitHub Actions で実行した P

                              (小ネタ) Vitest でパフォーマンス劣化を検知する - hacomono TECH BLOG
                            • JestとVitestのisolateについて

                              現状 Vitest が Jest など他のテスティングフレームワークに比べて遅くなる場合があることがわかっています。 (確実に遅くなるとはいえない。が、私自身もテストの速度が遅くなったことを経験しています。) また Vitest を実行する場合、--single-threadオプションをつけると速くなるということもわかっています。 (0.29.0以前は --no-threads) 公式 Docs にも最大3倍速くなることが記載されています。 WARNING This option is different from Jest's --runInBand. Vitest uses workers not only for running tests in parallel, but also to provide isolation. By disabling this option, yo

                                JestとVitestのisolateについて
                              • Nuxt 3 × Vitest でユニットテストのエラーを全て解消するための調査レポート - ANDPAD Tech Blog

                                Nuxt 3 × Vitest で既存のユニットテストを全て通すための調査レポート こんにちは、ANDPADでフロントエンドエンジニアをしている小泉(@ykoizumi0903)です。 昨年末に Nuxt 3 が正式リリースされて以降、アップデートに向けた移行作業を粛々と進めています! 今回はその中でも、ユニットテストを Nuxt 3 に対応させる際に苦労したポイントや対処法についてご紹介したいと思います。 私達のチームでは昨年秋以降、コンポーネントユニットテストの拡充に力を入れてきていて、その一環として元々 Jest から Vitest にテストツールを移行していました。 しかし、Nuxt 3 への移行作業を行ったことで、これらのテストのうちの約半分が失敗するようになりました。 この記事では、このテストのエラーをどのように解消したかの流れをまとめて説明したいと思います。 (Nuxt 2

                                  Nuxt 3 × Vitest でユニットテストのエラーを全て解消するための調査レポート - ANDPAD Tech Blog
                                • 2023-10-03のJS: Node v20.8.0、Vitest v1.0.0-beta.0、instant.dev(Rails-inspired ORM/Migrations)

                                  JSer.info #663 - Node.js 20.8.0がリリースされました。 Node v20.8.0 (Current) | Node.js streamに関するフラグをビットマップで管理することでメモリ消費量とパフォーマンスが改善されています。 stream: use bitmap in readable state by benjamingr · Pull Request #49745 · nodejs/node vmにimportModuleDynamicallyオプションを追加、主にJestなどで起きていたvmのメモリリークの問題を修正なども含まれています。 Node.jsのアップデートが起因でJestのメモリリークが起きる問題としては、次のIssueがあります。 こちらのIssueは、Node.js 20.8.0ではまだ修正されていません。 [Bug]: Memory

                                    2023-10-03のJS: Node v20.8.0、Vitest v1.0.0-beta.0、instant.dev(Rails-inspired ORM/Migrations)
                                  • Vitest(jsdom)でStorybookのStory全部テストする大作戦

                                    この記事は 株式会社ゆめみの23卒 Advent Calendar 2023 7日目の記事です。 今北産業 ファイル component.test.tsx を置くと、Storybook test runnerのように全部のStoryのスモークテストとインタラクションテストがVitestとjsdomでできるよ! ヘッドレスブラウザを使わずにテストできるので、CIやGit hookなど実行時間を少なくしたいシチュエーションで使えるよ! でもブラウザで実行していないから複雑なインタラクションテストやアクセシビリティテストなど、一部のテストが不安定になるかもね! 考えて使い分けよう Storybook をテストとして動かす Storybookでは、Storyファイルのplay 関数内にユーザのインタラクション(振る舞い)やアサーション(期待する結果)を記述することで、インタラクションテストを行うこ

                                      Vitest(jsdom)でStorybookのStory全部テストする大作戦
                                    • GitHub - vitest-dev/vitest: Next generation testing framework powered by Vite.

                                      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

                                        GitHub - vitest-dev/vitest: Next generation testing framework powered by Vite.
                                      • Viteベースの高速テスティングフレームワークVitestを使ってみる | 豆蔵デベロッパーサイト

                                        現在JavaScriptのスタンダードなテスティングフレームワークと言えば、Jestかと思います。 Jestはそれ単体でテストランナー、マッチャーからモックまでテストに関する一通りの機能を網羅する万能なフレームワークです。 とはいえ、プロダクトがある程度の規模になってくるとテスト実行時間に不満を持っている方もいるかもしれません。 今回はJestに代わる新しいテスティングフレームワークのVitestを試してみたいと思います。 VitestはWebpackに代わる高速ビルドツールのViteを基盤としています[1]。 Viteのパイプラインとして実行されますので、テストも高速になるはずです。 Vitestの公式サイトでも、Blazing Fast Unit Test Frameworkと宣伝してるところからも期待できそうです。 また、API自体もJestと互換性を保つように設計されていますので、

                                        • 2024-03-19のJS: Storybook 8、Nuxt 3.11、Cloudflare Workers + Vitest

                                          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がデフォルトとなるように変

                                            2024-03-19のJS: Storybook 8、Nuxt 3.11、Cloudflare Workers + Vitest
                                          • GitHub - ssssota/doc-vitest: Documentation tests with 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

                                              GitHub - ssssota/doc-vitest: Documentation tests with Vitest
                                            • 2023-12-08のJS: Redux 5.0.0、Vitest 1.0.0、Astro 4.0

                                              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

                                                2023-12-08のJS: Redux 5.0.0、Vitest 1.0.0、Astro 4.0
                                              • Vue CLI で作成した Vuetify アプリを Vite / Vitest に移行する - Qiita

                                                Vuetify 2 と @vue/composition-api を使用した TODO アプリを題材に Vue CLI から Vite / Vitest への移行を試して、とりあえず動くようになったので手順と設定を共有したいと思います。 ビルド速度やサイズの変化についてはこの記事の後ろにまとめてあります。 使用したコードは次のリポジトリにあります。 なお、この記事に記載している情報は 2022 年 1 月 30 日時点のものです。 記事の内容はあくまで一例であり、手順や設定が正しいものであるという保証はありませんのでご注意ください。 移行を試した背景 2022 年 1 月 18 日に Vue CLI がメンテナンスモードに入ったことが宣言されました。 1 Vue CLI 自体は引き続き利用可能で v5 安定版リリースに向けて作業が続けられています。 2 とはいえ今後の主流は Vite にな

                                                  Vue CLI で作成した Vuetify アプリを Vite / Vitest に移行する - Qiita
                                                • Vue, Vitest, Testing Library, MSWを使ってテスト駆動開発するチュートリアル - Qiita

                                                  Vue, Vitest, Testing Library, MSWを使ってテスト駆動開発するチュートリアルテストVue.jsテスト駆動開発TestingLibraryVitest 今回は以下のライブラリを中心にVueにおけるテスト駆動開発(TDD)の進め方を説明します。 Vue3 Vitest Testing Library Mock Service Worker Options APIで書きますが、テストコードはComposition APIでも動くので、 Composition APIの実装に多少慣れてる人はぜひとも挑戦してください。 今回の記事の中で作ったコードは以下のリポジトリに収めました。 テスト駆動開発(TDD)ってなに? TDDとはTest Driven Development(テスト駆動開発)の略であり、その文字通り、 テストを先に書いてその後にそのテストを満たすコードを書

                                                    Vue, Vitest, Testing Library, MSWを使ってテスト駆動開発するチュートリアル - Qiita
                                                  • Viteを利用したテストツールVitestの利用を始める - Qiita

                                                    はじめに Viteのバージョン4.0の公開をアナウンスするブログでVitestについて言及されていました。 Vitest adoption is exploding, it will soon represent half of Vite's npm downloads. Nx is also investing in the ecosystem, and officially supports Vite. Vitestの採用は爆発的に増えており、まもなくViteのnpmダウンロードの半分を占めるようになるでしょう。Nxもエコシステムに投資しており、Viteを公式にサポートしています。(DeepLによる翻訳) これまではJavaScript、TypeScriptにおけるテストツールとしてはJestという成熟したツールがあるので、Vitestを利用するのは趣味だったり少し先の未来だろうと考え

                                                      Viteを利用したテストツールVitestの利用を始める - Qiita
                                                    • Vitest の Browser Mode (experimental) でファイル読み込みのテストを書く - ジンジャー研究室

                                                      趣味でブラウザ上に画像や音声を読み込んで作業する React アプリを作っているのだが、 Vitest + Testing Library でテストをしようと思ったらファイル読み込み部分でつまづいた。Node.js 上でブラウザ環境をシミュレートしている部分がそのままでは上手く動かないので、 polyfill を入れたり沢山モックを差し込んだりするとなんとか動く。が、色々弄りすぎて本当にテスト出来ているのか怪しいし、やはりリアルなデータでテストしたい。 で、リアルなブラウザ環境でテスト出来ないかなと調べていたところ、2つの候補が挙がった。 Browser Mode | Guide | Vitest Experimental: components | Playwright 両方とも experimental 。前者は Vitest をそのままブラウザ上で実行するというもので、後者は Pla

                                                        Vitest の Browser Mode (experimental) でファイル読み込みのテストを書く - ジンジャー研究室
                                                      • テストフレームワークをJestからVitest に移管した手順と得た知見 - Qiita

                                                        はじめに 以前こちらの記事で書いた github actions のパイプラインの高速化の検討について、高速テストフレームワークとして期待されている Vitest についても検証したと述べたのですが、 今回はその Vitest に関する移行検証記事です。 github actions の job を高速にするために取った対策 ※上の記事では vitest の方が遅かった記載をしていますが、今回テストを再実行してみたところ vitest の方が速度が速かったため、裏で何かしら別のプロセスが動いていたかもしれないです。 Vitest とは vitest.dev Vite 環境のために開発された高速テストフレームワーク Jest と互換性がある まだメジャーバージョンではない(記事執筆時v0.22.1) 結論 Vitest への移行結果 Jest に比べて Vitest の方が 10%少しテスト

                                                          テストフレームワークをJestからVitest に移管した手順と得た知見 - Qiita
                                                        • Vitest

                                                          In-Source Testing ​Vitest also provides a way to run tests within your source code along side the implementation, similar to Rust's module tests. This makes the tests share the same closure as the implementations and able to test against private states without exporting. Meanwhile, it also brings a closer feedback loop for development. Setup ​To get started, put a if (import.meta.vitest) block at

                                                            Vitest
                                                          • Vite + Vitest の環境を設定してみた | DevelopersIO

                                                            はじめに こんにちは。アノテーションの及川です。 業務の中で、Vite + Vitest のコードを確認する機会があり、その構成や使い方を学ぶためハンズオン形式で実施したことを整理しました。 Vite Vite の詳細はこちらからご参照ください。 概要 Vite(フランス語で「速い」を意味する)は、高速な開発サーバーとビルドツールを提供します。 Vite は従来のモジュールバンドラーとは異なり、開発時にはネイティブESモジュールを利用してブラウザで直接モジュールをインポートします。これにより、開発時の起動が非常に高速になります。 特徴 高速なコールドスタート Vite は開発環境でのページリロードを必要とせず、依存関係のプリバンドリングによってプロジェクトの起動を高速化します。 ホットモジュールリプレースメント (HMR) ファイルが変更されたときに、その変更を即座にブラウザに反映させるこ

                                                              Vite + Vitest の環境を設定してみた | DevelopersIO
                                                            • Release v0.29.0 · vitest-dev/vitest

                                                              This release makes some significant changes to how tests are running. If you were using --no-threads before, you might consider enabling --single-thread instead (because your tests are now running in child_process instead of a worker thread) or try our new performance optimization feature (discussed later). If you were relying on API that was not available inside a worker (like process.chdir(), yo

                                                                Release v0.29.0 · vitest-dev/vitest
                                                              • Lambda(Node.js)で、VitestのIn-Source Testingをする構成 | DevelopersIO

                                                                はじめに Vitestには、In-Source Testingというテスト方法があります。これは実装とテストコードを同一のファイルに記述できます。Rustは言語レベルでこの機能をサポートしていたりします。 見栄えの感じ方は、個人差はありますがテストコードが小規模だとメリットを感じる人がいると思います。また、同一ファイルに書くことで、プライベート関数を公開せずにテストできます。Javaは、パッケージプライベートという可視性があり、似たようなことができます。 そもそもプライベート関数をテストするべきか?という議論がありますが、本記事ではテストする方法があることの紹介にフォーカスします。個々のプロジェクトが抱えている問題の解決策として有用であれば採用してみてください。 前提 前提となる環境は以下です。 TypeScript Lambda Node.jsランタイム(ts-nodeのESM実行対応が

                                                                  Lambda(Node.js)で、VitestのIn-Source Testingをする構成 | DevelopersIO
                                                                • Vitest のモック関数 fn、spyOn、mock の使い分け - Qiita

                                                                  はじめに この記事では、Vitest というテストフレームワークのモックに利用される vi.fn、vi.spyOn、vi.mock の概要とそれらの使い分けをサンプルつきで記載していきます。 fn、spyOn、mock の使い分け モック対象によって使い分けます。 fn:関数 spyOn:オブジェクトのメソッド mock:モジュール全体 fn fn は、関数をモックします。 以下のサンプルでは、getApples というモック関数を作成し、その関数が呼び出されることをテストしています。 test("spy function no arguments and no returns", () => { // Define mock function const getApples = vi.fn(); // call mock function getApples(); // check if

                                                                    Vitest のモック関数 fn、spyOn、mock の使い分け - Qiita
                                                                  • Vitest テストコードを実装ファイルと同一のファイルに記述する

                                                                    #![allow(unused)] fn main() { pub fn add_two(a: i32) -> i32 { internal_adder(a, 2) } fn internal_adder(a: i32, b: i32) -> i32 { a + b } #[cfg(test)] mod tests { use super::*; #[test] fn internal() { assert_eq!(4, internal_adder(2, 2)); } } 実装と同一のファイルにテストコードを記述するメリットとして以下のような点があります。 private にしたい目的で export したくない関数をテストできる 実装とテストの距離が近いのでテストが書きやすい(私はテストコードを書くときだけいつもエディタの画面を分割して表示してます) さっとプロトタイプのコードを書くた

                                                                      Vitest テストコードを実装ファイルと同一のファイルに記述する
                                                                    • Release v0.31.0 · vitest-dev/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

                                                                        Release v0.31.0 · vitest-dev/vitest
                                                                      • TypeScriptとVitestでユニットテストしてみた! | DevelopersIO

                                                                        こんにちは稲葉です。最近ソフトウェアテストの学習をしていた事もあり、ソフトウェア開発において、品質保証とバグの早期発見は非常に重要だと感じました。そのためには、効果的なユニットテストが欠かせません。 なので、今回はTypeScriptとVitestを使用した、ユニットテストの実施方法を解説します。 Vitestとは Viteネイティブの超高速ユニットテストフレームワーク。 参考資料:Vitest公式ドキュメント また、Jest互換でTypeScriptやJSXに対するサポートもあります。 ちなみにVite(ヴィート)は、モダンなWebプロジェクトのために、より速く無駄のない開発体験を提供することを目的としたビルドツールです。 詳細につきましては、公式ドキュメントを参照ください。 Vite公式ドキュメント 実行環境の準備 はじめにTypeScriptとViteをインストールします。 yarn

                                                                          TypeScriptとVitestでユニットテストしてみた! | DevelopersIO
                                                                        • Vite + React + TypeScript に テスト環境 Vitest をステップbyステップで作る

                                                                          Vitestのサイトを見ると、以前はトップページに記載があった 「免責事項:Vitestはまだ開発中であり、安定したものではありません。実運用での使用はお勧めしません。」が消えてました。 過去のキャプチャ。Vitestのバージョンは v0.12.6 「DISCLAIMER・・・」が表示されています。 2022/05/18 現在「DISCLAIMER・・・」が消えてます。 Vitestのバージョンは 上記と同じ v0.12.6 です。 使ってもいいのかな・・・?ということで Vite + React 環境に Vitest を導入してみました。 vitest Vitest は Vite 環境で動作する高速なテストフレームワークです。 Vite で作成したアプリケーションであれば、vite.config.ts で設定を共有でき、環境構築が簡単です。 vitest のインストール まずは vite

                                                                            Vite + React + TypeScript に テスト環境 Vitest をステップbyステップで作る
                                                                          • Improved Cloudflare Workers testing via Vitest and workerd

                                                                            Improved Cloudflare Workers testing via Vitest and workerd03/15/2024 This post is also available in Español. 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 anything related to your Work

                                                                              Improved Cloudflare Workers testing via Vitest and workerd
                                                                            • ESMのmock巻き上げ問題とVitestのvi.hoistedについて

                                                                              はじめに 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を使う場合はほぼ当

                                                                                ESMのmock巻き上げ問題とVitestのvi.hoistedについて
                                                                              • Vue.js + Vitest でテストを実行できる環境を作る

                                                                                はじめに 普段の業務では、主に Vue.js や Rails を書いている @kt15 です。最近、Vitest が爆速らしいという情報を耳にしました。早速試そうとしたのですが、せっかくなら筆者がよく使う Vue.js と組み合わせて使ってみようと思ったので、まずは環境構築からやっていきます。本記事では、Vue.js + Vitest でテストを実行できる環境を作るところまでをゴールとします。 Vitestとは? Vitest は Vite ベースのユニットテストフレームワークです。 特徴はやはり爆速なところでしょうか。速度面についてはこちらの記事で触れられており、 Jest との比較もあって分かりやすかったです。 Given Jest's massive adoption, Vitest provides a compatible API that allows you to use i

                                                                                  Vue.js + Vitest でテストを実行できる環境を作る
                                                                                • Vitest UIを使ってみよう!

                                                                                  export const getLabel = (name: string, age: number) => { return `名前は${name}で年齢は${age}歳です` } import { afterEach, describe, expectTypeOf, assertType, it, vi } from 'vitest' import { getLabel } from "./test" describe(`Testing Types`, () => { afterEach(() => { vi.restoreAllMocks() }) it(`関数であるかどうかと、引数の型を検証する`, () => { //! 関数であるかどうか expectTypeOf(getLabel).toBeFunction() //! 引数の型を検証する expectTypeOf(getLa

                                                                                    Vitest UIを使ってみよう!
                                                                                  1

                                                                                  新着記事