Building robust React apps means trusting your UI library and your tests. With RetroUI’s type-safe components and Jest, you can nail component props verification every time. Let’s dive in.

Why Component Props Verification Matters

When you share data from parent to child in React, props are the handshake that keeps your UI in sync. But what if you pass the wrong value? A typo in a prop name. A boolean switched off. Cue a silent bug.

Here’s why you want solid component props verification:

Catch mistakes early.
Keep your UI library rock-solid.
Boost confidence in refactors.

Think of it like a safety net. You write a test, Jest runs it, and you know your RetroUI Button, Input or Avatar got exactly the data it needs.

Setting Up RetroUI with Jest

First, make sure you have RetroUI installed. If you’re on the free track, grab our Open Source Components. Need templates and Figma kits? Upgrade to RetroUI Pro for 100+ blocks.

Install packages:

npm install @retroui/react jest @testing-library/react

Add a simple Jest config (jest.config.js):

module.exports = {
  testEnvironment: 'jsdom',
  moduleNameMapper: {
    '^@retroui/(.*)$': '<rootDir>/node_modules/@retroui/$1'
  }
};

Voilà. You’re ready to test.

Mocking a RetroUI Child for Props Verification

Imagine you have a Dashboard that renders a RetroUI Button when isReady is true. You want to confirm the right label and handler arrive at the button.

Dashboard.jsx:

import React from 'react';
import { Button } from '@retroui/react';

export const Dashboard = ({ isReady, onClick }) => (
  <div>
    <h1>Control Panel</h1>
    {isReady && <Button label="Launch" onClick={onClick} />}
  </div>
);

Here’s a test sketch focusing on component props verification:

import React from 'react';
import { render } from '@testing-library/react';
import { Dashboard } from './Dashboard';

const mockButton = jest.fn();

jest.mock('@retroui/react', () => ({
  Button: props => {
    mockButton(props);
    return <button data-testid="mock-btn" />;
  }
}));

test('passes label and onClick to RetroUI Button', () => {
  const clickHandler = jest.fn();
  render(<Dashboard isReady onClick={clickHandler} />);
  expect(mockButton).toHaveBeenCalledWith(
    expect.objectContaining({
      label: 'Launch',
      onClick: clickHandler
    })
  );
});

That’s it. We’ve isolated the child, captured props, and confirmed everything lined up. Perfect component props verification.

Breaking Down the Steps

Mock the Component
Use jest.mock to intercept the RetroUI Button.
Capture Props
A jest.fn() records each render call.
Render Parent
Call render(<Dashboard … />) from React Testing Library.
Assert on Props
expect(mockButton).toHaveBeenCalledWith(...) does the heavy lifting.

Tip: Use expect.objectContaining to ignore default props like key or ref.

Benefits of Type-Safe RetroUI in Your Tests

RetroUI isn’t just pretty — it’s type-safe. That means:

Props mismatch at compile time.
Fewer surprises in tests.
Cleaner code and easier maintenance.

Whether you rely on Open Source Components or the full RetroUI Pro suite, types keep everything in check. Your component props verification process gets a boost because your IDE and compiler catch issues before Jest even runs.

Real-World Example: Verifying an Input Component

Say you have a form with a TextInput from RetroUI. You want to ensure value and placeholder are passed correctly.

import React from 'react';
import { TextInput } from '@retroui/react';

export const SearchForm = ({ query, onChange }) => (
  <TextInput value={query} placeholder="Search..." onChange={onChange} />
);

Your test snippet:

import { render } from '@testing-library/react';
import { SearchForm } from './SearchForm';

const mockInput = jest.fn();

jest.mock('@retroui/react', () => ({
  TextInput: props => {
    mockInput(props);
    return <input data-testid="mock-input" />;
  }
}));

test('passes value and placeholder to TextInput', () => {
  const changeHandler = () => {};
  render(<SearchForm query="Retro" onChange={changeHandler} />);
  expect(mockInput).toHaveBeenCalledWith(
    expect.objectContaining({
      value: 'Retro',
      placeholder: 'Search...'
    })
  );
});

Again, straightforward component props verification — this time on a form element.

Wrapping Up

Component props verification doesn’t have to be a headache. With RetroUI’s modern, type-safe React library and a few Jest tricks, you’ll ship reliable UIs without second-guessing your data flow.

Give your tests a boost:

Mock RetroUI children.
Capture their props.
Assert with expect.objectContaining.

Done. No brittle selectors. No deep DOM querying. Just clear, fast, reliable tests.

Ready to make your React testing smoother? Head over to RetroUI and start verifying props with confidence today!