To mock the useSearchParams
hook from react-router-dom
, you can use Jest’s mock
function to provide a mocked implementation for the hook. For example:
Consider we’ve a URL with an `id` as a search parameter
https://example.com/?id=1234
In order to get the value of the id in React component, you’d use useSearchParams
hook from react-router-dom
, as the following:
function MyComponent() {
const params = useSearchParams();
const id = params[0].get('id');
return <div data-testid="search-query-id-parameter">{id}</div>;
}
Now to be able to mock useSearchParams
hook, we need to mock it using jest.mock function as the following:
jest.mock('react-router-dom', () => {
const originalModule = jest.requireActual('react-router-dom');
return {
...originalModule,
useSearchParams: () => [new URLSearchParams({ id: '1234' })],
};
});
then, you can you can query the UI by data-testid
attribute, and assert if the search query parameter match the value you provided to the mocked hook.
// MyComponent.test.js
import { render, screen } from '@testing-library/react';
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useSearchParams: () => [new URLSearchParams({ id: '123' })],
}));
describe('Component.js', () => {
it('renders', () => {
render(<MyComponent />);
expect(screen.queryByTestId('search-query-id-parameter')).toHaveTextContent('123');
});
});
Don’t do this. Instead wrap your component in a and feed it the proper state. React Test Library’s motto is to test the app the way a user would.