fix(@aws-amplify/ui-react): withAuthenticator returns Component (#5327)

* withAuthenticator should return a Component, not an element

* Fix withAuthenticator stories to return Component

* Add jest testing

* Add missing type for props

* Add withAuthenticator test

* Fix stories to render HoC, not just return it

packages/amplify-ui-react/__tests__/withAuthenticator-test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { withAuthenticator } from '../src/withAuthenticator';
+
+const App = () => <h1>My App</h1>;
+
+describe('withAuthenticator', () => {
+	it('should wrap App with AmplifyAuthenticator', () => {
+		const Wrapped = withAuthenticator(App);
+
+		expect(renderToStaticMarkup(<Wrapped />)).toMatchInlineSnapshot(
+			`"<amplify-authenticator><h1>My App</h1></amplify-authenticator>"`
+		);
+	});
+});

packages/amplify-ui-react/jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+	preset: 'ts-jest',
+	testEnvironment: 'node',
+};

packages/amplify-ui-react/package.json

@@ -11,7 +11,8 @@
 		"url": "https://github.com/aws-amplify/amplify-js.git"
 	},
 	"scripts": {
-		"build-with-test": "npm test && npm run build",
+		"test": "jest",
+    "build-with-test": "npm test && npm run build",
 		"build:cjs": "node ./build es5 && webpack && webpack --config ./webpack.config.dev.js",
 		"build:esm": "node ./build es6",
 		"build:cjs:watch": "node ./build es5 --watch",
@@ -39,13 +40,5 @@
 	"peerDependencies": {
 		"react": "^16.7.0",
 		"react-dom": "^16.7.0"
-	},
-	"jest": {
-		"preset": "ts-jest",
-		"setupTestFrameworkScriptFile": "<rootDir>/jest.setup.js",
-		"testPathIgnorePatterns": [
-			"node_modules",
-			"dist"
-		]
 	}
 }

packages/amplify-ui-react/src/withAuthenticator.tsx

@@ -1,14 +1,20 @@
-import React, { ComponentType, ComponentPropsWithRef } from 'react';
+import React, {
+	ComponentType,
+	ComponentPropsWithRef,
+	FunctionComponent,
+} from 'react';
 
 import { AmplifyAuthenticator } from './';
 
 export function withAuthenticator(
 	Component: ComponentType,
-	props?: ComponentPropsWithRef<typeof AmplifyAuthenticator>
+	authenticatorProps?: ComponentPropsWithRef<typeof AmplifyAuthenticator>
 ) {
-	return (
-		<AmplifyAuthenticator {...props}>
+	const ComponentWithAuthenticator: FunctionComponent = props => (
+		<AmplifyAuthenticator {...authenticatorProps} {...props}>
 			<Component />
 		</AmplifyAuthenticator>
 	);
+
+	return ComponentWithAuthenticator;
 }

packages/amplify-ui-storybook/src/stories/AmplifyAuthenticator.stories.tsx

@@ -162,17 +162,19 @@ export const initialState = () => {
 };
 
 export const BasicWithAuthenticator = () => {
-	return withAuthenticator(App);
+	const Wrapped = withAuthenticator(App);
+
+	return <Wrapped />;
 };
 
 BasicWithAuthenticator.story = {
 	name: 'Basic withAuthenticator',
 };
 
 export const WithAuthenticatorWithUsernameAlias = () => {
-	return withAuthenticator(App, {
-		usernameAlias: 'email',
-	});
+	const Wrapped = withAuthenticator(App, { usernameAlias: 'email' });
+
+	return <Wrapped />;
 };
 
 WithAuthenticatorWithUsernameAlias.story = {