How to do Jest testing for form validation errors?

Viewed 3431

I am trying to test a login form validation errors:

<Form className='form' onSubmit={onSubmit} data-testid='form'>
<FormGroup className='form-group'>
      <input
        type='email'
        placeholder='Email Address'
        name='email'
        value={email}
        onChange={onChange}
        required
      />
    </FormGroup>
    <FormGroup className='form-group'>
      <input
        type='password'
        placeholder='Password'
        name='password'
        value={password}
        onChange={onChange}
        minLength='6'
      />
    </FormGroup>
    <input type='submit' value='Login' />
  </Form>

but the problem is i am unable to get the error text in the component = render()

my test is as follows:

it('validate user inputs, and provides error messages', async () => {
    const { getByTestId, getByText, getByPlaceholderText } = component
    
    fireEvent.change(screen.queryByPlaceholderText(/Email Address/i), {
        target: {value: ""},
    });

    fireEvent.change(screen.queryByPlaceholderText(/Password/i), {
        target: {value: ""},
    });

    fireEvent.submit(getByTestId("form"));

    expect(getByText("Please fill out this field.")).toBeInTheDocument();


})

I am using react testing library with jest

0 Answers
Related