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アクセスだったのでモックに置き換えた

ts

import * as getNewTalkID from "./getNewTalkID";
jest.spyOn(getNewTalkID, "getNewTalkID").mockImplementation(() => {
  getNewTalkID._gotNewTalkID("test");
});

• スナップショットの取り方はよくわからない

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

• KeyPress

  • テキストエリアに対して改行キーのキープレスを送りたかった ts

const textarea = container.querySelector("[id=textarea]");
...
act(() => {
  textarea?.dispatchEvent(
    new KeyboardEvent("keypress", {
      key: "Enter",
      bubbles: true,
    })
  );
});

- 全然反応しない
- 検索してるとKeyPressではcharCodeを指定しないといけないとか、whichを指定しないといけないとか情報が錯綜している、しかしどちらも指定すると型エラーになる
- [Test Utilities – React](https://reactjs.org/docs/test-utils.html#simulate)を参考に下記のようにしたら行けた

ts

import ReactTestUtils from "react-dom/test-utils";
...
ReactTestUtils.Simulate.keyPress(e, {
  key: "Enter",
});

• カバレッジの表示
  • Command Pallete: “Jest: Toggle Coverage Overlay” doc
  • 下記のようなthen節だけあるif文において、then節だけテストで通った場合に「分岐が網羅されてない」という趣旨のハイライトがされる ts

if (props.visible) {
  return ...;
}
return null;

- この時else節をつけてもそれはハイライトされない(え？)
- 一旦条件式を反転させてみると、当然テストが失敗する
- その後、元に戻すとハイライトされない(え？)
- とか色々切り替えて試してたら壊れた笑
    - ![image](https://gyazo.com/5a3eaaaeff76b79d1ab8f7723d2f8693/thumb/1000)
- vscodeを再起動したらまともな表示に戻ったぞ?
- ![image](https://gyazo.com/a84a160e59f4fbded5736e83cb8a763d/thumb/1000)
- もしかしてこれが既にまともではないのか？
- 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のエラー