Skip to content
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.

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

Memory location does not include a search hook #447

Open
fongandrew opened this issue May 21, 2024 · 3 comments
Open

Memory location does not include a search hook #447

fongandrew opened this issue May 21, 2024 · 3 comments
Labels

Comments

@fongandrew
Copy link

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.

@molefrog
Copy link
Owner

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' });

@molefrog
Copy link
Owner

Added this to our feature backlog.

@fongandrew
Copy link
Author

Yeah, returning a searchHook is what I'd expect here. As to the implicit vs explicit form, either works. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants