Test nested components in react using jest

I am new in react and just started learning learning . I want to write a test using react jest for my nested component

const data= {
    bannerTitle: 'storingData',
    image: 'https//:google.png',
    title: 'Benefits',
    content: 'demodata'
}
// ----------------------------------------------------------------------

export default function Content() {
    return (
        <StaticContent data={data} pageTitle='storingData' data-testid="benifits"></StaticContent>
    );
}

where StaticContent have some other nested component like breadcrums, footer etc

My page.test.js page I am trying to built like this.

import { render, screen } from "@testing-library/react";
import Content from '../pages/Content';
import React from 'react';

    const data= {
        bannerTitle: 'storingData',
        image: 'https//:google.png',
        title: 'Benefits',
        content: 'demodata'
    }
//test block
test("renders content correctly", () => {

    render(<Content/>);

//select the elements you want to interact with
    const staticContents = screen.getByTestId("benifits");

//assert the expected result
    expect(staticContents).toHaveTextContent(data);
}); 

I don't know if I am doing correctly or not .Thanks in advance for the help . Also if anyone can suggest from where I could learn react automated test functionalities it would be great for me .