Any tip for testing?

I’m using react-scripts and material-ui and my code is something like

const Form = ({onSubmit}) => {
 const { register, handleSubmit, errors } = useForm()
 return (
  <form onSubmit={handleSubmit(onSubmit)}>
     <TextField {...} inputRef={register} />
     .....
      <Button type="submit" />
  </form>
}

i want to test the form doing something like

describe('Form Component', () => {
 it('should submit when data filled', () => {
    const onSubmit = jest.fn()
    const component = mount(<Form onSubmit={onSubmit} />)
    const input = component.find(TextField).at(1)
    input.simulate('change', { target: { value: 'test'} })
    component.find(Button).first().simulate('submit')
    expect(onSubmit).toBeCalled()
 })
})

this throw me 2 errors:

1. onSubmit is not called

 Attempted to log "Warning: An update to Form inside a test was not wrapped in act(...).
  ....

    When testing, code that causes React state updates should be wrapped into act(...):

    act(() => {
      /* fire events that update state */
    });
....

i put every simulate in an act function and does not work.

Any tip is welcome

[julian-linux]

I have a solution. I had to change to react-testing-library for this. Enzyme does not work as expected.

This is an idea of my form… and i added some props for react-testing-library

const Form = ({onSubmit}) => {
 const { register, handleSubmit, errors } = useForm()
 return (
  <form onSubmit={handleSubmit(onSubmit)} data-testid='form'>
     <TextField 
        {...}
        inputRef={register} 
        inputProps={{
          'aria-label': 'input'
        }}/>
     .....
      <Button type="submit" />
  </form>
}

And this is an idea of my new test

describe('Form Component', () => {
 it('should submit when data filled', async () => {
  const onSubmit = jest.fn()
  const { getByLabelText, getByTestId } = render(<Form onSubmit={onSubmit} />)
  const input = getByLabelText('input')
  await act(async () => {
    await fireEvent.change(input, { target: { value: '123' } })
  })
  await act(async () => {
      fireEvent.submit(getByTestId('form'))
  })
  expect(onSubmit).toBeCalled()
 })
})

Tnx for the ideas guys

[bluebill1049]

we have a testing section now: https://react-hook-form.com/advanced-usage/#TestingForm probably worth to have read