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!