Error when testing JsonForms with vitest

General
1

Full error stack trace

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ 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 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
ReferenceError: window is not defined
❯ getCurrentEventPriority ../../node_modules/react-dom/cjs/react-dom.development.js:10993:22
❯ requestUpdateLane ../../node_modules/react-dom/cjs/react-dom.development.js:25495:19
❯ dispatchSetState ../../node_modules/react-dom/cjs/react-dom.development.js:16648:14
❯ Object.onChange [as current] src/lib/preview/Preview.tsx:109:13
107| cells={uiTypesCustomCells}
108| onChange={(event) => {
109| setData(event.data);
| ^
110| onFormDataChange?.(simplifyEventStructure(event));
111| }}
❯ ../../node_modules/@jsonforms/react/src/JsonFormsContext.tsx:260:59
❯ invokeFunc ../../node_modules/lodash/debounce.js:95:19
❯ trailingEdge ../../node_modules/lodash/debounce.js:144:14
❯ Timeout.timerExpired [as _onTimeout] ../../node_modules/lodash/debounce.js:132:14
❯ listOnTimeout node:internal/timers:588:17
❯ processTimers node:internal/timers:523:7
This error originated in “src/lib/preview/tests/errorMessages.test.tsx” test file. It doesn’t mean the error was thrown inside the file itself, but while it was running.
This error was caught after test environment was torn down. Make sure to cancel any running tasks before test finishes:

  • cancel timeouts using clearTimeout and clearInterval
  • wait for promises to resolve using the await keyword
    ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Hello,
I’m using @jsonforms/react@3.6.0
I’m writing unit tests with vitest that render JsonForms.
When I run the test I sometimes get the error:
ReferenceError: window is not defined (see full error above)
It’s caused by a timing issue of the lodash debounce that is used inside JsonForms.
The questions is what’s the proper way to mock the JsonForms debounce in my tests so it will run immediately and won’t cause timing issue.

2

Hi @YuriSapiens,

I think you have multiple options available:

The debounce in the JSON Forms component is 10ms long, so you could wait in each test for that amount of time.

You could setup your tests to resolve lodash/debounce to your own implementation which then just applies the function immediately without debouncing.

You could run JSON Forms in a controlled style. Then you don’t need to use onChange at all and therefore don’t need to care about that it is debounced.

3

Hi @sdirix
Thanks for your reply and sorry for my delayed feedback.
As you suggested, I’m mocking the lodash/debounce in my tests to eliminate the timeout of debounce.
this is my mock:
vi.mock(‘lodash/debounce’, () => ({
default: (fn: (…args: any[]) => any) => {
const debounced = (…args: any[]) => {
fn(…args);
};
debounced.cancel = vi.fn();
debounced.flush = vi.fn();
return debounced;
},
}));

but still I get the ‘window is not defined’ error sometimes and only in the CI runs.

Do you have maybe a working example of such a mock for debounce?
Or a suggestion how to achieve such a mock that will work consistently?