cds-select + Vitest + React Testing Library + jsdom: `TypeError: 'set' on proxy: trap returned falsish for property 'disabled'`

antoninbas commented 1 year ago

Describe the bug

When using Clarity React, and testing with Vitest (jsdom environment) + React Testing Library, I observe the following errors:

Vitest caught 2 unhandled errors during the test run.
This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
TypeError: 'set' on proxy: trap returned falsish for property 'disabled'
 ❯ forEach node_modules/src/internal/utils/lit.ts:30:31
 ❯ syncProps node_modules/src/internal/utils/lit.ts:30:10
 ❯ updated node_modules/src/forms/control/control.element.ts:205:9
 ❯ u._$didUpdate [as _$AE] node_modules/@lit/reactive-element/src/reactive-element.ts:1378:10
 ❯ u.performUpdate node_modules/@lit/reactive-element/src/reactive-element.ts:1343:12
 ❯ u.scheduleUpdate node_modules/@lit/reactive-element/src/reactive-element.ts:1261:17
 ❯ u._$Ej node_modules/@lit/reactive-element/src/reactive-element.ts:1233:25

This error originated in "src/App.test.tsx" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.
The latest test that might've caused the error is "check select field". It might mean one of the following:
- The error was thrown, while Vitest was running this test.
- This was the last recorded test before the error was thrown, if error originated after test finished its execution.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
TypeError: 'set' on proxy: trap returned falsish for property 'disabled'
 ❯ forEach node_modules/src/internal/utils/lit.ts:30:31
 ❯ syncProps node_modules/src/internal/utils/lit.ts:30:10
 ❯ updated node_modules/src/forms/control/control.element.ts:205:9
 ❯ u._$didUpdate [as _$AE] node_modules/@lit/reactive-element/src/reactive-element.ts:1378:10
 ❯ u.performUpdate node_modules/@lit/reactive-element/src/reactive-element.ts:1343:12
 ❯ u.scheduleUpdate node_modules/@lit/reactive-element/src/reactive-element.ts:1261:17
 ❯ u._$Ej node_modules/@lit/reactive-element/src/reactive-element.ts:1233:25

This error originated in "src/App.test.tsx" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.
The latest test that might've caused the error is "check select field". It might mean one of the following:
- The error was thrown, while Vitest was running this test.
- This was the last recorded test before the error was thrown, if error originated after test finished its execution.
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 Test Files  1 passed (1)
      Tests  1 passed (1)
     Errors  2 errors
   Start at  12:35:24
   Duration  1.44s (transform 59ms, setup 172ms, collect 377ms, tests 112ms, environment 504ms, prepare 96ms)

How to reproduce

I have created a simple repository to reproduce the issue: https://github.com/antoninbas/clarity-react-vitest-jsdom-bug

Steps to reproduce the behavior:

git clone https://github.com/antoninbas/clarity-react-vitest-jsdom-bug.git
cd clarity-react-vitest-jsdom-bug
yarn install
yarn test

Expected behavior

The test should pass without any error.

Versions

Clarity project:

[x] Clarity Core
[ ] Clarity Angular/UI

Clarity version:

[ ] v5.x
[x] v6.x (6.5.0)

Framework:

[ ] Angular
[x] React
[ ] Vue
[ ] Other:

Framework version: React 18

Additional notes

I tried multiple versions of jsdom. This is the same issue as https://github.com/vmware-archive/clarity/issues/5985. The proposed workaround still works for me fortunately, but it doesn't seem that the issue was completely fixed. Surprisingly, I didn't run into this issue when using CRA + Jest (before migrating to Vite + Vitest). Tests were also running in jsdom.

antoninbas commented 1 year ago

This code checks whether the execution environment is Jest: https://github.com/vmware-clarity/core/blob/b21b14633259f717f25d7881ca1d43d08a0a8822/projects/core/src/internal/utils/environment.ts#L13-L15

Maybe we could extent this to check for Vitest as well. I will try it out.

github-actions[bot] commented 1 year ago

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.

vmware-clarity / core