Components: Add createComponent unit tests (#28949)

packages/components/src/ui/utils/test/create-component.js

@@ -0,0 +1,69 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { createRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { createComponent } from '../create-component';
+
+describe( 'createComponent', () => {
+	/**
+	 * @param {import('@wp-g2/create-styles').ViewOwnProps<{}, 'output'>} props
+	 */
+	const useHook = ( props ) => ( { ...props, 'data-hook-test-prop': true } );
+	const name = 'Output';
+	const MemoizedOutput = createComponent( {
+		as: 'output',
+		name,
+		useHook,
+	} );
+	const Output = createComponent( {
+		as: 'output',
+		name,
+		useHook,
+		memo: false,
+	} );
+
+	it( 'should create a output component', () => {
+		const { container } = render(
+			<MemoizedOutput>Example output</MemoizedOutput>
+		);
+
+		expect( container.firstChild.tagName ).toBe( 'OUTPUT' );
+		expect( container.firstChild.innerHTML ).toBe( 'Example output' );
+	} );
+
+	it( 'should create a memoized, ref-forwarded component by default', () => {
+		expect( MemoizedOutput.$$typeof ).toEqual( Symbol.for( 'react.memo' ) );
+		const ref = createRef();
+		const wrapper = render(
+			<MemoizedOutput ref={ ref }>Example output</MemoizedOutput>
+		);
+
+		expect( ref.current ).toEqual( wrapper.container.firstChild );
+	} );
+
+	it( 'should create a non-memoized ref-forwarded ouput component', () => {
+		expect( Output.$$typeof ).toEqual( Symbol.for( 'react.forward_ref' ) );
+		const ref = createRef();
+		const wrapper = render( <Output ref={ ref }>Example output</Output> );
+
+		expect( ref.current ).toEqual( wrapper.container.firstChild );
+	} );
+
+	it( 'should apply the hook to the component props', () => {
+		const { container } = render( <Output>Example output</Output> );
+		expect( container.firstChild.dataset.hookTestProp ).toBe( 'true' );
+	} );
+
+	it( 'should connect the component to its context', () => {
+		expect( MemoizedOutput.__contextSystemKey__ ).toContain( 'Output' );
+	} );
+} );