Reactjs 使用props和HOC测试组件

所有组件都具有相同的结构。组件本身的组件、redux的HOC索引和材质UI样式的类。我的问题是如何正确地测试它，因为很明显，每个组件都是用compose和connect包装的，如下面所示。我想用Jest和React测试库来测试它，但到目前为止，我所做的只是简单的单元和快照测试，在这里我甚至不确定应该如何开始——我应该创建一个包装器吗？那样的话我该怎么办？如何使用代码中描述的HOC和props导入组件

--component name
   --component.tsx
   --index.tsx
   --classes.tsx

组件.tsx

import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import { ClassNameMap } from '@material-ui/styles';
import React, { FC } from 'react';
import { NavLink } from 'react-router-dom';
import { GtagServiceInterface } from '../../../shared/services/gtag-service';
import TopBarFeedbackIcon from '../top-bar-feedback-icon';
import TopBarSwitch from '../top-bar-switch';
import { TopBarServiceInterface } from './service';

const Component: FC<Props> = ({ classes, gtagService, service }) => {
  const onClick = () => gtagService.headerLogo();

  return (
    <div className={classes.root}>
      <AppBar id="app-bar" position="static" className={classes.appBar}>
        <Toolbar variant="dense" className={classes.toolbar}>
          <NavLink to="/dashboard" className={classes.navLink} onClick={onClick}>
            <img src={service.logo()} alt="logo.svg" className={classes.logo} />
          </NavLink>
          <Typography variant="h6" className={classes.title}>
            <NavLink to="/dashboard" className={classes.navLink}>
              Admin Dashboard
            </NavLink>
          </Typography>
          <TopBarSwitch />
          <TopBarFeedbackIcon />
        </Toolbar>
      </AppBar>
    </div>
  );
};

interface Props {
  classes: Partial<ClassNameMap>;
  gtagService: GtagServiceInterface;
  service: TopBarServiceInterface;
}

export default Component;

/* istanbul ignore file */
import { compose } from 'redux';
import withMaterialUiClasses from '../../../shared/higher-order-components/with-material-ui-classes';
import withProps from '../../../shared/higher-order-components/with-props';
import gtagService from '../../../shared/services/gtag-service';
import classes from './classes';
import TopBar from './component';
import service from './service';

export default compose(withProps({ gtagService, service }), withMaterialUiClasses(classes))(TopBar);