diff --git a/.changeset/short-teeth-stick.md b/.changeset/short-teeth-stick.md new file mode 100644 index 0000000..36ef023 --- /dev/null +++ b/.changeset/short-teeth-stick.md @@ -0,0 +1,5 @@ +--- +"react-component-mocker": patch +--- + +Omit children prop type from toHaveProps matcher diff --git a/examples/components/ComponentWithChildren.tsx b/examples/components/ComponentWithChildren.tsx new file mode 100644 index 0000000..81004e2 --- /dev/null +++ b/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 = ({ + onClick, + children, +}) => ( + +); diff --git a/examples/jest.test.tsx b/examples/jest.test.tsx index 7b5c505..374ea3f 100644 --- a/examples/jest.test.tsx +++ b/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( + +
Some content
+
+ ); + + const container = screen.getByTestId('saved-signature-container'); + + expect(container).toHaveProps({ + onClick: expect.any(Function), + }); + }); }); diff --git a/examples/vitest.test.tsx b/examples/vitest.test.tsx index fe2a830..eae180c 100644 --- a/examples/vitest.test.tsx +++ b/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( + +
Some content
+
+ ); + + const container = screen.getByTestId('saved-signature-container'); + + expect(container).toHaveProps({ + onClick: expect.any(Function), + }); + }); }); diff --git a/src/index.ts b/src/index.ts index 881cc15..f4a00b6 100644 --- a/src/index.ts +++ b/src/index.ts @@ -8,7 +8,7 @@ import './customMatchers/toHaveProp.js'; import type { ComponentProps, ComponentType } from 'react'; type ToHavePropsMatcherType = >( - expectedProps?: ComponentProps + expectedProps?: Omit, 'children'> ) => R; type ToHavePropMatcherType = >(