Estoy tratando de simular una función dentro de un módulo de utilidades.

En mi componente Inicio, tengo

 import { ImageUtils } from "../utils"; const Home: React.FC = () => { const [isLoading, setIsloading] = useState(true); useEffect(() => { ImageUtils.preloadImages(() => { setIsloading(false); }); }, []); return ( <div> {isLoading ? ( <p>1 sec...</p> ) : ( <AgamaApp /> )} </div> ); }

En "../utils", tengo:

 export { default as ScreenUtils } from "./screen_utils"; export { default as DateUtils } from "./date_utils"; export { default as LocalStorageUtils } from "./localstorage_utils"; export { default as ImageUtils } from "./image_utils";

Y en "utils/image_utils.ts" tengo:

 import images from "../shared/images"; const preloadImages = (onComplete: () => void) => { Promise.all( images.map((image) => { return new Promise((resolve, reject) => { const img = new Image(); img.src = image.path; img.onload = () => { resolve(undefined); }; img.onerror = () => reject(new Error("Couldn't load image")); }); }) ).then(onComplete); }; export default { preloadImages, };

En mi archivo de prueba, si lo hago:

 import { ImageUtils } from "../utils"; ImageUtils.preloadImages = jest.fn((onComplete) => { console.log("function was called"); onComplete(); }); beforeEach(() => { render(<App />); }); test("drawer slides open when hamburger menu clicked", async () => { ... });

la función nunca se llama. Pero si lo hago

 import { ImageUtils } from "../utils"; ImageUtils.preloadImages = (onComplete) => { console.log("function was called"); onComplete(); }; beforeEach(() => { render(<App />); }); test("drawer slides open when hamburger menu clicked", async () => { ... });

todo funciona bien

¿Cuál es la mejor manera de resolver esto y usar Jest de la forma en que se supone que debe hacerlo aquí?