Vitestでのモックの使い方を調べてみた
はじめに 単体テストを書く際、外部依存関係をモックすることは避けられない作業です。特にNext.jsやVue、Reactなどのモダンなフロントエンドフレームワークを使用したプロジェクトでは、コンポーネントやサービスの独立したテストを行うためにモックが必須となります。 Vitestは、Viteをベースにした高速なJava…
javascript
56 件の記事
2025
PlaywrightでHTML5バリデーションをテストする方法
HTML5バリデーションとE2Eテストの課題 E2Eテストでは、実際のユーザー操作をシミュレートしてアプリケーションが正しく動作するかを検証します。HTML5のフォームバリデーションは多くのWebアプリケーションで使われている基本機能ですが、Playwrightなどのテストフレームワークで適切にテストするのは少し工夫が…
JavaScriptでJSON.stringifyを使って関数をシリアライズする方法
JavaScriptでオブジェクトをJSON化する際、JSON.stringify を使うと、関数を含むオブジェクトをシリアライズしようとしたときに関数が自動的に削除される という仕様になっています。 JSON.stringify の仕様と関数の省略 JSON.stringify はデフォルトでは関数をJSONに含めま…
2023
正規表現を使うプロジェクトではeslint-plugin-redosを入れたほうがいいかもしれない。
ReDos脆弱性ってなかなか気づかないなぁと思っていて、なにかいい方法がないかなと思っていたらeslintのpluginがあったので試してみました。 見つけたきっかけ zodのemailのバリデーションの正規表現でReDos脆弱性があるという指摘を頂いたので、zodのプロジェクトのPRを見てたら以下のようなPRを見つけ…
ZodのemailバリデーションでRFCで違反はないのにエラーになってしまった話
ZodのEmailバリデーションでとくに問題ないメールアドレスなのにエラーっていわれてしまった。 Zodのバージョンは [email protected] なので 2023/08/01時点で最新かと思います。 そのようなメールアドレスが問題なのか？ [email protected] 上記のメールアドレスにおいて…
RemixでETagを使う
Remixアプリを作って実際にサーバにデプロイし始めてから、コンテンツに変更ないほぼ静的なページなのに、ステータスコードが200でレスポンスされていたのでちょっと嫌だなと思って、ETagで304レスポンス返せるようにしてみました。 ETagとはなにか？ まずそもそもとしてETagとはなにか？ ブラウザキャッシュを利用す…
2021
Nuxt Composition APIのuseFetchとcomputedの問題について
Nuxt Composition APIでuseFetchとcomputedを組合わて使っていたらトラブルが。。。。 使っている@nuxtjs/composition-apiのバージョンについて こんな感じ @nuxtjs/composition-api": "0.22.0" 何が起きていたのか？ https://tw…
2020
Firebase Cloud Functionsでjestを導入するまでの道のり
最近Firebase Cloud Functionsでお仕事をしているのですが、jestを入れたちょっとハマったのでその記録です。 環境について firebase initで全力でenterfunctionsを用意しました。 一応こんな感じでTypeScriptでコード書いててeslintは導入済みの想定です。 まずは…
TypeScript(nodejs)のimport時の挙動
TypeScript(nodejs)でのimportの挙動が気になったので調べてみた 疑問点 Importをしたときに、ファイルスコープの処理はimportするごとに実行されるのか？ それとも、初回のimport時のみ実行されるのか？ 対象となるコードは以下の通り // test1.ts const hoge = 'a…
2019
vuex-jsonschema-validationを作っている
GitHub - polidog/vuex-jsonschema-validation: A vuex state validation plugin on change state. 作りました。 これは何をするものなかの？ vuexのstateをjson schemaを使ってvalidationするvuex-plu…
ExpoのwebviewでローカルにあるHTMLを表示する
最近Expo使ってiPhone,Android向けのアプリの開発を行っている僕です。 最近は全然php書いてなくて切ないです。 さて、今日はExpoでWebViewを使ってローカルにあるHTMLファイルを表示するのに苦労したお話をします。 バージョンについて "dependencies": { "expo": "^33…
2018
GeoFireXを使ってCloud Firestoreで位置情報の検索を行う
Cloud Firestore便利ですよね。 Cloud Firestoreで「半径〇km以内にあるスポットを検索する」みたいな実装をしたかったのでGeoFireXを使って実装してみました。 https://github.com/codediodeio/geofirex Cloud Firestoreでの緯度経度の情報…
Cloud Functions + RealtimeDatabaseでカウンター的なものを作る
最近勉強のためにFirebaseを触っています。 FirebaseってLAMPとは違って、なんというかパラダイムシフトな感じがあるのかなぁーと思い、老害にならないように勉強している最中です。 今回はCloud Functionsで簡単なカウンターの実装を作ってみました。 「検索wordがRealtimeDatabase…
nuxtでtitleタグを動的に設定する
Nuxtでheadタグ内の設定をしたい場合は、nuxt.config.jsの中に記述します。 head: { title: 'polidog.jp' } あと、titleTemplateってのがあって head: { titleTemplate: ' | polidog.jp' } とかテンプレート設定をすることができ…
2017
webpackでsassを複数のentryから複数のcssを出力する
注意: webpack3.5.6とextract-text-webpack-plugin:3.0.0での環境のお話です。 Webpackでcssファイルを出力する場合に使用するwebpack-contrib/extract-text-webpack-plugin。 普通にsassを一つのcssに出力する場合は以下のよう…
WebRTCについて話してきた
なんか定期開催されているポリドッグ勉強会。 なんだかんだで３回目が開催されました。 https://polidog.connpass.com/event/54436/ 過去開催されたイベント ポリドッグと学ぶサーバに関する技術 polidog が優しく教えてくれるJavaScriptビルドツールのワークショップ 今回は…
getUserMediaについて
昔はnavigator.getUserMedia()とかnavigator.webkitGetUserMedia()とかベンダープリフィックスついてた。 しかし今は違うようです。 今はnavigator.mediaDevices.getUserMediaを使うのが正しいようです。 ただちょっと古いブラウザだとだめみたい…
centos7でnode.js 7.xをyumでインストールする
NodejsはCentOS / Fedora / RHELベースのディストリビューション用のスクリプトがあります。 nodejs7用のものはhttps://rpm.nodesource.com/setup_7.xを利用すれば良いようです。 リポジトリ追加する $ curl -sL https://rpm.nodesou…
yarnでgithubのプライベートリポジトリをaddする簡単な方法
githubのプライベートリポジトリにあるnpmパッケージを利用したい事ってたまにある。 軽く調べてみるとverdaccioやsinopia を使った例が出てくるが、デプロイの事を考えると少し面倒くさい。 GithubのPersonal API tokenを使ってなんとか出来ないかなと思い、token生成してyarn …
bxSliderで画像の遅延ロードを行う
個人的にはあまりbxSlider使いたいなぁーとは思わなけど、仕事で仕方なく使う感じ。 ただ、画像が大量にある場合に、一気に画像画像を読み込みに行くので辛くなるんだよね。。。 ということでlazy load出来るようにしてみた。 今回のサンプルについて polidog/lazy-bxslider githubで公開して…
Vuexを触ってみた
普段はjQueryでガンガンコード書いている。 ちょっと前に気分転換にVuexで簡単な実装をしてみた。 vue-note-sample polidog/vuex-note-sample これはVuexの基本的な実装をためしてみたかったので作った。 coligo-io/notes-app-vuejs-vuexがv系だった…
2016
静岡JavaScript勉強会(4)の話
19日に静岡JavaScript勉強会に参加してきました。 遅くなってしまったけど、一応ブログ書いておきます。 今回は僕はサーバサイドレンダリングのLTを行いました。 なんかフロントエンド対しての気持ちが薄れ始めていて、内容が薄い感じになってしまってすいません。 @nakajmgが発表してる勉強会 今回は@nakajm…
Gulpを使ってファイルを保存するタイミングでPHP CS Fixerを実行する
PHP CS Fixerを実行するタイミングって皆さんどうしてますか？ PHP CS Fixerで快適PHPライフだとGit のコミットフックで実行していますね。 これでも良いとは思うんですが、個人的にはPHPファイルを保存したタイミングでPHP CS Fixerが実行できたら最高なんですよね。 Gulpで実行する 最…
Nightmareでスクリーンショットのサイズを変更してみる
ご無沙汰しています。ポリドッグです。 ここ二ヶ月ぐらいずっとPHP(Symfony2)を触り続けていましたが、久しぶりにNodejs触ってて楽しいです Nightmare(v2)を使ってキャプチャをリサイズしたのでその話をしようと思います。 そもそもNigthmareとは？ いわゆるヘッドレスブラウザってやつですが、E…
2015
Sequelizeを使ってみた
久しぶりにNodeJsでwebアプリを作っています。 完全に趣味で、仕事でやっているわけではありません。 O/Rマッパー的なものを使いたくて、調べていましたが最初に検索で引っかかった「Sequelize」を使ってみました。 インストール方法 npmのパッケージなので、npmインストールしましょう。 ちなみに今回はmys…