Wallaby.jsを使ってフロントエンド開発のテストを効率化しよう - Findy Tech Blog
Findy Team+でフロントエンドエンジニアをしている 川村(@peijun333)です。 Findy では、フロントエンドのコード品質と安定性を確保するために Jest などのテストフレームワークを積極的に活用しています。通常、Jest は CLI から実行してテスト結果をコンソールで確認しますが、コマンドを用意する手間や、テスト経過のデバッグのために都度 console.log などでその内容を確認しなければならずとても不便です。 そこで、今回はテストの自動化とリアルタイムなフィードバックを提供する JavaScript の統合テストツールである Wallaby.js を紹介します。Wallaby.js を導入することで、開発効率の向上が期待できます。 Wallaby.js とは？ 前提条件 VS Code でテストの修正 Wallaby.js はリファクタリングに強い スナップシ
JestでURL.createObjectURLとloadイベントをモックする
type Size = { width: number; height: number; }; const imageSize = (file: File): Promise<Size> => { return new Promise((resolve, reject) => { const img = document.createElement("img"); img.onload = () => { resolve({ width: img.width, height: img.height, }); }; img.src = URL.createObjectURL(file); }); }; export default imageSize; ここでURL.createObjectURLとloadイベントをモックしようとして少しハマったので記録を残しておきます。 Jestのバージョ
Vue Test setMethodsのdeprecated対策
setMethodsは公式で非推奨とされてる件 前に書いた記事にも言及しましたけどコンポーネントのメソッドをテストしたい場合よくsetMethodで該当メソッドをmockとしてテストしますが、下記のようなコードはよく見る例です。 // stubはmock関数（メソッド） const stub = jest.fn(); wrapper.setMethods({ // executeSearchはテストしたいメソッドで、mock関数をアサインします executeSearch: stub, }); ただ公式は非推奨なので、テストケースとしては実行してもパスしますが、warningエラーが出てくるから鬱陶しいですね... Orz 今回はsetMethodsを使わずにメソッドをテストする方法を紹介します。 今回のシナリオ リンクをクリックして、exeSearchが正しく発火されたどうかテストしたい
Playwright を使うなら Jest は要らない？ : (*x).b=z->a+y/c
◆ Playwright でも Jest と同じ expect() を使える ◆ ユニットテストにも使えるなら Jest はなくてもいい？ ◆ モック機能は Jest が便利なのであったほうがいいかも ◆ Playwright のセレクタで React のコンポーネントが使えるけど minify してるとダメ Playwright と Jestちょっと前に Playwright 使おうかなーと書いて最近使ってみてました Puppeteer の場合はブラウザを操作するだけなので テストに関する機能は別のツールを使う必要があります ユニットテストで Jest を使っているならそのまま Jest を使えます Playwright だとそういう機能が組み込まれています 便利だけどユニットテストで Jest を使ってると共存するのはどうするのがいいんでしょう？ 探してみると jest-playwri
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - microsoft/playwright: Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.
