TypeScript 属性“值”在类型“HTMLElement”上不存在。反应玩笑测试

Question

目前，在没有 TypeScript 的情况下，此代码可以正常工作，但不幸的是，现在它无法正常工作。它给了我以下错误：“HTMLElement”类型上不存在属性“值”。不知道这有什么问题。似乎它在喋喋不休地谈论价值。在本例中，我使用 Jest 测试和 React。不确定我是否可以忽略此错误或应该修复此错误以避免将来出现奇怪的错误。

import React from 'react';
import axios from 'axios';
import { useDispatch } from "react-redux";
import { getData } from '../../../actions/index';;

export const SearchInput : React.FC = () => {
    const dispatch = useDispatch();
    let input: any;

    const getInputValue = (value: string):void => {
        let url = `https://api.tvmaze.com/search/shows?q=${value}`
    }

    return (
        <div className="container">
            <h1>Keyword</h1>
            <form className="form display-inline-flex" 
                onSubmit={e => {
                e.preventDefault()
                if(!input.value.trim()) return;

                getInputValue(input.value);
            }}>

                <input className="form-input-field disable-outline display-inline"
                    ref={node => (input = node)}
                    placeholder="Search catalog"
                    aria-label="search-input" 
                />
                <button type="submit" className="btn btn-grey white-color display-inline">
                    Search
                </button>
            </form>
        </div>
    )
}

export default SearchInput;

// Jest testing
import React from "react"
import { render, fireEvent } from "@testing-library/react";
import { SearchInput } from "./SearchInput";
import { Provider } from "react-redux";
import { store } from "../../../Store";

const setup = () => {
    const utils = render(
        <Provider store={store}>
            <SearchInput/>
        </Provider>);
    const input = utils.getByLabelText("search-input");
    return {
        input,
        ...utils
    }
}

test("It should check if input field get the value passed", () => {
    const { input } = setup();
    fireEvent.change(input, { target: { value: "search-bar-test" } })
    expect(input.value).toBe("search-bar-test")
});

Answer 1

如果您添加如下类型断言，那么您应该可以顺利进行：

const input = utils.getByLabelText("search-input") as HTMLInputElement;