React testing-libraby not showing complete html - reactjs

Question

Recently started writing test cases for react component with very little knowledge. I have a component which contain a dropdown showing name of the fruits and a add button. After selecting a fruit from the list user have to click on Add button to show that fruit as a card (with name and image) in bottom section. Here 2 things are happening on Add button click -
A new card is added in the bottom section show image of the fruit and name
Selected fruit is removed from the dropdown list.
Sample code here - https://codesandbox.io/s/tender-paper-2i14r?file=/src/App.js
import { useState } from "react";
import "./styles.css";
const Fruits = ["apple", "orange", "banana"];
const FruitList = ({ onChange, fruitList = [] }) => {
return (
<select onChange={onChange} aria-label="selectFruitFromList">
<option selected>Select fruit</option>
{fruitList.map((fruit) => (
<option value={fruit}>{fruit}</option>
))}
</select>
);
};
const SelectedFruit = ({ selectedFruit }) => {
return (
<ul>
{selectedFruit.map((item) => (
<li aria-label="selectedFruits">{item}</li>
))}
</ul>
);
};
export default function App() {
const [selected, setSelected] = useState();
const [fruitList, setFruitList] = useState(Fruits);
const [selectedFruit, setSelectedFruit] = useState([]);
const addFruitToTray = () => {
setSelectedFruit([...selectedFruit, selected]);
setFruitList(fruitList.filter((item) => item != selected));
setSelected("");
};
return (
<div className="App">
<h1 aria-label="hello">Hello CodeSandbox</h1>
<div>
<FruitList
onChange={(e) => setSelected(e.target.value)}
fruitList={fruitList}
/>
<button
onClick={addFruitToTray}
disabled={selected ? false : true}
aria-label="AddFruit"
>
Add
</button>
</div>
<div>
<SelectedFruit selectedFruit={selectedFruit} />
</div>
</div>
);
}
test("Select fruit and Add", ()=> {
const { debug } = render( <App/> );
await userEvent.selectOptions(screen.getByLabelText('selectFruitFromList'), 'apple' )
expect(screen.getByLabelText('AddFruit').disabled).toBeFalsy()
await userEvent.click(screen.getByLabelText('AddFruit'))
await userEvent.selectOptions(screen.getByLabelText('selectFruitFromList'), 'banana' )
await userEvent.click(screen.getByLabelText('AddFruit'))
debug()
// Test fails here
await waitFor(() => {
expect(screen.getAllByLabelText('selectedFruits')).toBeInTheDocument();
});
})
Problem -
It fails on my last test where I'm checking li for added fruits. I have check it with debug and the HTML shows empty <ul> tag (means no <li> created). The debug error shows TestingLibraryElementError: Unable to find a label with the text of: selectedFruits
Another point I see all 3 items in the dropdown element in debug html. Ideally it shouldn't be as when we click on Add button that item gets removed from dropdown.
Any help will be appreciated. Thank you.

Answer 1

I have generated new test project with npm init react-app testing and i have tried your code. It gives this error:
expect(received).toBeInTheDocument()
received value must be an HTMLElement or an SVGElement.
Received has type: array
Received has value: [<li aria-label="selectedFruits">apple</li>, <li aria-label="selectedFruits">banana</li>]
In order to make it work use .toHaveLength(2) assertation. I have tried the same in codesandbox, but for some reason I could not make it work.
For more assert methods, this is good place to look: https://github.com/testing-library/jest-dom