Unit test renderTags prop of Autocomplete

Question

I have been stuck trying to unit test the renderTags property of a mui Autocomplete component. I created a custom component which uses this. But I can't figure out how to unit test it. Below I'll show you what I have tried so far.

The component looks like this:

function ChipInput(props: Props): ReactElement {
  const [field, meta, { setValue }] = useField<string[]>(props.name);
  const errorText = (meta.touched && meta.error) || undefined;

  const handleChange = useCallback((_, value) => setValue(value), [setValue]);

  const renderTags = (value: string[], getTagProps) =>
    value.map((option: string, index: number) => (
      <Chip variant="outlined" label={option} {...getTagProps({ index })} />
    ));

  const renderInput = params => (
    <TextField
      {...params}
      variant="filled"
      label={props.label}
      error={errorText !== undefined}
      helperText={errorText || props.helperText}
    />
  );

  return (
    <Column column={props.column}>
      <Autocomplete
        id={`chipInput-${props.name}`}
        multiple
        options={[]}
        value={field.value || []}
        onChange={handleChange}
        freeSolo
        renderTags={renderTags}
        renderInput={renderInput}
      />
    </Column>
  );
}

And this is how I am currently trying to unit test it. It works like this for renderInput but not for renderTags:

describe('ChipInput', () => {
  const useFieldMock = jest.spyOn(Formik, 'useField');
  const flavours = mockUseField<unknown>(['salt', 'paprika']);

  const props: ComponentProps<typeof ChipInput> = {
    name: 'chipInput',
    label: 'Chip input',
    column: 1,
  };

  it('should render chips', () => {
    jest.clearAllMocks();
    useFieldMock.mockReturnValue(flavours);

    const component = shallow(<ChipInput {...props} />);
    const autocomplete = component.find(Autocomplete);

    console.log(autocomplete.prop('value'));
    const renderTags = autocomplete.prop('renderTags') as () => ReactElement;
    const input = shallow(renderTags());

    expect(input).toExist();
  });
});

In the console log, I can see [ 'salt', 'paprika' ] printed, so I know the value has been set correctly. But somehow, on shallow(renderTags()) it throws the error TypeError: Cannot read property 'map' of undefined, because apparently in renderTags the value param is still empty. Even though as seen in the console log, it has been set.

Can anyone point me in the right direction? I feel I must misunderstand something. Thanks in advance!

Answer 1

The problem is that when you take autocomplete.prop('renderTags') it returns the renderTags function that you defined in the component as is. And its type is not () => ReactElement but (value: string[], getTagProps: Function) => ReactElement[]. Then you call renderTags without arguments, value is undefined, and you get the error when value.map(...) is executed. To fix the issue you need to pass a proper set of arguments:

// I've made the second argument(getTagProps) return an empty object
// update with what you expect
const input = shallow(renderTags(['salt', 'paprika'], () => ({})));

In general, I would suggest moving renderTags out of the component and making it exportable, so it can be tested in isolation. This would make testing way easier(no need to render the entire component).

Answer 2

Try calling it by passing arguments like this..

const component = shallow(<ChipInput {...props} />);

const autocomplete = component.find(Autocomplete);

autocomplete.at(0).prop('renderTags')(['salt', 'paprika'],{})