Testing Chart.js Plugin with React and Jest/Enzyme - reactjs

Question

For my project, I am using React and Jest/Enzyme. I built out a reusable Doughnut Chart component and used a plugin to render text in the middle of the Doughnut Chart. Here is my code.
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()
);
}
}
This code displays the chart and the text in the middle perfectly for me. My problem is when I try to write tests for this component, it says the lines for the plugin isn't covered. I have a basic test here that tests the component renders itself and its props.
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);
});
I'm guessing the plugin applies all the configuration changes when the chart is drawn, so I don't understand why the tests do not hit the plugin lines.
If anyone can show me how to test the plugin or guide me in the right direction, I would greatly appreciate it! Thank you!

Answer 1

Can you post the output of your test? Is it checking the actual node_module plugin for chart.js or is it the one that you've built?
If it's trying to test against node_modules then it's best to ignore that entire directory from your tests via your package.json like so.
"jest": {
"testPathIgnorePatterns": [
"./node_modules/"
],
"collectCoverageFrom": [
"!/node_modules/*"
]
}