I have the following component and the following test. This test is failing even though the function was mocketed. I’d like know how I should fix it. “@testing-library/react”: “^14.2.1” and “react”: “^18.2.0”.
import { useCalculator } from "./hooks/useCalculator";
export const CalculatorApp = () => {
const { displayNumber, operation, display, answer, reset } = useCalculator();
return (
<>
<div className="container">
<p>Calculator - React</p>
<div className="calculator">
<div aria-label="display">{displayNumber}</div>
<div className="calculator__keys">
<button
onClick={() => operation("addition")}
aria-label="addition"
>
+
</button>
...
<button aria-label="seven" onClick={() => display(7)}>7</button>
...
</div>
</div>
</div>
</>
);
}
TEST
import { fireEvent, render, screen } from "@testing-library/react";
import { CalculatorApp } from "../src/CalculatorApp.jsx";
describe("Component test <CalculatorApp/>", () => {
const mockOperation = jest.fn();
beforeEach(() => jest.clearAllMocks());
test("should call a matematical operation", () => {
render(<CalculatorApp />);
const selectedOperation = screen.getByLabelText("addition");
fireEvent.click(selectedOperation);
expect(mockOperation).toHaveBeenCalled();
expect(mockOperation).toHaveBeenCalledWith("addition");
});
});