React vitest, testing children prop

React
1

I did the tutorial for vitest but i didn’t see any example how to test children props.

Is this correct?

Thanks in advance :saluting_face:

const DangerZone = ({ children }) => {
  return (
    <div className="w-2/3 my-4 bg-white border-2 border-error shadow-around rounded-2xl">
      <div className="flex items-center justify-between p-3">
        <p className="text-error">Danger Zone</p>
        {children}
      </div>
    </div>
  );
};

export default DangerZone;


import { render, screen } from "@testing-library/react";
import DangerZone from "../../../src/components/DangerZone";

describe("DangerZone", () => {
  it("should render with correct text and children", () => {
    render(<DangerZone />);

    expect(screen.getByText(/danger zone/i)).toBeInTheDocument();
  });

  it("should render children  when children prop is provided", () => {
    render(<DangerZone children={<p>Children</p>} />);

    expect(screen.getByText(/children/i)).toBeInTheDocument();
  });

  it("should not render children  when children prop is not provided", () => {
    render(<DangerZone />);

    expect(screen.queryByText(/children/i)).toBeNull();
  });
});