読者になる銀の弾丸プログラミングに関して、いろいろ書き残していければと思っております。(license)mochaとchaiを使ったnpmのユニットテストをブラウザで動かすための設定をご紹介。mochaにはブラウザで動作させる機能が備わっていますが、テストスクリプト以外にHTMLも用意しなくてはならないので少し億劫なんですよね。実際には、ほぼ定型のHTMLなのですが、結構情報が少なくて「これで決まり!」みたいなのがない感じ。コンソールとブラウザでスクリプトを共有したい場合に、問題が出て途方に暮れたこともありました。ところが最近、ゆる~く試行錯誤を繰り返した結果、自分なりのテンプレートみたいなのが出来上がりつつあるので、ここに書いておきますよっと。これとは逆に、WEBブラウザ向けESM(ESモジュール)のmochaのスクリプトをNode.jsでテストしたい場合の設定は、以下のページに書いています。defined」を解消するコンソールでブラウザ向けテストを除外するリンクブラウザでmochaのテストを行う為のHTML以下はユニットテストをブラウザーで動かすために必要なHTMLファイルです。debug向けのデバッグログの設定。)されているモジュールを利用するように変更しています。JS側で取り込みます(理由は次項で)。モジュールの設定をしています。ブラウザではF12ツールのコンソールに色がついて見やすくなります。していますから、すべてのログが表示されます(mochaもdebugを利用しています)。SCRIPTタグで読み込んでいますが、自分的にはコンソールから実行するものと同じように、テストスクリプトで取り込むようにしています。Node.js特有の機能を使っていない物をブラウザでも実行できるようになるからです。これによってテストスクリプトをバンドラーでコンパイルしなくてはなりません。ユーザー操作を待つテストの書き方テストの実行時に、ボタンのクリックなどの操作を待つ必要がある場合は、その操作で解決する非同期関数を用意し、テストの中から呼び出しますようにします。この場合、mochaのテストのタイムアウトを無効にしておく必要があります。以下の例は、ボタンがクリックされてからテストが実行されます。ボタンを作って押されたら解決するPromiseを返す。Promiseは30秒後にリジェクトされる。Promiseを返す。//タイムアウト無効});待ち時間が30秒を越えるとエラーを投入するのでテストは失敗します。クリックするためのボタンを動的に追加していますが、あらかじめHTMLに書いておいても構いません。以下にあるモジュールのコマンドはパスの指定をせずに使えますから。通常のコンソールでのテストを実行するようにしています。この辺はお好みに応じて変更してください。Parcelめっちゃ便利です。ブラウザーでのテストのためだけに使っても良いかも?って思っています。BrowserifyやWeb-Packでは、いろいろ細かな設定が必要になるはずです。defined」を解消するParcelを使うとBabelも使うことになりますが、そのままだとブラウザでの実行時に以下のようなエラーが出ることがあります。(test-script.js:5)このエラーはBabelで変換対象となるような比較的新しいコードがあるときに発生するように思います。インポートするスクリプトを用意して、HTMLのSCRIPTで、テストスクリプトよりも前に読み込みます。ポリフィルはWebページから一度だけ参照すべきなので、このような対処になります。ブラウザ特有の機能を使っているテストスクリプトを除外してやる必要があります。いうファイルで行います。以下の例では、testディレクトリ内のファイル名が'web-'で始まるファイルを除外しています。9参加グループプログラミングはてなブログをはじめよう!takamintsさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。