Encountered an error while testing with vitest:

[vitharanagedonjani-i2e]

Error: TypeError: at.supports is not a function

I encountered the following error while testing with vitest:

../../node_modules/input-otp/src/input.tsx:69:22

Issue Description:

I'm currently encountering a TypeError: at.supports is not a function when testing with vitest. Here's my vitest configuration:

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vitest/config';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
    plugins: [react(), tsconfigPaths()],
    test: {
        globals: true,
        environment: 'jsdom',
        setupFiles: './test-setup.ts',
        css: true,
        server: {
            deps: {
                inline: ['next-auth'],
            },
        },
    },
});

Any Idea Why?

Could someone provide insight into why this error is occurring?

[khaled-mostafa]

I'm also having same issue, I'm using Vite @testing-library and jest, and I'm having the error TypeError: dt.supports is not a function

TypeError: dt.supports is not a function

       5 | describe("InputOTP component", () => {
       6 |      test("renders correctly", () => {
    >  7 |              render(<InputOTP maxLength={4} />);
         |                    ^
       8 |              const otpContainer = screen.getByTestId("otp-element");
       9 |              expect(otpContainer).toBeInTheDocument();
      10 |      });

      at node_modules/input-otp/src/input.tsx:75:27
      at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:16305:18)
      at updateForwardRef (node_modules/react-dom/cjs/react-dom.development.js:19226:20)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:21636:16)
      at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:27426:14)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:26560:12)
      at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:26466:5)
      at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:26434:7)
      at recoverFromConcurrentError (node_modules/react-dom/cjs/react-dom.development.js:25850:20)
      at performConcurrentWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:25750:22)
      at flushActQueue (node_modules/react/cjs/react.development.js:2667:24)
      at act (node_modules/react/cjs/react.development.js:2582:11)
      at node_modules/@testing-library/react/dist/act-compat.js:46:25
      at renderRoot (node_modules/@testing-library/react/dist/pure.js:180:26)
      at render (node_modules/@testing-library/react/dist/pure.js:266:10)
      at Object.<anonymous> (src/components/InputOTP/InputOTP.spec.tsx:7:9)

[khaled-mostafa]

@guilhermerodz

[guilhermerodz]

hi @khaled-mostafa @vitharanagedonjani-i2e trying to reproduce it locally.

I'm 99% sure this is related to CSS.supports function in the source code.

will mess aruond a bit and get back here!

---

[guilhermerodz]

hi @khaled-mostafa please run

npm install input-otp@latest

let me know if you run into this same CSS.supports issue again.

by the way, the library now checks for window.CSS.supports to be a function before calling it.

---

NOTE: if you now start getting ResizeObserver is not defined in vitest using jsdom, then you should either use happy-dom instead, or use a mock/polyfill to mitigate that.