I have a material-ui textfield on which I want to simulate the user types in and hit enter. How do I do it in Jest? I went through related answers and none of them are working for me.

Tried the following:

        const input = getByTestId('emailId').querySelector('input')
        fireEvent.change(input, {
            target: { value: 'abc' }
        }); //Up to this point works

None of the following are working:

        fireEvent.submit(getByTestId('emailId').querySelector('input'));
        input.dispatchEvent(new KeyboardEvent('keydown',{'key':'Enter'}));
        getByTestId('emailId').querySelector('input').simulate('keydown', {key: 'Enter'})

The code under Test is:

<CustomTextField
                data-testid="emailId"
                textLabel={t('email', 'Email')}
                autoplete="email"
                value={userEmail}
                onChange={onEmailchange}
                handleKeyHandler={submitOnEnter}
                autoFocus
            />

CustomTextField is another ponent that returns a textfield:

 <TextField
                        size="small"
                        data-testid="emailId"
                        id={textFieldId || 'defaultTextFieldId'}
                        label={textLabel}
                        variant="outlined"
                        fullWidth
                        onChange={handleOnchange}
                        onBlur={onBlur}
                        value={value}
                        inputRef={txtField}
                        autoComplete={autoplete}
                        autoFocus={autoFocus}
                        type={textFieldType}
                        onKeyPress={handleKeyHandler}
                        InputLabelProps={{
                            classes: {
                                root: classes.customLabelStyle,
                                focused: classes.cssFocused
                            }
                        }}
                        InputProps={{
                            classes: {
                                root: classes.cssOutlinedInput,
                                focused: classes.cssFocused,
                                notchedOutline: classes.notchedOutline
                            },
                            endAdornment: showSearchIcon ? inputAdornment : null
                        }}
                        {...textFieldProps}
                    />

I have a material-ui textfield on which I want to simulate the user types in and hit enter. How do I do it in Jest? I went through related answers and none of them are working for me.

Tried the following:

        const input = getByTestId('emailId').querySelector('input')
        fireEvent.change(input, {
            target: { value: 'abc' }
        }); //Up to this point works

None of the following are working:

        fireEvent.submit(getByTestId('emailId').querySelector('input'));
        input.dispatchEvent(new KeyboardEvent('keydown',{'key':'Enter'}));
        getByTestId('emailId').querySelector('input').simulate('keydown', {key: 'Enter'})

The code under Test is:

<CustomTextField
                data-testid="emailId"
                textLabel={t('email', 'Email')}
                autoplete="email"
                value={userEmail}
                onChange={onEmailchange}
                handleKeyHandler={submitOnEnter}
                autoFocus
            />

CustomTextField is another ponent that returns a textfield:

 <TextField
                        size="small"
                        data-testid="emailId"
                        id={textFieldId || 'defaultTextFieldId'}
                        label={textLabel}
                        variant="outlined"
                        fullWidth
                        onChange={handleOnchange}
                        onBlur={onBlur}
                        value={value}
                        inputRef={txtField}
                        autoComplete={autoplete}
                        autoFocus={autoFocus}
                        type={textFieldType}
                        onKeyPress={handleKeyHandler}
                        InputLabelProps={{
                            classes: {
                                root: classes.customLabelStyle,
                                focused: classes.cssFocused
                            }
                        }}
                        InputProps={{
                            classes: {
                                root: classes.cssOutlinedInput,
                                focused: classes.cssFocused,
                                notchedOutline: classes.notchedOutline
                            },
                            endAdornment: showSearchIcon ? inputAdornment : null
                        }}
                        {...textFieldProps}
                    />

• javascript
• reactjs
• jestjs
• react-testing-library

• 1 To be sure: do you mean 'simulate' or 'stimulate'? – Mustard Shaper Commented May 11, 2021 at 13:29
• Show the code under test – Lin Du Commented May 12, 2021 at 4:20
• @slideshowp2 Done – ABGR Commented May 12, 2021 at 5:40

2 Answers 2

Well what worked for me is this:

fireEvent.keyPress(input, { key: 'Enter', charCode: 13 });

keyPress is now deprecated, so using keyDown worked for me

fireEvent.keyDown(input, { key: 'Enter', code: 'Enter', keyCode: 13 });