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 .