How to unit test a MUI component with jets

[aadlc]

Hello,

I have the following component that takes control as an argument:

const TexInputMUI = (props) => {
  const { control, variant, margin, ...rest } = props;
  return (
    <Controller
      name="myMUItf"
      defaultValue=""
      control={control}
      render={({ field }) => (
        <TextField
          {...field}
          variant={variant}
          margin={margin}
          label='A simple MIU text field'
          {...rest}
        />
      )}
    />
  );
};

And, I have a simple test that wants to check whether the component rendered or not

test("Render text input without crashing", () => {
   const { getByLabelText } = render(<TextInputMUI control={}/>);
   const textField = getByLabelText(/A simple MIU text field/);
});

Now, the problem is that I don't know how to pass control as a argument in my test.

Can anyone help?

[bluebill1049]

maybe this section will be helpful: https://react-hook-form.com/advanced-usage#TestingForm

[aadlc]

Thank you!

I solved the the issue of passing down control as a property with useFormContext but, now I am getting a different error.
Please have a look at the new code:

The form

imports . ..
const schema = yup.object().shape({...});
function App() {
  const methods = useForm({
    mode: "all",
    shouldUnregister: true,
    resolver: yupResolver(schema)
  });
  const {
    register,
    handleSubmit,
    formState: { errors },

  } = methods;
  return (
    <FormProvider {...methods}>
      <form onSubmit={handleSubmit((data) => console.log(data))}>
          <Controller
                name='fullName'
                defaultValue=''
                control={control}
                render={({ field }) =>
                  <TextField
                    {...field}
                    variant='outlined'
                    margin='normal'
                    fullWidth
                    required
                    label='First and last name'
                    error={!!errors.fullName}
                    helperText={errors?.fullName?.message}
                  />}
            />
        <NestedInput/>
      </form>
    </FormProvider>
  );
}

The nested input

imports . . . 
import { Controller, useFormContext } from 'react-hook-form'

const NestedInput= () => {
  const { control, ...rest } = useFormContext()

  return (
    <Controller
      name='NestedInput'
      defaultValue=''
      control={control}
      render={({ field }) =>
        <TextField
          {...field}
          variant='outlined'
          margin='normal'
          fullWidth
          label='Nested input:'
          {...rest}
        />}
    />
  )
}

The test

import React from 'react'
import { render } from '@testing-library/react'
import NestedInput from '../NestedInput'


test('Render text input without crashing', () => {
  const { getByLabelText } = render(<NestedInput />)
  const textField = getByLabelText(/Nested input:/)
})

Finally the error message

[aadlc]

For future reference, the solution to the question above has three parts.

First, instead of passing control down as a prop to a nested component, you can access the form context with the use of useFormContext. Documentation here.

    imports ...
    const schema = yup.object().shape({...});
    function App() {
      const methods = useForm({
        resolver: yupResolver(schema)
      });
      const { register, handleSubmit, formState: { errors }} = methods;
    
      return (
        <FormProvider {...methods}>
          <form onSubmit={handleSubmit((data) => console.log(data))}>
            <NestedInput/>
          </form>
        </FormProvider>
      );
    }

Second, you need to refactor the nested component to access the form context as follow:

    imports . . . 
    import { Controller, useFormContext } from 'react-hook-form'
    
    const NestedMUIinput = () => {
      const { control, ...rest } = useFormContext()
    
      return (
        <Controller
          name='nestedMUIinput'
          defaultValue=''
          control={control}
          render={({ field }) =>
            <TextField
              {...field}
              variant='outlined'
              margin='normal'
              fullWidth
              label='Nested input:'
              {...rest}
            />}
        />
      )

Third, in your test file, you need to wrap the <NestedMUIinput /> with the Provider. More on it [here].(#3894)

imports . . .
import { useForm, FormProvider } from 'react-hook-form'
import NestedMUIinput from './NestedMUIinput'

const WrapperForm = ({ children }) => {
  const methods= useForm()
  return (
    <FormProvider {...methods}>
      {children}
    </FormProvider>
  )
}

test('Render text input without crashing', () => {
  const { getByLabelText } = render(<WrapperForm><NestedMUIinput /></WrapperForm>)
  const textField = getByLabelText(/Nested input:/)
})