あたらしいテストフレームワーク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今後の開発が楽しみですね。
Testing | Next.js
Examples Next.js with Cypress Next.js with Playwright Next.js with Jest and React Testing Library Next.js with Vitest Learn how to set up Next.js with commonly used testing tools: Cypress, Playwright, and Jest with React Testing Library. Cypress Cypress is a test runner used for End-to-End (E2E) and Integration Testing. Quickstart You can use create-next-app with the with-cypress example to quickl
CompositionAPIを使ってcomposition functionを分離した状態でテストする - Qiita
10/27 Vue-next版をこちらに書きました！この記事はVue 2.0用の記事です。 最初に ついにComposition APIがrfc上でmergeされました rfc上でmergeされたこともあって、本格的に触っていく人も増えていくのではないか、と思います。 Composition APIを使うことで型推論がよくなる、IDEの恩恵を受けやすいだけでなく、 少し工夫するだけでなんちゃってSingle Store patternなどができたりします。 しかしながら、Composition API自体が新しい、ということもあってテストに関する情報がほとんどありません。 そこで、今回はComposition Functionを分離した状態でのテストの書き方について説明します。 Composition Functionを分離するって? 公式DocumentだとLogic reuse cod
非同期動作のテスト | Vue Test Utils
You’re browsing the documentation for Vue Test Utils for Vue v2.x and earlier. To read docs for Vue Test Utils for Vue 3, click here. # 非同期動作のテスト テストをシンプルにするために、 vue-test-utils は DOM の更新を同期的に適用します。しかし、コールバックや Promise のようなコンポーネントの非同期動作をテストする場合、いくつかのテクニックを知っておく必要があります。 よくある非同期動作の 1 つとして API 呼び出しと Vuex の action があります。以下の例は API 呼び出しをするメソッドをテストする方法を示しています。この例は HTTP のライブラリである axios をモックしてテストを実行するために Jes
読みやすさを重視した Jest の書き方 - おいちゃんと呼ばれています
この記事は STORES.jp Advent Calendar 2019 - Adventar の 8日目の記事。 先日（11/26）STORES.jp 社内で Jest の勉強会を開催したので、そのときに話した内容を書く。 なお、私たち STORES.jp のフロントエンドチームが Jest Vue Test Utils Vue.js を採用しているので、それらを用いたテストコードを掲載しているが、大半の内容は上記以外のスタックを用いたテストにも当てはまるものだと思う。 アジェンダ なぜ読みやすさを重視するのか？ 読みやすくするためのヒント 書きやすくするためのヒント おまけ なぜ読みやすさを重視するのか？ さて、今回は「読みやすさ」を重視した Jest の書き方をお伝えする。なぜ「読みやすさ」を重視するのか、その背景について説明する。 よいテストとは？ まずはじめに、よいテストとは何か
Storybookの旨味をしゃぶり尽くす
株式会社FOLIOのメンバーによるアドベントカレンダーです！ FOLIO Advent Calendar 2017: https://qiita.com/advent-calendar/2017/folio-sec… Storybookを取り入れたワークフローで開発を行ったところ、Storybookは単なるスタイルガイドツールではなく、ビジュアル実装のためのインフラであることを実感しました。 三度どころじゃなくおいしいなと感じているので、導入がまだならシュッと導入してしゃぶりつくして欲しいなと思いました。開発がある程度進んでからでも小さく導入できるので、予め考えておく必要のあることはあまり無いと思います。三度おいしいスライドと内容が被っていますが、おいしいものはおいしいので何度でもおいしいことを主張していきたいという思いです。 ストーリーを追加してビジュアルを実装するストーリーを追加してバ
Jest 24 リリース 💅 リフレッシュし、洗練され、TypeScriptフレンドリーに（日本語翻訳）
2019年1月25日に Jest の最新メジャーバージョンとなる Jest 24 がリリースされました。これまでで最大のメジャーリリースと言われていた Jest 23 から約 8 ヵ月ぶりのメジャーリリースです。ついに TypeScript に対応しました。今回のリリースはやはりこれに尽きると個人的には思っています。Jest の公式ブログのリリースに関する投稿『Jest 24: 💅 Refreshing, Polished, TypeScript-friendly』を日本語に訳しました。細かい内容については、当記事でぜひチェックしてみてください。 Jest 24: 💅 Refreshing, Polished, TypeScript-friendly January 25, 2019 Simen Bekkhus Today we are happy to announce the ne
Nuxt.jsの新規プロジェクトでいい感じのテスト環境をつくる@2018 | MMMブログ
TL;DR ユニットテスト/結合テスト=>Jest UIテスト=>Storybookをベースに、Jestで足りない部分を補う プロジェクトの技術スタック Nuxt.js Vue.js Vuex TypeScript Docker 目次 テスト種別の整理 簡単に、今回登場するテスト種別の整理をしておきます。より詳しくは、ググったり書籍を読んだりするのをおすすめします。 ユニットテスト - 個別の関数やクラス、コンポーネントをテストする。 結合テスト - 複数の関数やコンポーネントをつなぎこんでテストする。 UIテスト - ブラウザを使って見た目を含めてテストする。 ブラックボックステスト - 機能の実際の振る舞いをベースにテストする手法 ホワイトボックステスト - 機能のロジックや入出力をベースにテストする手法 これに加えて、フロントエンドのテストではブラウザ環境かNode環境かという違いも
Jestをvue-test-utilと組み合わせてスナップショットテストやってみた - UUUMエンジニアブログ
フロンエンドエンジニアごーです。 vue-test-utilsのドキュメントを読んでいて、Jestというテストフレームワークが紹介されていたので、どんな機能があるのか試してみました。 Jestとは Facebook社製の快適なJavascriptのテストを実現するためのフレームワーク。 Reactアプリケーションを含む全ての JavaScriptコードのテストに利用可能で、複雑な設定ナシで高速に動作する。 githubのstar: 13,840 (2017/12/04の時点で) 2014年から開発が行われている facebook/jest 単一ファイルコンポーネント(SFC)をテストする 事前コンパイルが必要 Jestプリプロセッサを使用するので、テスト過程でwebpackは不要 基本的なSFC(StatelessFunctionalComponent)機能をサポートしているがvue-lo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxt.js And TestCode
Storybook上でTDDしたい