feat: Mocked elements can now be configured with a custom element

resolves #5

Author: prowe

README.md

@@ -45,4 +45,10 @@ This library compliments `@testing-library/react` to make it easy to setup and m
     expect(getMockComponent(MyChildComponent).props.open).toBe(true);
     ```
 
-    *Note:* this way of testing ensures that the component is **currently** rendered with the provided value. Jest's `toHaveBeenCalledWith` would only test that was ever rendered with the expected value.
+    *Note:* this way of testing ensures that the component is **currently** rendered with the provided value. Jest's `toHaveBeenCalledWith` would only test that was ever rendered with the expected value.
+
+### Customization
+
+`setupMockComponent` takes an options argument that can change the behavior of the mock.
+
+To change the element used from a div, pass the element name. This is useful when the mock is used in a place where only certain elements are valid (ex. a child of a `tbody` must be a `tr`)

src/customizations.spec.tsx

@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { setupMockComponent, getByMockComponent } from './index';
+import MockedComponent from './test-components/MockedComponent';
+
+jest.mock('./test-components/MockedComponent');
+
+it('should use a custom element', () => {
+    setupMockComponent(MockedComponent, {element: 'tr'});
+
+    render(<table><tbody><MockedComponent /></tbody></table>);
+
+    expect(getByMockComponent(MockedComponent).tagName).toEqual('TR');
+});

src/setupMockComponent.tsx

@@ -1,4 +1,4 @@
-import React, { RefCallback, useEffect, useRef } from "react";
+import React, { ReactHTML, RefCallback, useEffect, useRef } from "react";
 import { FC } from "react";
 
 export type MockedComponent<PropType> = jest.MockedFunction<FC<PropType>>;
@@ -16,25 +16,38 @@ function ensureIsMock<PropType>(mockedComponent: FC<PropType>) {
     }
 }
 
-export function setupMockComponent<PropType>(mockedComponent: FC<PropType>) {
-    ensureIsMock(mockedComponent);
+export interface MockComponentOptions {
+    /**
+     * The react element generated by the mock. `div` by default.
+     */
+    element?: keyof ReactHTML;
+}
 
-    const comp = mockedComponent as MockedComponent<PropType>;
-    comp.mockImplementation((props: PropType) => {
+export function setupMockComponent<PropType>(mockedComponent: FC<PropType>, options?: MockComponentOptions) {
+    ensureIsMock(mockedComponent);
+    
+    const mockImplementation: FC<PropType> = (props) => {
         const mockedElmentRef = useRef<MockedElement<PropType> | null>(null);
         useEffect(() => {
             if (mockedElmentRef.current) {
                 mockedElmentRef.current.props = props;
             }
         }, [props]);
-        const refCallback: RefCallback<HTMLDivElement> = (el) => {
+
+        const ref: RefCallback<HTMLDivElement> = (el) => {
             mockedElmentRef.current = el as unknown as MockedElement<PropType>;
             if (mockedElmentRef.current) {
                 mockedElmentRef.current.component = comp;
             }
         };
-        return (
-            <div ref={refCallback} data-testid={mockElementTestId} />
-        );
-    });
+
+        const type: keyof ReactHTML = options?.element ?? 'div';
+        return React.createElement(type, {
+            ref,
+            'data-testid': mockElementTestId,
+        });
+    };
+
+    const comp = mockedComponent as MockedComponent<PropType>;
+    comp.mockImplementation(mockImplementation);
 }