How to test React Number Format

Question

I have used React Number Format package here and I want to test its onChange event but I'm getting an error, can someone please help me with this. I have given my test code and component below. In the fireEevent method of the code, it keeps saying that Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element | Node | Document | Window'

My Test Case:

import React from 'react';
import { fireEvent, render, screen } from '@testing-library/react';
import LoanAmount from './LoanAmount'
import ReactDOM from 'react-dom';
import NumberFormat from 'react-number-format';


  it("renders correctly", () => {
      const { queryByPlaceholderText } = render(<LoanAmount/>)

      expect(queryByPlaceholderText('Enter Loan Amount')).toBeTruthy
  })

  describe("input value", () => {
          it("Updates on change", () => {
              const {queryByPlaceholderText} = render(<LoanAmount/>)
          

const amountInput = queryByPlaceholderText("Enter Loan Amount")
          fireEvent.change(amountInput, {target: {value: "4000"}})  //<--- shows error
          expect(amountInput.value).toBe("4000") //<-- and here as well
 
      })
  })

My React Component having react-number-format:

import React from 'react'
import styled from 'styled-components';
import NumberFormat from 'react-number-format';
import { useState } from 'react';
import { type } from 'os';

function LoanAmount() {
    const [amount, setAmount] = useState("");
    const [error, setError] = useState("");

    const handleChnage = (e: { target: { value: string; }; }) => {
        const loanAmount = e.target.value;
        let number = Number(loanAmount.replace(/[^0-9.-]+/g,"")); //removes everything from the number except dot
        //number = Math.round(number);
        setAmount(number.toString());
        number < 4000 || number > 100000 ? setError("Your total loan amount must be between $4,000 and $100,000") : setError("");
    }
    const inputs = document.querySelectorAll('NumberFormat');
    console.log(inputs.length);
  return (
    <LoanAmountContainer>
        <LoanAmountForm>
            <label>Loan Amount</label>
            <span> 
                <NumberFormat
                    className="loanAmount"
                    name="amount"
                    thousandSeparator={true}
                    decimalScale={2}
                    fixedDecimalScale={true}
                    prefix="$"
                    value={amount}
                    onChange={handleChnage}
                    placeholder="Enter Loan Amount"
                />
            </span>
            <small>{error}</small>
        </LoanAmountForm>
    </LoanAmountContainer>
  )
}

export default LoanAmount

const LoanAmountContainer = styled.div`
`

const LoanAmountForm = styled.div`
 `

Answer 1

Try to use a RegExp for matching the HTML element and call queryByPlaceholderText on the screen instance:

describe('input value', () => {
  it('Updates on change', () => {
    render(<LoanAmount />);

    const amountInput = screen.queryByPlaceholderText(/Enter Loan Amount/i);
    fireEvent.change(amountInput, { target: { value: '4000' } }); 
    expect(amountInput.value).toBe('4000'); 
  });
});