reactjs - 使用 React 和 Jest/Enzyme 测试 Chart.js 插件

问题描述

对于我的项目，我使用 React 和 Jest/Enzyme。我构建了一个可重复使用的圆环图组件，并使用一个插件在圆环图的中间呈现文本。这是我的代码。

export default class DoughnutChart extends React.Component {
    renderDoughnutChart = () => {
        const { labels, datasetsLabel, datasetsData, datasetsBackgroundColor, displayTitle, titleText, displayLabels, doughnutCenterText, doughnutCenterColor, height, width, onClick } = this.props;

        const plugin = {
            beforeDraw: (chart) => {
                if (chart.config.options.elements.center) {
                    //Get ctx from string
                    let ctx = chart.chart.ctx;

                    //Get options from the center object in options
                    let centerConfig = chart.config.options.elements.center;
                    let fontStyle = centerConfig.fontStyle || "Arial";
                    let txt = centerConfig.text;
                    let color = centerConfig.color || "#000";
                    let sidePadding = centerConfig.sidePadding || 20;
                    let sidePaddingCalculated = (sidePadding / 100) * (chart.innerRadius * 2);
                    //Start with a base font of 30px
                    ctx.font = "30px " + fontStyle;

                    //Get the width of the string and also the width of the element minus 10 to give it 5px side padding
                    let stringWidth = ctx.measureText(txt).width;
                    let elementWidth = (chart.innerRadius * 2) - sidePaddingCalculated;

                    // Find out how much the font can grow in width.
                    let widthRatio = elementWidth / stringWidth;
                    let newFontSize = Math.floor(30 * widthRatio);
                    let elementHeight = (chart.innerRadius * 2);

                    // Pick a new font size so it will not be larger than the height of label.
                    let fontSizeToUse = Math.min(newFontSize, elementHeight);

                    //Set font settings to draw it correctly.
                    ctx.textAlign = "center";
                    ctx.textBaseline = "middle";
                    let centerX = ((chart.chartArea.left + chart.chartArea.right) / 2);
                    let centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2);
                    ctx.font = fontSizeToUse + "px " + fontStyle;
                    ctx.fillStyle = color;

                    //Draw text in center
                    ctx.fillText(txt, centerX, centerY);
                }
            }
        };

        const data = {
            labels: labels,
            datasets: [{
                label: datasetsLabel,
                data: datasetsData,
                backgroundColor: datasetsBackgroundColor,
            }],
            config: {
                animation: {
                    animateRotate: true,
                }
            }
        };

        const options = {
            maintainAspectRatio: false,
            responsive: true,
            title: {
                display: displayTitle,
                text: titleText,
                fontSize: 24,
            },
            legend: {
                display: displayLabels,
            },
            elements: {
                center: {
                    text: doughnutCenterText,
                    color: doughnutCenterColor,
                    fontStyle: "Arial",
                    sidePadding: 40,
                }
            },
            animation: {
                animateRotate: true,
            },
            onClick: onClick,
        };

        if (!labels || !datasetsLabel || !datasetsData || !titleText) {
            return null;
        }

        Chart.pluginService.register(plugin);

        return (
            <Doughnut
                data={data}
                options={options}
                height={height}
                width={width}
            />
        );
    }

    render() {
        return (
            this.renderDoughnutChart()
        );
    }
}

这段代码完美地为我显示了图表和中间的文本。我的问题是当我尝试为这个组件编写测试时，它说插件的行没有被覆盖。我在这里有一个基本测试，用于测试组件呈现本身及其道具。

it("should render based on passed in props", () => {
    let testOnClick = jest.fn();
    let labels = ["Red", "Yellow", "Blue"];
    let datasetsLabel = "test data sets label";
    let datasetsData = [10, 20, 30];
    let datasetsBackgroundColor = ["red", "yellow", "blue"];
    let titleText = "Title";
    let height = 300;
    let width = 300;
    let doughnutCenterText = "Hello";
    let doughnutCenterColor = "white";

    let wrapper = shallow(
        <DoughnutChart
            labels={labels}
            datasetsLabel={datasetsLabel}
            datasetsData={datasetsData}
            datasetsBackgroundColor={datasetsBackgroundColor}
            titleText={titleText}
            height={height}
            width={width}
            onClick={testOnClick}
            doughnutCenterText={doughnutCenterText}
            doughnutCenterColor={doughnutCenterColor}
        />
    );

    expect(wrapper.find("Doughnut").props().data.labels).toEqual(labels);
    expect(wrapper.find("Doughnut").props().data.datasets[0].label).toEqual(datasetsLabel);
    expect(wrapper.find("Doughnut").props().data.datasets[0].data).toEqual(datasetsData);
    expect(wrapper.find("Doughnut").props().data.datasets[0].backgroundColor).toEqual(datasetsBackgroundColor);
    expect(wrapper.find("Doughnut").props().options.title.text).toEqual(titleText);
    expect(wrapper.find("Doughnut").props().height).toEqual(height);
    expect(wrapper.find("Doughnut").props().width).toEqual(width);
    expect(wrapper.find("Doughnut").props().options.elements.center.text).toEqual(doughnutCenterText);
    expect(wrapper.find("Doughnut").props().options.elements.center.color).toEqual(doughnutCenterColor);
});

我猜该插件会在绘制图表时应用所有配置更改，所以我不明白为什么测试没有命中插件行。

如果有人能告诉我如何测试插件或指导我正确的方向，我将不胜感激！谢谢！

标签： reactjstestingchart.jsjestjsreact-chartjs

reactjs - 使用 React 和 Jest/Enzyme 测试 Chart.js 插件

问题描述

解决方案

推荐阅读