0

I have a custom React component which underneath returns a textField component from the Mui library.

  if (type === DynamicFieldType.STRING) {
    return (
      <TextField
        id="outlined-basic"
        label={label}
        placeholder={placeholder}
        variant="outlined"
        value={defaultValue || ""}
        onChange={(event) => handleOnChange(event.target.value)}
        onKeyDown={handleOnKeyDown}
        sx={{ width: 200 }}
      />
    );
  } else if ...

I am trying to create a test for user interactions, and I found the userEvent package from react testing library. (https://github.com/testing-library/user-event)

After following the examples I haven't been able to trigger an update in my test. it seems to find the component, but the action user.type doesn't seem to be having any efect at all.

this is the test

    it('should respond to user input', async () => {
        const user = userEvent.setup();

        const label = 'label';
        const defaultValue = 'defaultValue';
        const placeholder = 'placeholder';

        const component = render(
            <DynamicField
                label={label}
                type={DynamicFieldType.STRING}
                key="1"
                onChange={(value) => {
                    console.log('value', value);
                 }}
                onKeyDown={() => {

                }}
                placeholder={placeholder}
            />
        );
        const input = component.getByLabelText(label);
        const userinput = await user.type(input, ' adding value', { initialSelectionStart: 0 });
        expect(input.getAttribute('type')).toBe('text');
        expect(component.getByDisplayValue(' adding value')).toBeTruthy();
    });

The result shows as if the input doesn't receive a command.

<input
              aria-invalid="false"
              class="MuiInputBase-input MuiOutlinedInput-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input"
              id="outlined-basic"
              placeholder="placeholder"
              type="text"
              value=""
            />

and the error

TestingLibraryElementError: Unable to find an element with the display value:  adding value.

Any idea on why might be causing this issue will be highly appreciated.

Jhonycage
  • 759
  • 3
  • 16
  • 36

0 Answers0