Why does shallow Rendering not work as expected?

I am using enzyme for test my create-react-app component, but It did not work intuitively. Am I misunderstanding what shallow rendering is?

import React from "react";
import { Card } from "./Card";

const TestUser = () => {
  return (
    <div>
      <div className="test" />
      <div className="wrapper">
        <Card />
        <Card />
        <Card />
      </div>
    </div>
  );
};

export default TestUser;

.test.js

import React from "react";
import TestUser from "./TestUser";
import { shallow } from "enzyme";
import { Card } from "./Card";

it("should render right", () => {
  const component = shallow(<TestUser />);
  expect(component.find(Card)).to.have.length(3);
});

I expect it should pass the test, cause it does have 3 Card components in TestUser

But it output: TypeError: Cannot read property 'have' of undefined

How does that work?