added some tests for recent bug fixes

src/extendComponentFn/tests/general.test.tsx

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { create } from 'react-test-renderer';
 import { extendComponentFn } from '../extendComponentFn';
 
@@ -26,3 +27,21 @@ test('destructured props are not passed to the underlying element', () => {
 
   expect(getProps()).toEqual({ tabIndex: -1, hidden: true });
 });
+
+test('extended component only passes information to the specific child components it is responsible for and not all of its children', () => {
+  const Component1 = extendComponentFn('p')<{ children?: ReactNode }>(
+    (P, { children }) => <P>{children}</P>
+  );
+  const Component2 = extendComponentFn('div')((Div) => (
+    <Component1 className="patrick">
+      <Div tabIndex={-1} />
+    </Component1>
+  ));
+
+  const component = create(<Component2 className="hanna" />);
+
+  expect(component.root.findByType('div').props).toEqual({
+    className: 'hanna',
+    tabIndex: -1,
+  });
+});

src/extendComponentFn/tests/prop_merging.test.tsx

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { create } from 'react-test-renderer';
 import { defaultPropsMergeFn } from '../../defaultPropsMergeFn';
 import { MergeFunctionProvider } from '../../MergeFunctionProvider';
@@ -186,3 +187,28 @@ test("extender args merge function overrides merge function provider's merge fun
   );
   expect(getProps()).toEqual({ extenderArgs: '123' });
 });
+
+test("merge functions for specific components are only used by that component and not it's children", () => {
+  const Component1 = extendComponentFn('p')<{ children?: ReactNode }>(
+    (P) => <P />,
+    ({ outerProps }) =>
+      ({
+        fn: 'component1 merge function',
+        children: outerProps.children,
+      } as any)
+  );
+  const Component2 = extendComponentFn('div')(
+    (Div) => (
+      <Component1>
+        <Div />
+      </Component1>
+    ),
+    () => ({ fn: 'component2 merge function' } as any)
+  );
+
+  const component = create(<Component2 />);
+
+  expect(component.root.findByType('div').props).toEqual({
+    fn: 'component2 merge function',
+  });
+});