mardi 14 juillet 2020

TypeScript Property 'value' does not exist on type 'HTMLElement'. React Jest Testing

Currently without TypeScript this code is working, but now it is not working unfortunately. It gave me the following error: Property 'value' does not exist on type 'HTMLElement'. Not sure what is wrong with this. Seems it is nagging about the value. In this case I am using Jest testing and React. Not sure if I can ignore this error or should fix this in order to avoid weird bugs in the future.

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")
});

ct

Aucun commentaire:

Enregistrer un commentaire