Fix lint

Author: notwillk

src/__tests__/index.test.tsx

@@ -1,28 +1,31 @@
-import ProviderStack from "index";
-import { PropsWithChildren } from "react";
 import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
+import { PropsWithChildren } from 'react';
 
-function FakeProvider1({children}: PropsWithChildren) {
-  return <div data-testid="1">{children}</div>
+import ProviderStack from 'index';
+
+function FakeProvider1({ children }: PropsWithChildren) {
+  return <div data-testid="1">{children}</div>;
 }
 
-function FakeProvider2({children}: PropsWithChildren) {
-  return <div data-testid="2">{children}</div>
+function FakeProvider2({ children }: PropsWithChildren) {
+  return <div data-testid="2">{children}</div>;
 }
 
-function FakeProvider3({children}: PropsWithChildren) {
-  return <div data-testid="3">{children}</div>
+function FakeProvider3({ children }: PropsWithChildren) {
+  return <div data-testid="3">{children}</div>;
 }
 
 describe('#react-provider-stack', () => {
   it('renders providers in order', async () => {
     const { container, findByTestId } = render(
-      <ProviderStack providers={[FakeProvider1, FakeProvider2, FakeProvider3]}>Hello, World!</ProviderStack>
+      <ProviderStack providers={[FakeProvider1, FakeProvider2, FakeProvider3]}>
+        Hello, World!
+      </ProviderStack>,
     );
-    const $provider1 = await findByTestId("1");
-    const $provider2 = await findByTestId("2");
-    const $provider3 = await findByTestId("3");
+    const $provider1 = await findByTestId('1');
+    const $provider2 = await findByTestId('2');
+    const $provider3 = await findByTestId('3');
 
     expect($provider1).toContainElement($provider2);
     expect($provider2).toContainElement($provider3);
@@ -33,7 +36,9 @@ describe('#react-provider-stack', () => {
 
   it('renders children', async () => {
     const { getByText } = render(
-      <ProviderStack providers={[FakeProvider1, FakeProvider2, FakeProvider3]}>Hello, World!</ProviderStack>
+      <ProviderStack providers={[FakeProvider1, FakeProvider2, FakeProvider3]}>
+        Hello, World!
+      </ProviderStack>,
     );
     expect(getByText('Hello, World!')).toBeVisible();
   });

src/index.tsx

@@ -1,11 +1,30 @@
 import { PropsWithChildren, ReactNode, useMemo } from 'react';
 
 interface ProviderStackProps {
-  children: ReactNode
-  providers: Array<({ children }: PropsWithChildren) => JSX.Element>
+  children: ReactNode;
+  providers: Array<React.FC<PropsWithChildren>>;
 }
 
-export default function ProviderStack({ providers, children }: ProviderStackProps) {
-  const Providers = useMemo(() => providers.reduceRight((Acc, Provider) => () => <Provider><Acc /></Provider>, () => <>{children}</>), [children, providers]);
-  return <Providers />
+export default function ProviderStack({
+  providers,
+  children,
+}: ProviderStackProps) {
+  const Providers = useMemo(
+    () =>
+      providers.reduceRight(
+        (Acc, Provider) =>
+          Object.assign(
+            () => (
+              <Provider>
+                <Acc />
+              </Provider>
+            ),
+            { displayName: Provider.displayName },
+          ),
+        () => <>{children}</>,
+      ),
+    [children, providers],
+  );
+
+  return <Providers />;
 }