# React vitest, testing children prop

**URL:** https://forum.codewithmosh.com/t/react-vitest-testing-children-prop/25392
**Category:** React
**Created:** [February 29, 2024, 4:52pm UTC](https://forum.codewithmosh.com/t/react-vitest-testing-children-prop/25392 "2024-02-29T16:52:57Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![scubafred](https://avatars.discourse-cdn.com/v4/letter/s/8c91f0/32.png) [@scubafred](https://forum.codewithmosh.com/u/scubafred)
#### Post date: [February 29, 2024, 4:52pm UTC](https://forum.codewithmosh.com/t/react-vitest-testing-children-prop/25392/1 "2024-02-29T16:52:57Z")

</div>

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

Is this correct?

Thanks in advance 🫡

```auto
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;

```

```auto
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();
  });
});

```