React-testing-library: React-testing-library 5.0.0: fireEvent 'change' is not triggered

[snaumov]

• react-testing-library version:5.0.0
• react version: 16.3.1, ^16.4.2
• node version: 8.11.4
• npm (or yarn) version: yarn 1.9.4

Relevant code or config:

// TEST
import { render, fireEvent } from 'react-testing-library';
import App from './App';

it('Testing library fireEvent fires event', () => {
  const handleChange = jest.fn();
  const {getByTestId} = render(<App handleChange={handleChange}/>);
  const input = getByTestId('test-input');
  input.value = 'TEST VALUE';
  fireEvent.change(input);
  expect(handleChange).toHaveBeenCalledTimes(1);
});

//COMPONENT

class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            value: ''
        };
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange = (e) => {
        console.log('calling handle change');
        const { value } = e.target;
        this.setState({ value });
        this.props.handleChange(e);
    };

  render() {
    return (
      <div className="App">
        <input value={this.state.value} onChange={this.handleChange} data-testid="test-input" />
      </div>
    );
  }
}

export default App;

Reproduction:

https://github.com/snaumov/repro-for-kent

Problem description:

The above test fails on react-testing-library 5.0.0 (handleChange not fired), but works in 4.1.8.

Suggested solution:

Will keep looking into that, appreciate any direction.

[gnapse]

From version 5 on, you need to replace this:

input.value = 'TEST VALUE';
fireEvent.change(input);

with this:

fireEvent.change(input, { target: { value: 'TEST VALUE' } });

[snaumov]

@gnapse Huge thank you! I'll update the docs if you don't mind?

[gnapse]

I just cloned your repo locally, change the two lines above with the line I said, and it works. You need to remove the input.value = ... too.

[snaumov]

@gnapse Yep, I edited my answer, after you edited your answer :) Thanks again.

[colinrobertbrooks]

This isn't working with select elements:

fireEvent.change(select, { target: { value: newValue } });

Prior to version 5 this worked:

select.value = newValue;
select.dispatchEvent(new Event('change', { bubbles: true }));

Suggestions?

[kentcdodds]

That should work I think... Could you do a little digging to find out why it may not be working?

[colinrobertbrooks]

Disregard. After digging more, it looks like this is updating select elements as expected. I think a Jest + Babel 7 gotcha (probably around async/await) is causing it to look like it’s not on my end.

[behivetech]

Shouldn't this be in the docs on how to fireEvent.change? We are having a lot of trouble using this library because we have to either scrape the internet for how to do something or dig through the examples. I realize some help may be needed on documentation, but when this library is listed all over the React site to try using it, it's pretty frustrating how long it takes to figure how to do any of these things...
https://github.com/alexkrolick/testing-library-docs/issues/54

[muhraff]

Disregard. After digging more, it looks like this is updating select elements as expected. I think a Jest + Babel 7 gotcha (probably around async/await) is causing it to look like it’s not on my end.

@colinrcummings hey did you manage to get this working? I think I'm facing the same issue.

[colinrobertbrooks]

@muhraff, I did. Here's an example.