Jestメモ Day1

NISHIO Hirokazu [Translate]
Jestメモ Day1
from Jestメモ
Jestメモ Day1
2021-02-15
vscode-jestを入れる
自動でwatchし始める
いきなりcreate-react-appのデフォルトのテストがこける
「undefinedはmapを持ってない」という謎のメッセージで意味がわからない
OUTPUTタブに具体的にどこでこけたか表示されてる
:    TypeError: Cannot read property 'map' of undefined

      45 |   };
      46 | 
    > 47 |   const NGKW_Buttons = lastKeywords.map((x) => {
index.tsxで行ってたReactNの初期化が走らないせいだった
同様にSentryの初期化も走ってない
これは使ってたところがそもそもAPIアクセスだったのでモックに置き換えた
tsimport * as getNewTalkID from "./getNewTalkID";
jest.spyOn(getNewTalkID, "getNewTalkID").mockImplementation(() => {
  getNewTalkID._gotNewTalkID("test");
});

スナップショットの取り方はよくわからない
テストの編集によって自動で走った結果「スナップショットを更新するか？」とポップアップが出たのでそれを押した
スナップショットテストが通るようになった
スナップショットはsrc/__snapshots__/App.test.tsx.snapという名前になった

KeyPress
テキストエリアに対して改行キーのキープレスを送りたかった
tsconst textarea = container.querySelector("[id=textarea]");
...
act(() => {
  textarea?.dispatchEvent(
    new KeyboardEvent("keypress", {
      key: "Enter",
      bubbles: true,
    })
  );
});
全然反応しない
検索してるとKeyPressではcharCodeを指定しないといけないとか、whichを指定しないといけないとか情報が錯綜している、しかしどちらも指定すると型エラーになる
Test Utilities – Reactを参考に下記のようにしたら行けた
tsimport ReactTestUtils from "react-dom/test-utils";
...
ReactTestUtils.Simulate.keyPress(e, {
  key: "Enter",
});

カバレッジの表示
Command Pallete: "Jest: Toggle Coverage Overlay" doc
下記のようなthen節だけあるif文において、then節だけテストで通った場合に「分岐が網羅されてない」という趣旨のハイライトがされる
tsif (props.visible) {
  return ...;
}
return null;
この時else節をつけてもそれはハイライトされない(え？)
一旦条件式を反転させてみると、当然テストが失敗する
その後、元に戻すとハイライトされない(え？)
とか色々切り替えて試してたら壊れた笑
vscodeを再起動したらまともな表示に戻ったぞ?
もしかしてこれが既にまともではないのか？
READMEのどちらの図にも一致しない

コマンドラインで叩いてみる
$ npm test -- --coverage
うまくいかない
$ npm test -- --coverage --watchAll=false
>react-scripts testはデフォルトで watch モードで Jest を実行するので、watch モードを取り除くためには --watchAll=falseを明示的に指定する必要があります。
Create React App で test coverage が出力されない時の対処 - Qiita
https://github.com/facebook/create-react-app/issues/6888
open  ./coverage/lcov-report/index.html 

メニューアイコンをクリックして、出てきたメニューをクリックしたい
えええ、2回クリックしたらReactFiberのエラー