react-autosuggest
react-autosuggest copied to clipboard
Unable to find the suggestion items during a unit test
I get a Timed out in waitForElement.
it('calls "onSelect" prop when an item is selected', async () => {
const onSelect = jest.fn();
const { getByPlaceholderText, container } = customRender(<AutoComplete placeholder="test" data={data} onSelect={onSelect} />);
const inputNode = getByPlaceholderText('test');
// This will write `pete` in the input field
fireEvent.change(inputNode, { target: { value: 'pete' } });
const items = await waitForElement(() => {
container.querySelectorAll('.react-autosuggest__suggestion');
});
console.log(items);
// Fire the click on the first item
// fireEvent.click(items[0]);
expect(onSelect).toHaveBeenCalled();
});
More info here: https://spectrum.chat/react-testing-library/help?thread=68e5c2dc-21fa-4b8d-9c6d-3bf2c0613c4a
Any help would be much appreciated.
Actually Readme.md
should be expanded on how to (and what to) test using the component. I'm also struggling to check if a change in input causes my mock client to be called. :|
Here is sandbox that another user made to show the issue: https://codesandbox.io/s/5yzq54p8yl
if anyone's still interested in this... I got that codepen working by inserting
inputNode.focus()
into line 17 in Autocomplete.test.js 👍
Legend. Thank you fo much for this. Saved me a lot of time.
inputNode.focus()
doesn't work for me :(
Has anyone figured out how to test this using react testing library ? I have the same issue where even after focusing or clicking on the input or the combobox, it just doesn't call the onSuggestionsFetchRequested
EDIT: I was able to make it work using userEvent library in my RTL tests to type into the textbox. Did not need the extra input.focus