From 1185eb24625abf6adf31fd8f224595cd2ab7dc3e Mon Sep 17 00:00:00 2001
From: Ian VanSchooten <ian.vanschooten@gmail.com>
Date: Wed, 22 Sep 2021 12:52:17 -0400
Subject: [PATCH 1/2] Add tests for `as` component (failing typescript)

---
 src/ErrorMessage.test.tsx                    | 43 +++++++++++++++++---
 src/__snapshots__/ErrorMessage.test.tsx.snap | 26 +++++++++---
 2 files changed, 57 insertions(+), 12 deletions(-)

diff --git a/src/ErrorMessage.test.tsx b/src/ErrorMessage.test.tsx
index cbe9c8c..4c8636b 100644
--- a/src/ErrorMessage.test.tsx
+++ b/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 />}
diff --git a/src/__snapshots__/ErrorMessage.test.tsx.snap b/src/__snapshots__/ErrorMessage.test.tsx.snap
index 1eee977..f9fc891 100644
--- a/src/__snapshots__/ErrorMessage.test.tsx.snap
+++ b/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

From f0d5c51b3d04006eaa6bf19ed7224a312cbdb0f6 Mon Sep 17 00:00:00 2001
From: Ian VanSchooten <ian.vanschooten@gmail.com>
Date: Wed, 22 Sep 2021 13:02:05 -0400
Subject: [PATCH 2/2] Remove `children` from props of ErrorMessage when using
 component

---
 src/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/types.ts b/src/types.ts
index 4f57c08..5a4426a 100644
--- a/src/types.ts
+++ b/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;