如何测试 React 数字格式

Question

我在这里使用了 React Number Format package，我想测试它的 onChange 事件，但出现错误，有人可以帮我解决这个问题。 我在下面给出了我的测试代码和组件。 在代码的 fireEevent 方法中，它一直说 Argument of type 'HTMLElement | null' 不可分配给类型为'Element | 节点 | 文档 | 窗户'

我的测试用例：

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

我的 React 组件具有 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

尝试使用 RegExp 来匹配 HTML 元素并在screen实例上调用queryByPlaceholderText ：

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