title: fireEvent is calling Found multiple elements by: data-testid error in react-testing-library
body: <p>I'm calling a function by finding the button with the <code>data-testid</code> with <code>"show_more_button"</code></p>
  
  <pre><code>&lt;OurSecondaryButton test={"show_more_button"} onClick={(e) =&gt; showComments(e)} component="span" color="secondary"&gt;
      View {min !== -1 &amp;&amp; min !== -2 ? min : 0} More Comments
  &lt;/OurSecondaryButton&gt;
  </code></pre>
  
  <p>showComments</p>
  
  <pre><code>const showComments = (e) =&gt; {
    e.preventDefault();
    if (inc + 2 &amp;&amp; inc &lt;= the_comments) {
       setShowMore(inc + 2);
       setShowLessFlag(true);
    } else {
       setShowMore(the_comments);
    }
  };
  </code></pre>
  
  <p>which renders this </p>
  
  <pre><code>const showMoreComments = () =&gt; {
      return filterComments.map((comment, i) =&gt; (
          &lt;div data-testid="comment-show-more" key={i}&gt;
              &lt;CommentListContainer ref={ref} comment={comment} openModal={openModal} handleCloseModal={handleCloseModal} isBold={isBold} handleClickOpen={handleClickOpen} {...props} /&gt;
          &lt;/div&gt;
      ));
  };
  </code></pre>
  
  <p>and upon executing fireEvent the function gets called which is good but, im getting the error:</p>
  
  <blockquote>
    <p>TestingLibraryElementError: Found multiple elements by:
    [data-testid="comment-show-more"]</p>
  
  <pre><code>(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).
  </code></pre>
  </blockquote>
  
  <p>There is only one data-testid with "comment-show-more", i doubled checked, this function must be getting triggered multiple times in the same test i guess, Im not sure..</p>
  
  <p><strong>CommentList.test.tsx</strong></p>
  
  <pre><code>   it("should fire show more action", () =&gt; {
        const { getByTestId } = render(&lt;CommentList {...props} /&gt;);
        const showMore = getByTestId("show_more_button");
        fireEvent.click(showMore);
        expect(getByTestId("comment-show-more").firstChild).toBeTruthy();
     });
  </code></pre>
  
  <p><strong>CommentList.test.tsx (full code)</strong></p>
  
  <pre><code>import "@testing-library/jest-dom";
  import React, { Ref } from "react";
  import CommentList from "./CommentList";
  import { render, getByText, queryByText, getAllByTestId, fireEvent } from "@testing-library/react";
  import { Provider } from "react-redux";
  import { store } from "../../../store";
  
  const props = {
      user: {},
      postId: null,
      userId: null,
      currentUser: {},
      ref: {
          current: undefined,
      },
      comments: [
          {
              author: { username: "barnowl", gravatar: "https://api.adorable.io/avatars/400/bf1eed82fbe37add91cb4192e4d14de6.png", bio: null },
              comment_body: "fsfsfsfsfs",
              createdAt: "2020-05-27T14:32:01.682Z",
              gifUrl: "",
              id: 520,
              postId: 28,
              updatedAt: "2020-05-27T14:32:01.682Z",
              userId: 9,
          },
          {
              author: { username: "barnowl", gravatar: "https://api.adorable.io/avatars/400/bf1eed82fbe37add91cb4192e4d14de6.png", bio: null },
              comment_body: "fsfsfsfsfs",
              createdAt: "2020-05-27T14:32:01.682Z",
              gifUrl: "",
              id: 519,
              postId: 27,
              updatedAt: "2020-05-27T14:32:01.682Z",
              userId: 10,
          },
          {
              author: { username: "barnowl2", gravatar: "https://api.adorable.io/avatars/400/bf1eed82fbe37add91cb4192e4d14de6.png", bio: null },
              comment_body: "fsfsfsfsfs",
              createdAt: "2020-05-27T14:32:01.682Z",
              gifUrl: "",
              id: 518,
              postId: 28,
              updatedAt: "2020-05-27T14:32:01.682Z",
              userId: 11,
          },
      ],
      deleteComment: jest.fn(),
  };
  describe("Should render &lt;CommentList/&gt;", () =&gt; {
      it("should render &lt;CommentList/&gt;", () =&gt; {
          const commentList = render(&lt;CommentList {...props} /&gt;);
          expect(commentList).toBeTruthy();
      });
  
      it("should render first comment", () =&gt; {
          const { getByTestId } = render(&lt;CommentList {...props} /&gt;);
          const commentList = getByTestId("comment-list-div");
          expect(commentList.firstChild).toBeTruthy();
      });
  
      it("should render second child", () =&gt; {
          const { getByTestId } = render(&lt;CommentList {...props} /&gt;);
          const commentList = getByTestId("comment-list-div");
          expect(commentList.lastChild).toBeTruthy();
      });
  
      it("should check comments", () =&gt; {
          const rtl = render(&lt;CommentList {...props} /&gt;);
  
          expect(rtl.getByTestId("comment-list-div")).toBeTruthy();
          expect(rtl.getByTestId("comment-list-div")).toBeTruthy();
  
          expect(rtl.getByTestId("comment-list-div").querySelectorAll(".comment").length).toEqual(2);
      });
      // it("should match snapshot", () =&gt; {
      //     const rtl = render(&lt;CommentList {...props} /&gt;);
      //     expect(rtl).toMatchSnapshot();
      // });
  
      it("should check more comments", () =&gt; {
          const { queryByTestId } = render(&lt;CommentList {...props} /&gt;);
          const commentList = queryByTestId("comment-show-more");
          expect(commentList).toBeNull();
      });
  
      it("should fire show more action", () =&gt; {
          const { getByTestId } = render(&lt;CommentList {...props} /&gt;);
          const showMore = getByTestId("show_more_button");
          fireEvent.click(showMore);
          expect(getByTestId("comment-show-more").firstChild).toBeTruthy();
      });
  });
  </code></pre>