History error when trying to test if a function runs when testing a component with Jest and Enzyme

Viewed 54

I am trying to create a unit test that will test a component's method to run if a certain <a> tag is selected within it. For some reason I am so close but cannot get it to work. I am able to run that method just fine since the console.log within it fires off during the test, but how do I make it take a step back and just simply test for if the function firies off instead of actually firing it off.

Here is the component I am testing on, Breadcrumbs.tsx:

import React, { ReactElement } from 'react';
import { useTranslation } from 'react-i18next';
import { useHistory } from 'react-router-dom';
import Constants from '../../../../../core/constants';
import { BreadcrumbsProps } from './BreadcrumbsProps';
import { AgentsMode } from './AgentsProps';

const Breadcrumbs = (props: BreadcrumbsProps): ReactElement => {
    const { agentsMode } = props;
    const { t } = useTranslation(Constants.Localization.Namespaces.RECRUIT);
    const history = useHistory();

    const savedSearchesHandler = (): void => {
        console.log('this ran');
        const savedSearches =
            `${Constants.Routes.Recruit.MODULE}${Constants.Routes.Recruit.SAVED_SEARCHES}`;
        history.push(savedSearches);
    };

    const mlsSearchHandler = (): void => {
        const mlsSearch =
            `${Constants.Routes.Recruit.MODULE}${Constants.Routes.Recruit.MLS_SEARCH_START}`;
        history.push(mlsSearch);
    };

    return (
        <>
            <div className="my-favorites-layout-hack d-flex align-items-center align-content-center">
                <div>
                    <nav
                        className="mr-2 breadcrumbs-mb-0" aria-label="breadcrumb" id={'breadcrumb'}>
                        <ul className="breadcrumb mb-0"><li><i
                            className="material-icons mr-2" id="home-icon" aria-hidden="true">home</i></li>
                            <li
                                className="breadcrumb-item-saved"
                                id={'saved-searches-link'}><a onClick={savedSearchesHandler}
                                href="#">{t('labels.savedSearches')}</a></li>
                            <li
                                className="breadcrumb-item">
                                {agentsMode != AgentsMode.mlsSearchStart ? (<a href="#" onClick={mlsSearchHandler}>
                                        {t('labels.mlsSearch')}</a>) :
                                    (t('labels.mlsSearch'))}
                            </li>
                            {agentsMode != AgentsMode.mlsSearchStart ? <li
                                className="breadcrumb-item">
                                {t('labels.unsavedSearch')}
                            </li> : null}
                        </ul>
                    </nav>
                </div>
            </div>
        </>
    );
};

export default Breadcrumbs;

and here is my unit test (let me know if I need to provide more information):

this.when.push({

            beforeEachRender: () => {

                this.clientId = '037COL';
                this.user = userWithFullPermissions;

                document.cookie = `token=${testCookie}; expires=Thu, 01 Jan 2070 00:00:00 UTC; path=/;`;

                count++;
                // const unsavedSearchDetails = agentSearchTestDetails;
                // unsavedSearchDetails.criteria.searchId = UNSAVED_SEARCH_ID;
                // window.history.replaceState({ state: { agentSearchDetails: unsavedSearchDetails } }, 'Mock');

                if (count === 1) {
                    this.mockHttpRequests();
                } else {
                    this.mockHttpRequestsReversed();
                }
            },

            describe: 'When the search results page is reached and the saved search route is clicked',

            then: async () => {
                test('Then the Saved Searches page should render', async () => {
                    const history = createMemoryHistory();
                    history.push('/');
                    const savedSearchesHandler =  jest.fn();
                    const baseProps = {
                        savedSearchesHandler
                    };
                    const wrapper = shallow(<Breadcrumbs {...baseProps} agentsMode={AgentsMode.algorithmSearch} />);
                    wrapper.find('a').at(0).simulate('click');
                    expect(baseProps.savedSearchesHandler).toHaveBeenCalled();
                });
            },
        });

Unfortunately I am left with this error message:

TypeError: Cannot read property 'push' of undefined

  15 |         const savedSearches =
  16 |             `${Constants.Routes.Recruit.MODULE}${Constants.Routes.Recruit.SAVED_SEARCHES}`;
> 17 |         history.push(savedSearches);
     |                 ^
  18 |     };
  19 |
  20 |     const mlsSearchHandler = (): void => {

I've sifted through a number of StackOverflow posts and still have been coming up short on this history dilemma. Any advice is appreciated!

0 Answers
Related