To Fix: console.warn [@zag-js/dismissable] node is null or undefined

[harsh3dev]

🐛 Bug report

I am using Chakra UI as the UI framework in my React TS application and while running the tests using Jest, I am getting the following warnings:

console.warn
      [@zag-js/dismissable] node is `null` or `undefined`

      at Object.warn (node_modules/@zag-js/utils/dist/index.js:323:13)
      at trackDismissableElementImpl (node_modules/@zag-js/dismissable/dist/index.js:119:11)
      at node_modules/@zag-js/dismissable/dist/index.js:183:21
      at invokeTheCallbackFunction (node_modules/jsdom/lib/jsdom/living/generated/Function.js:19:26)
      at runAnimationFrameCallbacks (node_modules/jsdom/lib/jsdom/browser/Window.js:603:13)
      at Timeout._onTimeout (node_modules/jsdom/lib/jsdom/browser/Window.js:581:11)

💥 Steps to reproduce

Use Chakra UI @zag-js/dismissable in react with jest as a testing library
run the tests and see the error.

🧭 Possible Solution

I tried reaching the code and commented the following line:

function trackDismissableElementImpl(node, options) {
  if (!node) {
    // utils.warn("[@zag-js/dismissable] node is `null` or `undefined`");
    return;
  }

Although this fixes the warnings in my local, as it's in node_modules this will again be reproduced in my repo's contributors code base.

🌍 System information

Software	Version(s)
Zag Version	0.82.1
Browser	Chrome
Operating System	Windows

[segunadebayo]

What's the underlying thing you were trying to do that prompted this error?

Have a look at this setup test file
https://github.com/chakra-ui/ark/blob/main/packages/react/src/setup-test.ts

You probably need to mock the requestAnimationFrame to remove the warning

[harsh3dev]

@segunadebayo Thanks for your response. The solution you suggested works for me.
I was using this in Chakra UI and my project uses it with React and Jest as a testing tool.