wouter
wouter copied to clipboard
molefrog
Memory location does not include a search hook
When using memory location for testing purposes, query params returned by useSearch are ignored:
import { render, screen } from '@testing-library/react';
import { Router, useSearch, useLocation } from 'wouter';
import { memoryLocation } from 'wouter/memory-location';
function App() {
const [location] = useLocation();
const search = useSearch();
return (
<div data-testid="test">
search is {search}, location is {location}
</div>
);
}
test('Test router', () => {
const loc = memoryLocation({ path: '/foo?key=value' });
render(
<Router hook={loc.hook}>
<App />
</Router>,
);
// This fails -- we get 'search is , location is /foo?key=value' instead
expect(screen.getByTestId('test')).toEqual(
'search is ?key=value, location is /foo?key=value',
);
});
I assume this happens because no searchHook is passed to Router here, but memoryLocation does not appear to have one.
As a temp workaround, I can swap useSearch() with something like useLocation()[0].split('?')[1] or specify my own search hook with the query param built in, but it'd be nice not to.
That's good point! What do you think about this API:
const { hook, searchHook } = memoryLocation({ path: '/foo?key=value' });
<Router hook={hook} searchHook={searchHook}>
// or more explicit
const { hook, searchHook } = memoryLocation({ path: '/foo', searchPath: 'key=value' });
Yeah, returning a searchHook is what I'd expect here. As to the implicit vs explicit form, either works. Thanks!
