如何测试点击事件

Question

我是React.js的新手，并且将React.js与Redux结合使用来构建一个小型投资组合应用程序，用户可以在其中搜索股票并将其添加到投资组合列表中。

我有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>
    );
  }

}

搜索结果

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 方法查找搜索结果返回0吗？！