Merge pull request #87 from IanVS/children-typescript

Remove `children` from props of ErrorMessage when using component

Author: bluebill1049

src/ErrorMessage.test.tsx

@@ -45,7 +45,7 @@ describe('ErrorMessage', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  it('should render correctly with flat errors and as with component and render', () => {
+  it('should render correctly with flat errors and as with element and render', () => {
     const { asFragment } = render(
       <ErrorMessage
         as={<span />}
@@ -58,7 +58,7 @@ describe('ErrorMessage', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  it('should render correctly with flat errors and as with component and className and render', () => {
+  it('should render correctly with flat errors and as with element and className and render', () => {
     const { asFragment } = render(
       <ErrorMessage
         as={<span />}
@@ -72,6 +72,37 @@ describe('ErrorMessage', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  it('should render correctly with flat errors and as with component', () => {
+    function CustErrComp({ children }: { children: React.ReactNode }) {
+      return <div>{children}</div>;
+    }
+    const { asFragment } = render(
+      <ErrorMessage
+        as={CustErrComp}
+        errors={{ flat: { type: 'flat', message: 'flat' } }}
+        name="flat"
+      />,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render correctly with flat errors and as with component and render', () => {
+    function CustErrComp({ children }: { children: React.ReactNode }) {
+      return <div>{children}</div>;
+    }
+    const { asFragment } = render(
+      <ErrorMessage
+        as={CustErrComp}
+        errors={{ flat: { type: 'flat', message: 'flat' } }}
+        name="flat"
+        render={({ message }) => message}
+      />,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
   it('should render correctly with flat multiple errors and render', () => {
     const { asFragment } = render(
       <ErrorMessage
@@ -99,7 +130,7 @@ describe('ErrorMessage', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  it('should render correctly with flat multiple errors and as with component and render', () => {
+  it('should render correctly with flat multiple errors and as with element and render', () => {
     const { asFragment } = render(
       <ErrorMessage
         as={<div />}
@@ -204,7 +235,7 @@ describe('ErrorMessage', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  it('should render correctly with nested multiple errors and as with component and render', () => {
+  it('should render correctly with nested multiple errors and as with element and render', () => {
     const { asFragment } = render(
       <ErrorMessage
         as={<div />}
@@ -269,7 +300,7 @@ describe('ErrorMessage', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  it('should render correctly with nested errors array and as with component and render', () => {
+  it('should render correctly with nested errors array and as with element and render', () => {
     const { asFragment } = render(
       <ErrorMessage
         as={<span />}
@@ -319,7 +350,7 @@ describe('ErrorMessage', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  it('should render correctly with nested multiple errors array and as with component and render', () => {
+  it('should render correctly with nested multiple errors array and as with element and render', () => {
     const { asFragment } = render(
       <ErrorMessage
         as={<div />}

src/__snapshots__/ErrorMessage.test.tsx.snap

@@ -8,7 +8,21 @@ exports[`ErrorMessage should render correctly with flat errors 1`] = `
 </DocumentFragment>
 `;
 
-exports[`ErrorMessage should render correctly with flat errors and as with component and className and render 1`] = `
+exports[`ErrorMessage should render correctly with flat errors and as with component 1`] = `
+<DocumentFragment>
+  <div>
+    flat
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ErrorMessage should render correctly with flat errors and as with component and render 1`] = `
+<DocumentFragment>
+  flat
+</DocumentFragment>
+`;
+
+exports[`ErrorMessage should render correctly with flat errors and as with element and className and render 1`] = `
 <DocumentFragment>
   <span
     class="test"
@@ -18,7 +32,7 @@ exports[`ErrorMessage should render correctly with flat errors and as with compo
 </DocumentFragment>
 `;
 
-exports[`ErrorMessage should render correctly with flat errors and as with component and render 1`] = `
+exports[`ErrorMessage should render correctly with flat errors and as with element and render 1`] = `
 <DocumentFragment>
   <span>
     flat
@@ -44,7 +58,7 @@ exports[`ErrorMessage should render correctly with flat errors and as with strin
 </DocumentFragment>
 `;
 
-exports[`ErrorMessage should render correctly with flat multiple errors and as with component and render 1`] = `
+exports[`ErrorMessage should render correctly with flat multiple errors and as with element and render 1`] = `
 <DocumentFragment>
   <div>
     flat
@@ -86,7 +100,7 @@ exports[`ErrorMessage should render correctly with nested errors array 1`] = `
 </DocumentFragment>
 `;
 
-exports[`ErrorMessage should render correctly with nested errors array and as with component and render 1`] = `
+exports[`ErrorMessage should render correctly with nested errors array and as with element and render 1`] = `
 <DocumentFragment>
   <span>
     array
@@ -116,7 +130,7 @@ exports[`ErrorMessage should render correctly with nested errors object and as w
 </DocumentFragment>
 `;
 
-exports[`ErrorMessage should render correctly with nested multiple errors and as with component and render 1`] = `
+exports[`ErrorMessage should render correctly with nested multiple errors and as with element and render 1`] = `
 <DocumentFragment>
   <div>
     object
@@ -138,7 +152,7 @@ exports[`ErrorMessage should render correctly with nested multiple errors and re
 </DocumentFragment>
 `;
 
-exports[`ErrorMessage should render correctly with nested multiple errors array and as with component and render 1`] = `
+exports[`ErrorMessage should render correctly with nested multiple errors array and as with element and render 1`] = `
 <DocumentFragment>
   <div>
     array

src/types.ts

@@ -17,7 +17,7 @@ type AsProps<TAs> = TAs extends undefined
   : TAs extends React.ReactElement
   ? Record<string, any>
   : TAs extends React.ComponentType<infer P>
-  ? P
+  ? Omit<P, 'children'>
   : TAs extends keyof JSX.IntrinsicElements
   ? JSX.IntrinsicElements[TAs]
   : never;