fix(clerk-react): Avoid error on useRoutingOptions() when path pa…

…ssed from options (#2514)
clerk · Jan 9, 2024 · e9841dd · e9841dd
1 parent f6e8f3a
commit e9841dd
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 1 deletion.
diff --git a/.changeset/spotty-nails-double.md b/.changeset/spotty-nails-double.md
@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-react': patch
+---
+
+Fixes error thrown for missing path & routing props when path was passed from context.
+This change affects  components `<SignIn />`, `<SignUp />` from `@clerk/nextjs` and `@clerk/remix`.
diff --git a/packages/react/src/hooks/__tests__/__snapshots__/useRoutingProps.test.tsx.snap b/packages/react/src/hooks/__tests__/__snapshots__/useRoutingProps.test.tsx.snap
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`useRoutingProps() returns passed props and options for routing different than path 1`] = `
+<body>
+  <div>
+    <div>
+      {"routing":"virtual","prop1":"1","prop2":"2"}
+    </div>
+  </div>
+</body>
+`;
+
+exports[`useRoutingProps() returns passed props and options if path is passed from routing options 1`] = `
+<body>
+  <div>
+    <div>
+      {"path":"/aloha","prop1":"1","prop2":"2"}
+    </div>
+  </div>
+</body>
+`;
+
+exports[`useRoutingProps() returns path routing with passed props and options if path prop is passed 1`] = `
+<body>
+  <div>
+    <div>
+      {"path":"/aloha","prop1":"1","prop2":"2","routing":"path"}
+    </div>
+  </div>
+</body>
+`;
diff --git a/packages/react/src/hooks/__tests__/useRoutingProps.test.tsx b/packages/react/src/hooks/__tests__/useRoutingProps.test.tsx
@@ -0,0 +1,74 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import { useRoutingProps } from '../useRoutingProps';
+
+const originalError = console.error;
+
+describe('useRoutingProps()', () => {
+  beforeAll(() => {
+    console.error = jest.fn();
+  });
+
+  afterAll(() => {
+    console.error = originalError;
+  });
+
+  it('throws error without routing & path props', () => {
+    const TestingComponent = props => {
+      const options = useRoutingProps('TestingComponent', props);
+      return <div>{JSON.stringify(options)}</div>;
+    };
+
+    expect(() => {
+      render(<TestingComponent />);
+    }).toThrowError('<TestingComponent/> is missing a path prop to work with path based routing');
+  });
+
+  it('returns path routing with passed props and options if path prop is passed', () => {
+    const TestingComponent = props => {
+      const options = useRoutingProps('TestingComponent', props);
+      return <div>{JSON.stringify(options)}</div>;
+    };
+
+    const { baseElement } = render(
+      <TestingComponent
+        path='/aloha'
+        prop1='1'
+        prop2='2'
+      />,
+    );
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('returns passed props and options for routing different than path', () => {
+    const TestingComponent = props => {
+      const options = useRoutingProps('TestingComponent', props);
+      return <div>{JSON.stringify(options)}</div>;
+    };
+
+    const { baseElement } = render(
+      <TestingComponent
+        routing='virtual'
+        prop1='1'
+        prop2='2'
+      />,
+    );
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('returns passed props and options if path is passed from routing options', () => {
+    const TestingComponent = props => {
+      const options = useRoutingProps('TestingComponent', props, { path: '/aloha' });
+      return <div>{JSON.stringify(options)}</div>;
+    };
+
+    const { baseElement } = render(
+      <TestingComponent
+        prop1='1'
+        prop2='2'
+      />,
+    );
+    expect(baseElement).toMatchSnapshot();
+  });
+});
diff --git a/packages/react/src/hooks/useRoutingProps.ts b/packages/react/src/hooks/useRoutingProps.ts
@@ -8,7 +8,8 @@ export function useRoutingProps<T extends RoutingOptions>(
   props: T,
   routingOptions?: RoutingOptions,
 ): T {
-  if (!props.path && !props.routing) {
+  const path = routingOptions?.path || props.path;
+  if (!path && !props.routing) {
     errorThrower.throw(noPathProvidedError(componentName));
   }