Having developed a simple app with components, here is the code:
import GraphicCanvas from './Graphing/GraphCanvas';
import { drawCircle } from './Graphing/DrawCircle';
function App() {
return (
<div className="App">
< GraphicCanvas draw={drawCircle} />
</div>
);
}
export default App;
import React, { FC, useRef, useEffect } from "react";
export interface IGraphicCanvas{
draw : Function;
}
const GraphicCanvas : FC<IGraphicCanvas> = (props) : JSX.Element => {
const canvasRef = useRef<HTMLCanvasElement>(null)
useEffect(() => {
if (canvasRef.current) {
const canvas = canvasRef.current
const context = canvas?.getContext('2d')
props.draw(context)
}
}, [props.draw])
return <canvas ref={canvasRef} />
}
export default GraphicCanvas ;
export const drawCircle = (ctx : CanvasRenderingContext2D | null ) : void => {
ctx!.fillStyle = '#000000'
ctx?.beginPath()
ctx?.arc(50, 100, 20, 0, 2 * Math.PI)
ctx?.fill()
}
The functionality in the code works as expected and produces a small black dot on the canvas. However, running unit tests using Enzyme and Jest, specifically the mount() function, results in errors.
Shown below is the test script intended to validate the drawCircle function passed as a prop to GraphicCanvas:
import React from 'react'
import { configure, shallow, mount } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import GraphicCanvas, { IGraphicCanvas } from "./GraphCanvas";
import { drawCircle } from "./DrawCircle"
configure({ adapter: new Adapter() });
describe("GraphCanvas ", () => {
let props: IGraphicCanvas;
let useEffect: { getMockImplementation: (arg0: (ctx: CanvasRenderingContext2D | null) => void) => void; }
const mockUseEffect = () => {
useEffect.getMockImplementation( drawCircle );
};
beforeEach(() => {
props = { draw: jest.fn().getMockImplementation };
});
//shallow method renders only a single component, without child components.
it("renders without crashing", () => {
shallow(<GraphicCanvas draw={drawCircle} />);
});
it("calls function drawCircle passed in props as draw", () => {
//mockUseEffect();
//mount(<GraphicCanvas draw={drawCircle} />);
mount(<GraphicCanvas {...props} />);
expect(props.draw).toHaveBeenCalled();
});
});
An error message is encountered when attempting to run the test, indicating an issue with line 31 of the code:
TypeError: Cannot read properties of undefined (reading 'child')
29 | //mockUseEffect();
30 | //mount(<GraphicCanvas draw={drawCircle} />);
> 31 | mount(<GraphicCanvas {...props} />);
| ^
32 | expect(props.draw).toHaveBeenCalled();
33 | });
34 |
Multiple attempts are made by uncommenting different lines, all resulting in various error messages. The objective remains to simply ensure that the drawCircle function passed through the prop "draw" to GraphicCanvas is being called.
expect(props.draw).toHaveBeenCalled()