Skip to content

fix(clerk-react): Avoid error on useRoutingOptions() when path passed from options #2514

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dimkl merged 1 commit into from
Jan 9, 2024
Merged

fix(clerk-react): Avoid error on useRoutingOptions() when path passed from options #2514

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/spotty-nails-double.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`.
31 changes: 31 additions & 0 deletions packages/react/src/hooks/__tests__/__snapshots__/useRoutingProps.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
`;
74 changes: 74 additions & 0 deletions packages/react/src/hooks/__tests__/useRoutingProps.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
});
});
3 changes: 2 additions & 1 deletion packages/react/src/hooks/useRoutingProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}

Expand Down