私のプロジェクトでは、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);
});
グラフが描画されるときにプラグインがすべての構成変更を適用すると推測しているので、テストがプラグインの行にヒットしない理由がわかりません。
誰かがプラグインをテストする方法を教えてくれたり、正しい方向に導くことができれば、とても感謝しています! ありがとうございました！