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
Nuxt3 + Vitestでのコンポーネントテスト作成について個人的まとめ - Qiita
Nuxt3 + Vitestでコンポーネントテストを作成した際の自動インポートやモック化などのポイントをまとめておきます。（Vue3共通の内容も含みます） ref, computedオブジェクトをテストファイル側で使用する コンポーネント側で定義したref, computedオブジェクトをテストファイル側で使用するにはdefineExposeで明示的に公開する必要があります。 <script setup lang="ts"> const lastName = ref('') const firstName = ref('') const fullName = computed(() => { return `${lastName.value} ${firstName.value}` }) defineExpose({ lastName, firstName, fullName }) </s
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
Nuxt3 × Vuetify3 × Vitest × Vue Testing Libraryで快適なテスト開発環境を作る
Nuxt: The Intuitive Web Framework Build your next Vue.js application with confidence using Nuxt. An open source framework under MIT li... 今回はタイトルの通り、以下の技術スタックで環境構築していきます。 Nuxt3 Vuetify3 Vitest Vue Testing Library インストール まずは Nuxt3 のインストールから始めます。 npx nuxi init nuxt3-app 続いて、Vuetify3 のインストールを行います。 npm i -D vuetify@next vite-plugin-vuetify sass その他、テストで利用する Vitest や Vue Testing Library 関連もインストールしてしまいま
Nuxt 3 × Vitest × Vue Testing Libraryで単体テストの実行とカバレッジを取得する | N-LAB
Nuxt 3 × Vitest × Vue Testing Libraryで単体テストの実行とカバレッジを取得する 目標Nuxt 3プロジェクトにVitestを利用した単体テスト（ユニットテスト）の実行環境を構築する。Vue Testing Libraryを利用したテストコードを作成して、テストの実行とカバレッジを取得する。 前提ローカルにNuxt3のプロジェクトが作成済みであること。※本手順書ではソースディレクトリを「src」に変更している想定としています。 利用するフレームワーク、ライブラリのバージョンは以下のとおりです。2023年5月11日時点での最新バージョンを利用します。・Nuxt 3.4.3 ・Vitest 0.31.0 ・Vue Testing Library 7.0.0 ・happy-dom 9.10.9 ・unplugin-auto-import 0.15.3 ・vite
Nuxt3とvitestでユニットテスト実行環境を作った備忘録
はじめに Nuxt（Nuxt3）のプロジェクトでvitestを使ったユニットテスト環境を実装したので備忘録として記事にします。ちょっとしたメモになりますが、誰かの参考になればと思います。 使用したライブラリ vitest Viteベースの高速なテストランナー @testing-library/vue Vue.jsアプリケーション向けのシンプルなテストユーティリティを提供し、DOMに対する操作やアサーションを行う。 nuxt-vitest Nuxtでvitestを使用するためのモジュール。 happy-dom 高速な仮想DOM実装で、ブラウザ環境をシミュレートする。 @vitest/coverage-c8 vitestでコードカバレッジを収集するためのプラグイン。 テストの設定 import { defineVitestConfig } from 'nuxt-vitest/config' e
フロントエンドにおける「単体テストの考え方/使い方」
本稿における「単体テスト」とは自動テストにおける単体テストを指します。手動テストのことではないので、ご了承ください。 単体テストの考え方/使い方という本を読みました。筆者自身、「単体テストはプロダクションコードの付属」という意識がどこかにありました。この本を読んで、単体テストについてあまりに何もわかってなかったことに気付かされ、単体テストの設計はプロダクションコードの設計と同じくらい重要という意識に変わりました。何のために単体テストをやるのか、いいテストとは、「単体」とは、など多くの点で学びを得られ、また、多くのプラクティスとアンチパターンを知ることができました。 本稿はこの本を読んで得られた学びを、フロントエンド開発、特にコンポーネント開発に適用することを試みた際のまとめです。より詳細な解説を求む方には本を手に取ってもらう前提で、できるだけポイントを抑えられるようにまとめることを目指しま
あたらしいテストフレームワーク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今後の開発が楽しみですね。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
