Тестирование React Проверка формы библиотеки onChange не работает должным образом

Я изучаю библиотеку тестирования React и пытаюсь понять, как проверять сообщения об ошибках с помощью onchange. Я даже упростил ее, поэтому форма отключена до тех пор, пока оба ввода не станут действительными. Он отлично работает во время ручного тестирования, но по какой-то причине внутри библиотеки тестирования React он просто не работает.

Либо мне не хватает чего-то базового, что не задокументировано, потому что это настолько очевидно, либо где-то есть ошибка.

Входные данные не проверяются должным образом ни во время события изменения, ни даже когда я нажимаю кнопку отправки.

Если форма явно недействительна, она сообщает, что она действительна.

У меня есть два входа:

Первый из них является обязательным и имеет минимальную длину 5, Второй вход имеет минимальную и максимальную длину 3, то есть ровно 3,

Вот код, показывающий различные тесты, которые должны легко пройти, но по какой-то странной причине провалиться:

Я пробовал как контролируемые, так и неконтролируемые формы и изо всех сил пытаюсь понять, почему это происходит. Я чувствую, что что-то находится прямо передо мной, но мне этого не хватает.

Я использую Vitest с шуткой и RTL.

Я попытался реализовать гиперформу на основе ответа ниже, но она все равно не работает:

import * as matchers from '@testing-library/jest-dom/vitest';
import {expect, afterAll} from 'vitest';
import { cleanup } from '@testing-library/react';
import Hyperform from 'hyperform';

expect.extend(matchers);

globalThis.HTMLInputElement.prototype.checkValidity = function () {
    return hyperform.checkValidity(this);
};

afterAll(() => {
    cleanup()
})

импортировать { defineConfig } из 'vite' реакция на импорт из @vitejs/plugin-react-swc

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/Tests/Rtl/Setup.js'
  }
})



export default function ErrorMessage(props) {
  return (
    <span data-testid = {props.testId} ref = {props.ref} style = {{color: 'red'}}>{props.text}</span>
  )
}


export default function ControlledForm() {

  console.info('Component form rendered!');

    const [inputOne, setInputOne] = useState({
        value: "",
        isValid: false,
        errorMessage: ""
    });

    const [inputTwo, setInputTwo] = useState({
      value: "",
      isValid: false,
      errorMessage: ""
    });

    const isValid = inputOne.isValid && inputTwo.isValid;

    console.info('Form isValid: ', isValid);

    function handleSubmit(e) {
      e.preventDefault();
      console.info('Form Submitted!', e.target.elements);
    }

    return (
      <div>
        <h3>Controlled Form</h3>
        <p>
          In this component, all state for inputs is in the top component!
        </p>
        <form 
          action = "" 
          method='POST' 
          onSubmit = {e => handleSubmit(e)}
          style = {{
            display: 'flex',
            flexDirection: 'column',
            gap: '1em'
          }}
        >
          <div>
            <input 
              className='practice-inputs'
              type = "text" 
              name = "inputOne" 
              placeholder='Input One:'
              value = {inputOne.value} 
              minLength = {5}
              maxLength = {7}
              required
              onChange = {(e) => {
                //Validate and check input on change here
                  console.info('Input 1 Validity on change: ', e.target.validity);
                  const isValid = e.target.checkValidity();
                  console.info('Is valid: ',isValid);
                  setInputOne({
                    value: e.target.value,
                    isValid: isValid,
                    errorMessage: (!isValid) ? 'Error happenned' : ''
                  })
              }}
            />
            <ErrorMessage testId='cErrorMessage1' text = {inputOne.errorMessage} />
          </div>
          
          <div>
            <input 
              className='practice-inputs'
              type = "text" 
              name = "inputTwo" 
              placeholder='Input Two: '
              value = {inputTwo.value} 
              minLength = {3}
              maxLength = {3}
              required
              onChange = {(e) => {
                //Validate and check input on change here
                  console.info('Input 2 Validity on change: ', e.target.validity);
                  setInputTwo({
                    value: e.target.value,
                    isValid: e.target.checkValidity(),
                    errorMessage: (!e.target.checkValidity()) ? 'Error happenned' : ''
                  })
              }}
            />
            <ErrorMessage testId='cErrorMessage2' text = {inputTwo.errorMessage} />
          </div>
          
          <SubmitButton disabled = {!isValid} text='Submit' />

        </form>
      </div>
    )
}

Тесты:

describe('Controlled Form basic tests', () => {

    let inputOne; let inputTwo; let submitButton; let user;

    beforeEach(() => {
        render(<ControlledForm />)
        inputOne = screen.getByPlaceholderText(/Input One:/);
        inputTwo = screen.getByPlaceholderText(/Input Two:/);
        submitButton = screen.getByText(/submit/i);
    })

    it('Renders', () => {

    })

    it('Should be able to show an input by placeholder text', () => {
        expect(inputOne).toBeInTheDocument()
    })

    /**
     * Note, when looking for something that doesn't exist, I should use queryby
     */
    it('Should not be able to show inputs by an incorrect placeholder', () => {
        expect(screen.queryByPlaceholderText('placeholder that doesnt exist')).not.toBeInTheDocument()
    })

    /**
     * Here I am learning how to interact with inputs,
     * I need to wait for the type to finish, as it can take a bit of time to type the input,
     * Otherwise it would go to the next line without waiting and the input takes a bit of time
     * to be there
     */
    it('Just shows value of the input', async () => {
        await userEvent.type(inputOne, 'abc');
        expect(inputOne).toHaveValue('abc');
    })

    /**
     * ok
     */
    it('Should have the error component in the document', async () => {
        await userEvent.type(inputOne, 'abc');
        expect(screen.getByTestId('cErrorMessage1')).toBeInTheDocument();
    })


    //Okay
    it('Should have css style ?', async () => {
        await userEvent.type(inputOne, 'abc');
        expect(screen.getByTestId('cErrorMessage1')).toHaveStyle('color: rgb(255,0,0)');    
    })

    //Okay
    it('Expect submit button to be in the document', async () => {
        expect(submitButton).toBeInTheDocument();
    })

    //Okay
    it('Its submit button should be disabled', () => {
        expect(submitButton).toBeDisabled();
    })

    /**
     * Why is this test failing ??
     */
    it('Expect submit button to be disabled when inputs are not valid', async () => {
        await userEvent.type(inputOne, 'a');
        await userEvent.type(inputTwo, 'a');
        expect(submitButton).toBeDisabled();
    })

    it('Should be valid', async () => {
        await userEvent.type(inputTwo, 'abc');
        expect(inputTwo).toBeValid()
    })

    //This is invalid but for some reason fails, because it's valid ?
    it('Should be valid', async () => {
        await userEvent.type(inputTwo, 'ab');
        expect(inputTwo).toBeInvalid()
    })



/**
     * Fails
     */
    it('Should be invalid', async () => {
        const user = userEvent.setup();
        await user.type(inputOne, 'abc');
        expect(inputOne).toBeInvalid();
    })

    /**
     * Fails
     * Error text does not have value,
     * But It clearly can be seen on browser
     */
    it('Should display error message', async () => {
        const user = userEvent.setup();
        await user.type(inputOne, 'abc');
        expect(screen.getByTestId('cErrorMessage1')).toHaveValue(/error/i);
    })

Это идеально во время ручного теста:

Я также зарегистрировал вывод в консоли с помощью ручных тестов, и он работает отлично:

Я просмотрел документы здесь для сопоставителей: https://github.com/testing-library/jest-dom?tab=readme-ov-file#tobeinvalid

Там четко указано, возвращает ли проверка достоверность ложного значения, что оно и делает.

Вот мой ручной тест браузера, показывающий, что он явно работает:

Вот еще один неудачный тест, который получает пустые значения:

Здесь еще раз при ручном тесте видно сообщение об ошибке:

Здесь он отлично работает при ручном тестировании:

Я изо всех сил пытаюсь по-настоящему понять, как это работает, Поскольку при изменении конкретный компонент будет перерисовываться, Может быть, именно поэтому он не способен уловить новые ценности?

Я не вижу большого количества документации, объясняющей это, сейчас мне страшно задавать здесь вопросы. Буду рад любым советам.