here is the basic setup
component.js
import {functionIWantToMock, val} from "somewhere/on/my/hdd"
export function Component() {
return (<>
<div>{val}</div>
<div>{functionIWantToMock()}</div>
</>)
}
component.test.js
import { Component } from "./component";
import { render, screen } from "@testing-library/react";
it("should change the result of the function", () => {
// Change behaviour of functionIWantToMock
functionIWantToMock = () => {
return "empty"
}
render(<Component/>);
// This is not a proper assertion
expect(screen.getByRole("img")).toBeVisible()
})
I've looked at manual mocking, spying and jest.fn()
but none of those will work, i think, because the call is happening within the component and so I can't mock it globally.
What is the correct way to mock functionIWantToMock
so that i can change its behaviour in the component for the test?