Testing a window event addEventListener with a callback using enzyme, mocha and chai-CodePudding

The JSX file

// Checks to see if image is cached const isCached = src => { const img = new Image(); // eslint-disable-line img.src = src; const complete = img.complete; img.src = ""; return complete; }; const [isHighRes, lazySetIsHighRes] = useState( !isCached(`${images[0].normal}?wid=200&hei=200`) ); useEffect(() => { // If image is cached load the high res image after the ATF_DONE event if (!isHighRes) { const setHighRes = () => { lazySetIsHighRes(true); window.removeEventListener("ATF_DONE", setHighRes); }; window.setTimeout(() => { window.addEventListener("ATF_DONE", setHighRes); return () => { window.removeEventListener("ATF_DONE", setHighRes); }; }, ATF_TIMEOUT) } return null; }, []);

I tried doing this in the spec.jsx but it fails because expected addEventListener to have been called with arguments

beforeEach(() => { sandbox = sinon.sandbox.create(); sinon.stub(window, "addEventListener"); sinon.stub(window, "removeEventListener"); sandbox.stub(window, "Image").callsFake(() => { const image = new Image.wrappedMethod(); sandbox.stub(image, "complete").value(complete); return image; }); it.only("should load low res image if image is cached", () => { const clock = sinon.useFakeTimers(); clock.tick(8000); expect(window.addEventListener).to.have.been.calledWith("ATF_DONE", "setHighRes"); })

CodePudding user response：

Looks like you can manually dispatch the event to trigger the callback which worked for me

window.dispatchEvent(new Event("ATF_DONE"));