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!