65400


# 前提

  * [Jest](https://jestjs.io/docs/ja/getting-started)
  * [React-Testing-Library](https://testing-library.com/docs/intro)

上記2つのライブラリを用いて、`react-create-app`で制作したアプリの単体テストを書いています。  
テストの内容は、「クリアボタンを押すことで、`input type="number"`フォームの入力値をクリアできるか」を検証するテストです。  
下記がそのテストコードです。

# ソースコード

[code]

    // 略
    fireEvent.change(getByLabelText("input number"), {
      target: { value: 1 }, // フォームに1を入力
    });
    fireEvent.click(getByLabelText("clear number")); // クリアボタンを押下
    expect(getByLabelText("input number").value).toBe(""); // フォームが空になっていることを期待
    
[/code]

上記のテストはパスします。  
また、フォームが空になっていないことを期待するように、`toBe("hoge");`などと書くとテストが失敗するので、なんでもパスするようなテストではなく、検証したいことを検証できているテストと言えます。

# 問題点

エディタ（VSCodeを使用しています）には下図の通り、`getByLabelText("input
number").value`の`value`に赤い波線が表示されます。  
[![mondai](https://i.stack.imgur.com/TvQ97.jpg)](https://i.stack.imgur.com/TvQ97.jpg)  
赤線にマウスをホバーすることで表示されるエラーの内容は下記の内容です。

> プロパティ 'value' は型 'HTMLElement' に存在しません。ts(2339)

このようにエディタはエラーを表示していますが、テストはパスしています。

しかし、CircleCIでテストを行なうと、下記のエラーメッセージを吐き出してテストに失敗します。

[code]

    $ 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
    ...略
    
[/code]

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`ファイルの下記の部分にコードが追加されます。

[code]

    /** 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;
        // 略
    
[/code]

このフィックスを実行することで、エディタはエラーを示さなくなりました。

しかし、フィックスにより変更される`lib.dom.d.ts`ファイルが含まれている`node_module`フォルダ内は、`.gitignore`ファイルによってリモートリポジトリで管理しないように設定しています。  
なのでこの対応策はローカル上のエラーの解決にはなりますが、リモートリポジトリを元に稼働させるCircleCIのテストには効果を成さないかと思います。  
`node_module`もリモートリポジトリにpushすれば解決できるかもしれませんが、`node_module`は肥大なのでそれは避けたいです。

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


CC BY-SA 4.0
2020-04-06T09:20:45.117
65399
2020-04-06T09:45:06.997
35433
question
reactjs typescript circleci jestjs
「プロパティ 'value' は型 'HTMLElement' に存在しません」というエラーを解決したいです。


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


CC BY-SA 4.0
2020-04-06T09:45:06.997
65400
2020-04-06T09:45:06.997
241
65399
answer