Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Firing event by react-testing-library and handling it in onInput event #65

Open
valisij94 opened this issue Jul 12, 2022 · 1 comment
Open

Comments

@valisij94
Copy link

valisij94 commented Jul 12, 2022

Hi all!
Need a help with react-testing-library. I use Preact in my project, and use preact-testing-library wrapper for RTL.
The problem is in the onInput event. The project is big and there are many controlled inputs. These inputs don't have onChange event handler, but they have onInput handler instead.
I'm trying to write a simple test for my component:

it('First test', async () => {
  const field = await screen.findByLabelText('label');
  // type in the field
  fireEvent.input(field,  { target: { value: 'BADBADBAD12345' }});
});

And this is a code fragment of my component:

<input
    type="tel"
    autoComplete="tel"
    id={id}
    title={title}
    name={name}
    className={classes}
    onPaste={this.pasteHandler}
    onInput={this.inputHandler}
    onBlur={this.blur}
    onFocus={this.focused}
    onKeyDown={this.keyDown}
    onChange={(e) => {console.log('changed ', e.target.value)}}
    value={this.state.value}
    required={required}
  />

When I call the fireEvent.change method, the onChange handler called. But no method (fireEvent.change, fireEvent.input) does not fire the onInput handler.
I tried to use @testing-library/user-event, and call userEvent.type, but still no effect.
Can somebody help with this issue?
I don't have any option to change the onInput to onChange.

@eps1lon eps1lon transferred this issue from testing-library/react-testing-library Aug 4, 2022
@mikerob215
Copy link
Contributor

@valisij94 is there any chance you have a reproduction of this? I'd be interested in looking into it. Experimenting locally in a simple example, this seems to work for me,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants