reactjs - 如何测试父组件中存在的 onClick 功能（箭头功能）？

问题描述

我需要测试包含 2 个卡片的父组件，每个卡片有 2 个可点击的链接。我应该如何测试 onClick 箭头功能，因为它是唯一未被覆盖的行。我正在附加带有完整组件的 UI 图像以及覆盖率报告。

这是我的 component.tsx 文件

import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Container from '@material-ui/core/Container';
import { ICountUser, IUserCount } from '../../../api/models/CountUser';
import CountCard from './CountCard';
import { HEADING } from '../../../constants/UserConstants';
import { IStats } from '../component/CountCard';

import './Dashboard.css';

interface IProps {
    history: {
        push: any;
    };
    match: {
        url: string;
    };
    data: ICountUser;
    classes: any;
}

const useStyles = (theme: any) => ({
    bullet: {
        display: 'inline-block',
        margin: '0 2px',
        transform: 'scale(0.8)',
    },
    pos: {
        marginBottom: 12,
        marginTop: 5,
    },
});

export class ConnectStats extends Component<IProps> {
    public render() {
        const advisor: IUserCount = this.props.data.advisors;
        const entrepreneur: IUserCount = this.props.data.entrepreneurs;
        const { classes } = this.props;
        const advisorStats: IStats[] = this.getAdvisorStats(advisor);
        const entrepreneurStats: IStats[] = this.getEntrepreneurStats(entrepreneur);
        return (
            <Container className="card-container" maxWidth="md">
                <Grid className="grid-1" container={true} spacing={3}>
                    <Grid item={true} xs={12} sm={6} md={2} />
                    <CountCard
                        classes={classes}
                        header={HEADING.advisor}
                        stats={advisorStats}
                    />
                    <CountCard
                        classes={classes}
                        header={HEADING.entrepreneur}
                        stats={entrepreneurStats}
                    />
                </Grid>
            </Container>
        );
    }

    /*
    The below method will return array of stats of the advisor.
    Returns following data :
                        count : No of users
                        label : Sub-heading
                        onClick : On-click event of sub-heading
     */

    private getAdvisorStats = (data: IUserCount): IStats[] => {

        const arr: IStats[] = [];
        arr.push({
            count: data.active, label: 'Active', onClick: () => this.navigateToActiveTab(true, 'advisors'),
        });
        arr.push({
            count: data.inactive, label: 'Inactive', onClick: () => this.navigateToInActiveTab(false, 'advisors'),
        });
        return arr;
    }

    /*
   The below method will return array of stats of the entrepreneur.
   Returns following data :
                       count : No of users
                       label : Sub-heading
                       onClick : On-click event of sub-heading
    */

    private getEntrepreneurStats = (data: IUserCount): IStats[] => {

        const arr: IStats[] = [];
        arr.push({
            count: data.active, label: 'Active', onClick: () => this.navigateToActiveTab(true, 'entrepreneurs'),
        });
        arr.push({
            count: data.inactive, label: 'Inactive', onClick: () => this.navigateToInActiveTab(false, 'entrepreneurs'),
        });
        return arr;
    }

    private navigateToActiveTab = (isActive: boolean, params: string) => {
        this.props.history.push({
            pathname: `${this.props.match.url}/${params}`,
            isActive,
        });
    }

    private navigateToInActiveTab = (isActive: boolean, params: string) => {
        this.props.history.push({
            pathname: `${this.props.match.url}/${params}`,
            isActive,
        });
    }

}

export default withStyles(useStyles)(ConnectStats);

这是我的快照文件。

exports[`Dashboard component should render connect stats component 1`] = `
<WithStyles(ForwardRef(Container))
  className="card-container"
  maxWidth="md"
>
  <WithStyles(ForwardRef(Grid))
    className="grid-1"
    container={true}
    spacing={3}
  >
    <WithStyles(ForwardRef(Grid))
      item={true}
      md={2}
      sm={6}
      xs={12}
    />
    <countCard
      classes={Object {}}
      header="Advisors"
      stats={
        Array [
          Object {
            "count": 8,
            "label": "Active",
            "onClick": [Function],
          },
          Object {
            "count": 2,
            "label": "Inactive",
            "onClick": [Function],
          },
        ]
      }
    />
    <countCard
      classes={Object {}}
      header="Entrepreneurs"
      stats={
        Array [
          Object {
            "count": 8,
            "label": "Active",
            "onClick": [Function],
          },
          Object {
            "count": 2,
            "label": "Inactive",
            "onClick": [Function],
          },
        ]
      }
    />
  </WithStyles(ForwardRef(Grid))>
</WithStyles(ForwardRef(Container))>
`;

我想在 stats props 中模拟 onClick 函数

标签： reactjstypescriptjestjsenzyme

reactjs - 如何测试父组件中存在的 onClick 功能（箭头功能）？

问题描述

解决方案

推荐阅读