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
PlayWright を使ってE2Eテストを書いてみた | Tech Blog | CRESCO Tech Blog
こんにちは。クロステック・オフィスの benishouga です。 この記事は「CRESCO Advent Calendar 2020」20日目の記事です。 今回は PlayWright というライブラリについて、調べる機会があったので、PlayWright とは？という説明を少しと、簡単な使い方として「ユーザー操作を記録してのコード生成」「マルチブラウザ向けの E2E テスト」を行ってみたいと思います。
WebのUIテスト自動化 - Seleniumを使ってみる - Qiita
Appiumを色々触っているんですが、仕組みが同じSeleniumもちょっと触ってみました。 だいぶ色々なことができそうなのでこちらも触りつつメモを取っていこうと思います。 実際の動画デモ 実際にどんなことができるのか、参考動画を撮ってみました。 内容的にはネタな感じにしていますが、どんなことができるか分かってもらえるかと思いますｗ Seleniumとは Seleniumはクロスブラウザ、クロスプラットフォームのUIテストツールです。 ブラウザに表示される要素を操作し、取得して想定されうる状態になっているかをテストできます。 また、画面のキャプチャを撮ることもできます。 検索してみると有用な記事がいくつかあるので、詳細はそちらを見てください。 ここでは簡単に触ったメモや所感を書いていきます。 JavaScriptテスト自動化ツールSeleniumのこれまでとこれから（前編）。第1回 日本S
Cross-browser testing simplified | Internet Explorer の検証がより簡単に | modern.IE
BrowserStack を使うと、あらゆるブラウザー、あらゆるプラットフォームでサイトを瞬時に表示できます。 3 か月間無料でお試しいただけます。 Test on BrowserStack 有効な URL を入力してください BrowserStack によるテストが 3 か月間無料 BrowserStack との提携により、次期プロジェクト用の仮想インタラクティブ テストをご利用いただけます。 Windows プラットフォームで動作する任意のバージョンのブラウザーでサイトをテストしましょう。 キャンペーンの有効期限は 2014 年 1 月 10 日です。ログイン時に 3 か月の利用期間が開始されます。 追加条件が適用される場合があります。 詳しくはこちら# 478938 詳細を見る
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue Test Utils
Installation | Vue Test Utils
Vitest
GitHub - microsoft/playwright: Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.