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.