Шутка - Тестирование реагирует с несколькими HOC.Материал IU, реагирует на роутер, mobX в Typescript

Question

Я пытаюсь написать модульные тесты для проекта, который у меня есть.Чтобы упростить проблемы, я создал небольшой пример проекта, который показывает проблемы.Вы можете извлечь его из github здесь: Образец Github

При поверхностном рендеринге я получаю ошибку:

TypeError: Невозможно прочитать свойство 'displayName'of undefined

  at createStoreInjector (node_modules/mobx-react/index.js:585:46)
  at node_modules/mobx-react/index.js:698:16
  at Object.<anonymous> (src/Home/Home.tsx:21:76)
  at Object.<anonymous> (src/Home/Home.test.tsx:17:189)

Проблема, с которой я столкнулся, заключается в том, что мне нужно выполнить модульное тестирование компонентов с несколькими HOC.Один для стилей из Material UI, один для реагирующего маршрутизатора и два для внедрения в mobX и обозревателя.Вы можете увидеть провальный тест в / src / Home в файле Home.test.tsx.

Я не могу понять, как пройти тест jest для прохождения этого компонента.У меня также есть проблема, когда я добавляю в домашний компонент.Он также имеет несколько одинаковых HOC, что также приводит к сбоям.

Должен быть способ протестировать эти типы компонентов, но я не могу заставить его работать.Любая помощь будет отличной!

Для тех, кто не хочет тянуть проект, вот сводка тестируемого компонента и самого теста.

Home.tsx

import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles';
import classNames from 'classnames';
import { inject, observer } from 'mobx-react';
import * as React from 'react';
import { RouteComponentProps, withRouter } from 'react-router-dom';
import logo from '../logo.svg';
import { HomeStore } from '../Stores/HomeStore';
import { styles } from './Home.Styles';

interface IProps extends RouteComponentProps<{}> {
    homeStore?: HomeStore;
}

export default withStyles(styles)(
    inject('homeStore')(
        withRouter(
            observer(
                class Home extends React.Component<
                IProps & RouteComponentProps<{}> & WithStyles<typeof styles>,
                {}
                > {
                public render() {
                    const { classes } = this.props;
                    return (
                        <div className={classes.app}>
                            <header className={classes.appHeader}>
                                <img src={logo} className={classNames(classes.appLogo, classes.spin)} alt='logo' />
                                <h1 className={classes.appTitle}>Welcome to React</h1>
                            </header>
                            <p className={classes.appIntro}>
                                To get started, edit <code>src/App.tsx</code> and save to reload.
                            </p>
                        </div>
                    );
                }
            }))));

Home.test.tsx

import { shallow, ShallowWrapper } from 'enzyme';
import * as React from 'react';
import { MemoryRouter } from 'react-router';
import { HomeStore } from '../Stores/HomeStore';
import Home from './Home';

jest.mock('react-router-dom');
jest.mock('./Home.styles');

const homeStore = {} as HomeStore;

const props = {
    homeStore: homeStore,
    history: {},
    location: {},
    match: {},
    staticContext: {}
};

describe('Order Tests', () => {
    let homeWrapper: ShallowWrapper;

    beforeEach(() => {
        homeWrapper = shallow(<MemoryRouter><Home {...props} /></MemoryRouter>).first().shallow().first().shallow();
    console.log(homeWrapper.debug());
    });

    it('passes a test', () => {
        expect(true).toBe(true);
    });
});