Как проверить реагирование на событие клика

Question

Я новичок в React. js и использую React. js с Redux для создания небольшого приложения для портфолио, где пользователи могут искать акции и добавлять их в список портфолио.

I имеют компоненты SearchInput, SearchResults и Portfolio и пытаются написать тест для выбора результата поиска из компонента SearchResults.

Портфолио

export class Portfolio extends React.Component<IPortfolioProps> {
   ...

render() {
    let { searchResults } = this.state;
    let portfolioItems = this.getPortfolioItems();

    return (
      <div data-test="portfolio-comp" className="portfolio">
        <SearchInput
          type="text"
          placeholder="Search..."
          value=""
          onChange={this.search}
          clear$={this.clearSearchResultEvent}
        />
        <SearchResults
          results={searchResults}
          select={this.selectSearchResult}
          displayKey="name"
          keyId="id"
        />
        {(portfolioItems.length && portfolioItems) || ""}
      </div>
    );
  }

}

SearchResults

export function SearchResults(props: ISearchResultsProps) {
  const items = props.results.map(item => (
    <div
      data-test="search-result"
      className="result"
      key={item[props.keyId]}
      onClick={() => {
        props.select(item);
      }}
    >
      <span>{item[props.displayKey]}</span>
    </div>
  ));
  return items.length ? <div className="search-results">{items}</div> : <div></div>;
}

Тест

describe("Connected Portfolio Component", () => {
    let props: IPortfolioProps;

    beforeEach(() => {
      props = {
        portfolio: [],
        stocks: [
          {
            id: 1,
            name: "Tesco"
          },

          {
            id: 2,
            name: "Next"
          }
        ]
      };
    });
    function setup(storeOptions = props) {
      const mockStore = configureMockStore();
      const store = mockStore(storeOptions);

      const wrapper = mount(
        <Provider store={store}>
          <ConnectedPortfolio />
        </Provider>
      );

      return wrapper;
    }
it.only("Should add stock to portfolio as expected", async done => {
      const wrapper = setup();

      let searchComp = wrapper.find("SearchInput");
      searchComp.find("input").simulate("change", { target: { value: "Tesco" } });
      setTimeout(() => {
        let searchResultsComp = wrapper.find("SearchResults");
        console.log('searchResultsComp', searchResultsComp.html());
 /* searchResultsComp <div class="search-results"><div data-test="search-result" class="result"><span>Tesco</span></div></div> */

        let results = searchResultsComp.find(".result");
        expect(results.length).toEqual(1); /*<--- Error */

        done();
      }, 200);
    });

Мне интересно, почему searchResultsComp. html () выводит полный обработанный html, но поиск результата поиска с использованием метода .find return 0?!