React: Enzyme shallow: "Expected: 1; Received: undefined

I am using React-typescript for my app. I am really new in testing world. I have created two components. Then I am imported the components to the App component. I am using Enzyme's shallow for testing the component. I am watching one tutorial from udemy. I followed the test code exactly as it is in video. But my test failed.

This is my app component

import React from 'react';
import CommentBox from './components/commentbox';
import CommentList from './components/commentlist'

function App() {
  return (
    <div className="App">
      <CommentBox />
      <CommentList />
    </div>
  );
}

export default App;

This is my test

import { cleanup } from '@testing-library/react';
import App from '../App';
import CommentBox from '../components/commentbox';

describe('whole app component', () => {
  afterEach(cleanup)
  it('renders Comment Box component', () => {
    const wrapped = shallow(<App />);
    expect(wrapped.find(CommentBox).lenght).toEqual(1) //I Received Undefined
  });
});