wouter icon indicating copy to clipboard operation
wouter copied to clipboard

Memory location does not include a search hook

Open fongandrew opened this issue 1 month ago • 3 comments

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.

fongandrew avatar May 21 '24 22:05 fongandrew