diff --git a/.changeset/spotty-nails-double.md b/.changeset/spotty-nails-double.md new file mode 100644 index 00000000000..6f8019409f1 --- /dev/null +++ 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 ``, `` from `@clerk/nextjs` and `@clerk/remix`. \ No newline at end of file diff --git a/packages/react/src/hooks/__tests__/__snapshots__/useRoutingProps.test.tsx.snap b/packages/react/src/hooks/__tests__/__snapshots__/useRoutingProps.test.tsx.snap new file mode 100644 index 00000000000..6a3c65cd32b --- /dev/null +++ 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`] = ` + +
+
+ {"routing":"virtual","prop1":"1","prop2":"2"} +
+
+ +`; + +exports[`useRoutingProps() returns passed props and options if path is passed from routing options 1`] = ` + +
+
+ {"path":"/aloha","prop1":"1","prop2":"2"} +
+
+ +`; + +exports[`useRoutingProps() returns path routing with passed props and options if path prop is passed 1`] = ` + +
+
+ {"path":"/aloha","prop1":"1","prop2":"2","routing":"path"} +
+
+ +`; diff --git a/packages/react/src/hooks/__tests__/useRoutingProps.test.tsx b/packages/react/src/hooks/__tests__/useRoutingProps.test.tsx new file mode 100644 index 00000000000..cfed6f065cd --- /dev/null +++ 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
{JSON.stringify(options)}
; + }; + + expect(() => { + render(); + }).toThrowError(' 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
{JSON.stringify(options)}
; + }; + + const { baseElement } = render( + , + ); + expect(baseElement).toMatchSnapshot(); + }); + + it('returns passed props and options for routing different than path', () => { + const TestingComponent = props => { + const options = useRoutingProps('TestingComponent', props); + return
{JSON.stringify(options)}
; + }; + + const { baseElement } = render( + , + ); + 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
{JSON.stringify(options)}
; + }; + + const { baseElement } = render( + , + ); + expect(baseElement).toMatchSnapshot(); + }); +}); diff --git a/packages/react/src/hooks/useRoutingProps.ts b/packages/react/src/hooks/useRoutingProps.ts index 94fb8339f0a..e3eac284719 100644 --- a/packages/react/src/hooks/useRoutingProps.ts +++ b/packages/react/src/hooks/useRoutingProps.ts @@ -8,7 +8,8 @@ export function useRoutingProps( props: T, routingOptions?: RoutingOptions, ): T { - if (!props.path && !props.routing) { + const path = routingOptions?.path || props.path; + if (!path && !props.routing) { errorThrower.throw(noPathProvidedError(componentName)); }