I'm testing my React component with Jest and React testing library.The component uses d3 code like this:

useEffect(() => {
  svg.transition()
    .duration(500)
    .call(zoom.transform, newTransform);
});

In the test script, I render my component, and then trying to wait 500ms until transition is done:

const sleep = async (timeout: number) => await new Promise((r) => setTimeout(r, timeout));
...
const {container} = render();
await sleep(500);

Adding sleep causes an error in the test:

 console.error
      Error: Uncaught [TypeError: Cannot read properties of undefined (reading 'baseVal')]
          at reportException (C:\...\node_modules\jsdom\lib\jsdom\living\helpers\runtime-script-errors.js:66:24)
          at runAnimationFrameCallbacks (C:\...\node_modules\jsdom\lib\jsdom\browser\Window.js:605:13)
          at Timeout. (C:\...\node_modules\jsdom\lib\jsdom\browser\Window.js:581:11)
          at listOnTimeout (node:internal/timers:569:17)
          at processTimers (node:internal/timers:512:7) {

Without sleep, the component's code does not execute transition as expected.

My project configuration:

  "dependencies": {
    "d3": "^7.8.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.13.0",
    "react-scripts": "^5.0.1",
    "typescript": "^4.2.3"
  },
  "devDependencies": {
    "@jest/globals": "29.1.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@types/d3": "^7.4.0",
    "@types/jest": "^29.5.3",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "@types/react-router-dom": "^5.3.3",
    "jest": "29.1.1",
    "jest-environment-jsdom": "29.1.1",
    "ts-jest": "29.1.1"
  }

Any suggestions how to solve the problem?