[question][unit testing] failing test on component built on top of Ark UI pin input

[FranciscoKloganB]

When I exucte one of my component tests using react-testing-library over a component I built on top of Ark UI pin-input, everything works as expected, except for the exception I get outside of the test flow.

Screen debug shows rendered elements are correct, state transitions work as expected, assertions work but I get the vitest message below.

After going through the stacktrace I managed to find that the error happens within one of your source files in the line dom.getFocusedElement. I assume the test fails because there is no actual dom (JSDom) to get the focused element from.

However, I also happened to find your own tests forPinInput (they are so awfully similar I could have written them myself 😅), and I can't spot the difference. I wonder what is your strategy to avoid the error below? Do you have some custom vitest setup that polyfills or mocks this method calls?

 ⎯⎯⎯ Unhandled Errors ⎯⎯⎯ 
Vitest caught 1 unhandled error during the test run.
This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.

⎯⎯⎯ Uncaught Exception ⎯⎯⎯ 
TypeError: Cannot read properties of undefined (reading 'value')
 ❯ node_modules/.pnpm/@[email protected]/node_modules/@zag-js/pin-input/src/pin-input.machine.ts:165:34
 ❯ invokeTheCallbackFunction node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/living/generated/Function.js:19:26
 ❯ runAnimationFrameCallbacks node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/browser/Window.js:636:13
 ❯ Timeout.<anonymous> node_modules/.pnpm/[email protected]/node_modules/jsdom/lib/jsdom/browser/Window.js:614:11
 ❯ listOnTimeout node:internal/timers:569:17
 ❯ processTimers node:internal/timers:512:7

This error originated in "src/components/ui/input/PinInput.spec.tsx" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

[cschroeter]

@FranciscoKloganB

Testing is so frustrating in the Node / Web ecosystem. I spend hours on failing test that in theory work just fine in the browser. However this is what we use at the moment and it kinda works okayish:

import '@testing-library/jest-dom'
import { JSDOM } from 'jsdom'
import ResizeObserver from 'resize-observer-polyfill'

const { window } = new JSDOM()

window.ResizeObserver = ResizeObserver
window.Element.prototype.scrollTo = () => {
  // no-op
}
window.requestAnimationFrame = (cb) => setTimeout(cb, 1000 / 60)

Object.assign(global, { window, document: window.document })

[FranciscoKloganB]

Your solution worked for me. Thank you.

Unfortunatly, setting this up globally kind made a bunch of other tests break especially those that involved the Ionic React framework. Consequently, I use this setup only on the necessary tests. Leaving here for reference of other people that might have the same issue.

import * as R from 'remeda'
import ResizeObserver from 'resize-observer-polyfill'

export function mockWindowForArkUI() {
  let oldWindow

  beforeEach(() => {
    // Any other approach to restore the original window object is probably fine
    // I used deep clone with what my project had to test quickly
    oldWindow = R.clone(global.window)

    global.window.ResizeObserver = ResizeObserver
    global.window.Element.prototype.scrollTo = () => undefined
    global.window.requestAnimationFrame = (cb) => setTimeout(cb, 1000 / 60)
  })

  afterEach(() => {
    global.window = oldWindow
  })
}

Then use it on test files like so

describe('<Component />', () => {
  beforeEach(() => {
    // This is not necessary - just exemplifying that it is possible to have multiple vi or jest `beforeEach` hooks
    vi.clearAllMocks()
  })

  mockWindowForArkUI()
  
  it('should do something', () => {
    expect(true).toBe(true)
  })
})