omit children prop type from toHaveProps matcher

.changeset/short-teeth-stick.md

@@ -0,0 +1,5 @@
+---
+"react-component-mocker": patch
+---
+
+Omit children prop type from toHaveProps matcher

examples/components/ComponentWithChildren.tsx

@@ -0,0 +1,15 @@
+import type React from 'react';
+
+export type ComponentWithChildrenProps = {
+  onClick: () => void;
+  children: React.ReactNode;
+};
+
+export const ComponentWithChildren: React.FC<ComponentWithChildrenProps> = ({
+  onClick,
+  children,
+}) => (
+  <button type="button" onClick={onClick}>
+    {children}
+  </button>
+);

examples/jest.test.tsx

@@ -1,9 +1,10 @@
 import '@testing-library/jest-dom';
-import { jest, describe, it } from '@jest/globals';
+import { describe, it, jest } from '@jest/globals';
 import { render, screen } from '@testing-library/react';
 import { createMockComponent, getMockComponentProps } from '../src/index.js';
-import { ContainerComponent } from './components/ContainerComponent.js';
+import type { ComponentWithChildren } from './components/ComponentWithChildren.js';
 import type { ComprehensiveComponent } from './components/ComprehensiveComponent.js';
+import { ContainerComponent } from './components/ContainerComponent.js';
 
 jest.mock('./components/ComprehensiveComponent.js', () => ({
   ComprehensiveComponent: createMockComponent('comprehensive-component-mock'),
@@ -134,4 +135,22 @@ describe('ContainerComponent with Jest', () => {
     componentProps.nestingProp.onNestingFn?.();
     expect(onNestingFnMock).toHaveBeenCalled();
   });
+
+  it('should work with components that have required children prop', () => {
+    const MockComponentWithChildren = createMockComponent<
+      typeof ComponentWithChildren
+    >('saved-signature-container');
+
+    render(
+      <MockComponentWithChildren onClick={jest.fn()}>
+        <div>Some content</div>
+      </MockComponentWithChildren>
+    );
+
+    const container = screen.getByTestId('saved-signature-container');
+
+    expect(container).toHaveProps<typeof ComponentWithChildren>({
+      onClick: expect.any(Function),
+    });
+  });
 });

examples/vitest.test.tsx

@@ -1,8 +1,9 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 import { createMockComponent, getMockComponentProps } from '../src/index.js';
-import { ContainerComponent } from './components/ContainerComponent.js';
+import type { ComponentWithChildren } from './components/ComponentWithChildren.js';
 import type { ComprehensiveComponent } from './components/ComprehensiveComponent.js';
+import { ContainerComponent } from './components/ContainerComponent.js';
 
 vi.mock('./components/ComprehensiveComponent.js', () => ({
   ComprehensiveComponent: createMockComponent('comprehensive-component-mock'),
@@ -133,4 +134,22 @@ describe('ContainerComponent', () => {
     componentProps.nestingProp.onNestingFn?.();
     expect(onNestingFnMock).toHaveBeenCalled();
   });
+
+  it('should work with components that have required children prop', () => {
+    const MockComponentWithChildren = createMockComponent<
+      typeof ComponentWithChildren
+    >('saved-signature-container');
+
+    render(
+      <MockComponentWithChildren onClick={vi.fn()}>
+        <div>Some content</div>
+      </MockComponentWithChildren>
+    );
+
+    const container = screen.getByTestId('saved-signature-container');
+
+    expect(container).toHaveProps<typeof ComponentWithChildren>({
+      onClick: expect.any(Function),
+    });
+  });
 });

src/index.ts

@@ -8,7 +8,7 @@ import './customMatchers/toHaveProp.js';
 import type { ComponentProps, ComponentType } from 'react';
 
 type ToHavePropsMatcherType<R> = <TComponent extends ComponentType<any>>(
-  expectedProps?: ComponentProps<TComponent>
+  expectedProps?: Omit<ComponentProps<TComponent>, 'children'>
 ) => R;
 
 type ToHavePropMatcherType<R> = <TComponent extends ComponentType<any>>(