Блог

Я пытаюсь создать модульный тест, который будет проверять метод компонента для запуска, если <a> в нем выбран определенный тег. По какой-то причине я так близок, но не могу заставить это работать. Я могу запустить этот метод просто отлично, так console.log как он срабатывает во время теста, но как заставить его сделать шаг назад и просто проверить, отключается ли функция, вместо того, чтобы фактически ее запускать.

Вот компонент, на котором я тестирую, 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;
 

а вот мой модульный тест (дайте мне знать, если мне нужно предоставить дополнительную информацию):

 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 => {
 

Я просмотрел несколько сообщений StackOverflow и все еще не нашел ответа на эту history дилемму. Любой совет приветствуется!