How to test if url is updated while keeping history.location.search with Jest

Viewed 187

I have a react application where I want to test the folowing behaviour. I have some search criteria in the url /?my_filter_value=%5B\"FR\"%5D, and I have a button, when I click the button, a modal shows up and the url is updated /some_modal_id?my_filter_value=%5B\"FR\"%5D.

The test scenario I have is: Given that I click the button > When the modal shows up > I expect the url to be updated accordingly ie. some_modal_id is added to the url while keeping the initial search criteria.

describe('Given I click on the button', () => {
  act(() => {
    buttonModale.find('#actualButton').at(1).props().onClick();
  });
  describe('When the modal shows up', () => {
    const initialUrlWithSearchCriteria = "/?my_filter_value=%5B\"FR\"%5D";
    const history = createMemoryHistory({
    initialEntries: [initialUrlWithSearchCriteria],
    initialIndex: 0,
    });
    //expect(history.location.search).toBe(initialUrlWithSearchCriteria );
    act(() => {
        mount(
            <Router history={history}>
            <MyModalComponent showModal={true}/>
            </Router>
        );
    });
    const expectedModalUrl = `/some_modal_id`;
    test('I expect the url to be updated with the modal id and keep the applied search', () => {
        expect(history.location.pathname).toBe(expectedModalUrl);
        expect(history.location.search).toBe(initialUrlWithSearchCriteria);
    });
  });
});

The first expect clause test is passing, so the url is actually getting "some_modal_id" part, but the second expect clause is failing. It seems that history.location.search is always an empty string. I have tried to test if history.location.search is actually taking the initial value I am giving it and it seems to be working and the commented out expect case was passing.

Any help or tip on this will be highly appreciated!

0 Answers
Related