前提
上記2つのライブラリを用いて、react-create-app
で制作したアプリの単体テストを書いています。
テストの内容は、「クリアボタンを押すことで、input type="number"
フォームの入力値をクリアできるか」を検証するテストです。
下記がそのテストコードです。
ソースコード
// 略
fireEvent.change(getByLabelText("input number"), {
target: { value: 1 }, // フォームに1を入力
});
fireEvent.click(getByLabelText("clear number")); // クリアボタンを押下
expect(getByLabelText("input number").value).toBe(""); // フォームが空になっていることを期待
上記のテストはパスします。
また、フォームが空になっていないことを期待するように、toBe("hoge");
などと書くとテストが失敗するので、なんでもパスするようなテストではなく、検証したいことを検証できているテストと言えます。
問題点
エディタ(VSCodeを使用しています)には下図の通り、getByLabelText("input number").value
のvalue
に赤い波線が表示されます。
赤線にマウスをホバーすることで表示されるエラーの内容は下記の内容です。
プロパティ 'value' は型 'HTMLElement' に存在しません。ts(2339)
このようにエディタはエラーを表示していますが、テストはパスしています。
しかし、CircleCIでテストを行なうと、下記のエラーメッセージを吐き出してテストに失敗します。
$ react-scripts test
FAIL src/テストファイル.tsx
● Test suite failed to run
[BABEL] /home/circleci/project/src/テストファイル.tsx: Cannot find module '@babel/helper-call-delegate'
Require stack:
- /home/circleci/project/node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-parameters/lib/params.js
...略
CircleCIのエラーは調べたものの原因が分からなかったので、ひとまずテストファイルのエラーを解決しようと思っていることと、テストファイルのエラーを解決することでCircleCIでのテストも解決できるのではないかと、根拠はありませんが見当をつけています。
問題点および現象をまとめると下記の通りです。
getByLabelText("input number").value
のvalue
に、プロパティ 'value' は型 'HTMLElement' に存在しません。ts(2339)
というエラーが表示される- エラーは表示されるものの、ローカルではテストをパスする
- CircleCIではテストに失敗する
実現したいこと
エディタが示すgetByLabelText("input number").value
のvalue
に係るエラーを解決したいです。
試したこと
エディタが提示するエラーに対するクイックフィックスは下記の3種です。
- メソッド"value"を宣言する
- プロパティ"value"を宣言する
- プロパティ"value"のインデックス シグネチャを追加する
valueはフォームの値なのでメソッドではないことから2つ目か3つ目が対応としては良いのかもしれませんが、いずれのフィックスを実行してもnode_module/typescript/lib/lib.dom.d.ts
ファイルの下記の部分にコードが追加されます。
/** Any HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it. */
interface HTMLElement extends Element, DocumentAndElementEventHandlers, ElementCSSInlineStyle, ElementContentEditable, GlobalEventHandlers, HTMLOrSVGElement {
value: any; // 「プロパティ"value"を宣言する」を適用して追加されたコード
accessKey: string;
readonly accessKeyLabel: string;
autocapitalize: string;
dir: string;
// 略
このフィックスを実行することで、エディタはエラーを示さなくなりました。
しかし、フィックスにより変更されるlib.dom.d.ts
ファイルが含まれているnode_module
フォルダ内は、.gitignore
ファイルによってリモートリポジトリで管理しないように設定しています。
なのでこの対応策はローカル上のエラーの解決にはなりますが、リモートリポジトリを元に稼働させるCircleCIのテストには効果を成さないかと思います。
node_module
もリモートリポジトリにpushすれば解決できるかもしれませんが、node_module
は肥大なのでそれは避けたいです。
よい解決方法があればご教示いただきたく存じます。
解決にあたりそのほか必要な情報がありましたらコメントください。