title: Why does my unit test return 'cannot read property 'simulate' of undefined' in this React test?
body: <p>I have an app which renders several cards by mapping an array object. Each card has a button, on click it increases the item cost. Here is a working example: <a href="https://codesandbox.io/s/flamboyant-goodall-8no6x" rel="nofollow noreferrer">https://codesandbox.io/s/flamboyant-goodall-8no6x</a></p>
  <p>Here is the code:</p>
  <p>Home.js:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const cards = [
    {
      id: 1,
      title: "car",
      price: 10
    },
    {
      id: 2,
      title: "bike",
      price: 20
    },
    {
      id: 3,
      title: "plane",
      price: 30
    }
  ];
  
  const Home = () =&gt; {
    const [totalPrice, setTotalPrice] = useState([]);
  
    const handleClick = (id, qty) =&gt; {
      let newState = [...totalPrice];
      if (newState.find((item) =&gt; item.id === id) !== undefined) {
        newState.find((item) =&gt; item.id === id).qty += qty;
      } else {
        newState.push({ id: id, qty: qty });
      }
      setTotalPrice(newState);
    };
  
    return cards.map((d) =&gt; {
      const stateItem = totalPrice.find((item) =&gt; item.id === d.id); 
      const qty = stateItem ? stateItem.qty : 0; 
      return (
        &lt;Card
          key={d.id}
          id={d.id}
          testid={d.id}
          title={d.title}
          price={d.price}
          totalPrice={d.price * qty}
          handleClick={handleClick}
        /&gt;
      );
    });
  };
  
  export default Home;</code></pre>
  </div>
  </div>
  </p>
  <p>Card.js</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from "react";
  
  const Card = ({ id, testid, title, price, totalPrice, handleClick }) =&gt; {
    return (
      &lt;&gt;
        &lt;div key={id} data-testid={testid}&gt;
          &lt;p&gt;
            {id}. {title}
          &lt;/p&gt;
          &lt;p&gt;Price: {price}&lt;/p&gt;
          &lt;p className="total-price"&gt;{totalPrice}&lt;/p&gt;
          &lt;button className="add" onClick={() =&gt; handleClick(id, 1)}&gt;
            Add 1
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );
  };
  
  export default Card;</code></pre>
  </div>
  </div>
  </p>
  <p>Now I want to test <code>Home.js</code> functionality in a black box. My idea is simple: find all buttons with 'add' class, find the first element and simulate clicking it, test if the text of that card is 10.</p>
  <p>Here is the <code>Home.test.js</code>:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from "react";
  import Adapter from "enzyme-adapter-react-16";
  import { shallow, configure } from "enzyme";
  import Home from "./Home";
  import { render } from "@testing-library/react";
  
  configure({ adapter: new Adapter() });
  
  describe("Test functions", () =&gt; {
    it("should display the correct button to be tested", () =&gt; {
      const { getByTestId } = render(&lt;Home /&gt;);
      expect(getByTestId("1")).toBeTruthy();
    });
  
    it("should display the correct cost when add button is clicked", () =&gt; {
      const wrapper = shallow(&lt;Home /&gt;);
      const buttons = wrapper.find(".add");
      buttons[0].simulate("click");
      expect(wrapper.find(".total-price")[0].text()).toBe("10");
    });
  });</code></pre>
  </div>
  </div>
  </p>
  <p>It gives me <code>TypeError: Cannot read property 'simulate' of undefined</code>, I don't understand why no button was found, how can I find the correct node and test on it?</p>