how to test react-select with react-testing-library : <p>App.js</p>

<pre><code>import React, { Component } from "react";
import Select from "react-select";

const SELECT_OPTIONS = ["FOO", "BAR"].map(e =&gt; {
  return { value: e, label: e };
});

class App extends Component {
  state = {
    selected: SELECT_OPTIONS[0].value
  };

  handleSelectChange = e =&gt; {
    this.setState({ selected: e.value });
  };

  render() {
    const { selected } = this.state;
    const value = { value: selected, label: selected };
    return (
      &lt;div className="App"&gt;
        &lt;div data-testid="select"&gt;
          &lt;Select
            multi={false}
            value={value}
            options={SELECT_OPTIONS}
            onChange={this.handleSelectChange}
          /&gt;
        &lt;/div&gt;
        &lt;p data-testid="select-output"&gt;{selected}&lt;/p&gt;
      &lt;/div&gt;
    );
  }
}

export default App;
</code></pre>

<p>App.test.js</p>

<pre><code>import React from "react";
import {
  render,
  fireEvent,
  cleanup,
  waitForElement,
  getByText
} from "react-testing-library";
import App from "./App";

afterEach(cleanup);

const setup = () =&gt; {
  const utils = render(&lt;App /&gt;);
  const selectOutput = utils.getByTestId("select-output");
  const selectInput = document.getElementById("react-select-2-input");
  return { selectOutput, selectInput };
};

test("it can change selected item", async () =&gt; {
  const { selectOutput, selectInput } = setup();
  getByText(selectOutput, "FOO");
  fireEvent.change(selectInput, { target: { value: "BAR" } });
  await waitForElement(() =&gt; getByText(selectOutput, "BAR"));
});
</code></pre>

<p>This minimal example works as expected in the browser but the test fails.  I think the onChange handler in  is not invoked.  How can I trigger the onChange callback in the test?  What is the preferred way to find the element to fireEvent at?  Thank you</p>
