Блог

У меня есть очень простая форма, которая имеет 1 вход и в настоящее время проводит тестирование на ней. Однако я не могу использовать fireEvent.change() для добавления входных данных.

Основной код

 function Submission(){
    // I understand that I can just simply do [name, setName] but in the future there will be more input, this is just for testing
    const [formData, setFormData] = useState({
        name: ''
    })
    
    const updateForm = (e) => {setFormData({ ...formData, [e.target.id]: e.target.value })};

    return (
        <div>
            <TextField id="name" type='string' label="Name" value={formData.name} onChange={(e)=>updateForm(e)} required/>
        </div>
    )
}
  

Тестовый блок

 it('Can put enter value into the input', () => {
    const {getByLabelText} = render(<Submission/>);
    const input = getByLabelText(/name/i);
    fireEvent.change(input, { target: { value: 'name' }});
    expect(input).toBe('name');
  });
  

Ошибка

   ● Submission › Can put enter value into the input

    expect(received).toContain(expected) // indexOf

    Expected value:  "name"
    Received object: <input aria-invalid="false" class="MuiInputBase-input MuiInput-input" id="name" required="" type="string" value="" />

      72 |     const input = getByLabelText(/name/i);
      73 |     fireEvent.change(input, { target: { value: 'name' }});
    > 74 |     expect(input).toContain('name');
         |                   ^
      75 |   });
  

Я решил, установив const input = getByLabelText(/name/i); as HTMLInputElement;