Jest の テスト・スクリプトを VS Code でデバッグする術


こちらは実に簡単で、VS Codeがうまいこと処理してくれる。

  • 左のツールバーから Debug （虫アイコン）をクリック。
  • 上部のギア・アイコン(Open launch.json) をクリック。
  • 初期値をセットしてくれているが、これと別に以下を追加：

{
"type": "node",
"request": "launch",
"name": "Jest Tests",
"program": "${workspaceRoot}\\node_modules\\jest\\bin\\jest.js",
"args": [
"--runInBand"
],
"internalConsoleOptions": "openOnSessionStart",
"outFiles": [
"${workspaceRoot}/dist/**/*"
]
}


  • 上をセーブし、上部のドロップダウンから "Jest Test" を選択。
  • 左上のDEBUG をクリックして開始。
これだけ。きちんとdebugger; のところでブレークしてくれる。CLIでの苦闘が嘘のようであるが、人生無駄なものは無し、と日記には書いておこう。

なお、Break時からContinueする際のショートカットにはF8ではなく、F5がアサインされている。これを変更したい場合は、MenuのFileから　Preferences | Keyboard Shortcuts で Continue を検索するかスクロールしてロケートし、左のエディットアイコンをクリック、F8を押してからリターンキー。





コメント

コメントを投稿

このブログの人気の投稿

HiddenFor 要注意

MVC View で、HiddenFor は View Model よりも ModelState の値を優先する。 これで困るのは、以下のようなシナリオ： 初回ページ(GET)で、HiddenFor(p=>p.Step) で値が "1" だとする。 ユーザーが何らかの入力を実施、POST する。 Controller にて Save その他処理し、Step を "2" に増やす。しかしながら必須入力漏れがあり、Redirect せずに、ModelState.IsValid == false のまま Render する。 このRenderの際、HiddenFor(p=>p.Step) は、値 "1" を採ってしまう。 http://stackoverflow.com/questions/4710447/asp-net-mvc-html-hiddenfor-with-wrong-value 仕様なのだそうだが、理由はわからん。 よって、stateが変わる Action の場合、HiddenFor は使わぬが良し。 <input type="hidden" id="Step" name="Step" value="@Model.Step" /> もしくは 、ModelState の値を変えちゃうには、 ModelState.SetModelValue("Property", new ValueProviderResult("", "abc", CultureInfo.InvariantCulture)); ちなみに、bool 値を流したい場合は、文字列に変え、 <input type="hidden" id="Step" name="BoolValue" value="@Model.BoolValue.ToString()" /> JS 側では、 var boolValue = $(...
続きを読む

SPA を IIS から流す際の ASP 側のルーティング

Single Page Application (SPA) にて、トップ以外のページで F5 （page reload/reflesh) を押すと、サーバーから Page Not Found が返ってくる。通常、SPA をレンダーする Web server は、基本的に、GETリクエストに対して、ごく短い 唯一のページ返すだけがお役目。\cart とか \list 等が GET で飛んできても、左様なページ(MVCだとcontroller) は存在しないので、404 エラーとなる。 そこでさっそく調べると、以下を web.config に追加せよ、とある（Web serverは IIS を想定）。     <rewrite>       <rules>         <rule name="Rewrite Text Requests" stopProcessing="true">           <match url=".*"/>           <conditions>             <add input="{HTTP_METHOD}" pattern="^GET$"/>             <add input="{HTTP_ACCEPT}" pattern="^text/html"/>             <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/>           </conditions>           <action type="R...
続きを読む

Jest の テスト・スクリプトをデバッグする術

React が大分わかってきた（ような気がする）ので、Unit Test に進んでみる。またまた忍び難き道を忍ばねばならなかった。以下、備忘録。この世界も jasmine だとかなんだとか、あまりに選択肢が多く目が回るが、とりあえず Jest を勉強してみようと判断。 [Jest のインストール] 以下の要領でいたって簡単。      https://facebook.github.io/jest/docs/en/getting-started.html#content CLI のどこからでも jest と叩きたいので、グローバルにもインストールした。     npm install -g jest [初期動作確認] 上のサイトの要領に従って sum のテストを実施。すんなり動作した。さほどの感激は無し。 --- ここからが実務となり、厚い壁がはだかっているのは既にわかっている。C#でも Unit Test を書くのは、普通にコードを書くのと同じぐらい大変な作業だが、プログラマのライフセーバーとも言えるので、堪えどころ。 まず、私の書く Unit Test自体にバグが発生することが分かっている。これを詳細にデバッグできないと全くお話にならない。まずはここらから検証。 [Unit Test のデバッグ] 暫し調べると、やはり本家のここにたどり着いた：      https://facebook.github.io/jest/docs/en/troubleshooting.html#content 要は、Node上で Jest.js が走り、そこから私の書いた sum.test.js が走るわけだが、Node が web server を立ててくれ、そこに Chrome からアクセスし、Chromeの F12 で Just 向けに書いた Unit Test スクリプトをデバッグ可能、というわけだ。Nodeは偉い。早速 CLI にて：    node --inspect -brk node_modules/.bin/jest --runInBand やはり、さっぱり動作しない（涙）。結論から申すと、４つの問題が上の短い一行に...
続きを読む