0

前提

上記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").valuevalueに赤い波線が表示されます。
mondai
赤線にマウスをホバーすることで表示されるエラーの内容は下記の内容です。

プロパティ '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").valuevalueに、プロパティ 'value' は型 'HTMLElement' に存在しません。ts(2339)というエラーが表示される
  • エラーは表示されるものの、ローカルではテストをパスする
  • CircleCIではテストに失敗する

実現したいこと

エディタが示すgetByLabelText("input number").valuevalueに係るエラーを解決したいです。

試したこと

エディタが提示するエラーに対するクイックフィックスは下記の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は肥大なのでそれは避けたいです。

よい解決方法があればご教示いただきたく存じます。
解決にあたりそのほか必要な情報がありましたらコメントください。

1 件の回答 1

1

getByLabelText()<input> を返すことが分かっていればキャストを使って (getByLabelText("input number") as HTMLInputElement).value と書けます。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。