fix: use @testing-library/userEvent for broken tests following preact…

… update

Reason the tests failed: preactjs/preact#3354

package.json

@@ -75,6 +75,7 @@
     "@svgr/rollup": "^8.1.0",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/preact": "^3.2.3",
+    "@testing-library/user-event": "^14.5.2",
     "@types/chai": "^4.3.19",
     "@types/mocha": "^10.0.8",
     "@types/node": "^22.7.0",

packages/form-js-viewer/test/spec/Form.spec.js

@@ -1,4 +1,5 @@
 import { act, fireEvent, screen, waitFor } from '@testing-library/preact/pure';
+import userEvent from '@testing-library/user-event';
 
 import { createForm, Form, schemaVersion } from '../../src';
 
@@ -666,12 +667,11 @@ describe('Form', function () {
       const elements = container.querySelector('.fjs-element').querySelectorAll('.fjs-element');
       const element = elements[index];
       const focusTarget = element.querySelector(selector);
+      const formRoot = container.querySelector('.fjs-form');
 
       // when
-      await act(() => {
-        fireEvent.focus(focusTarget);
-        fireEvent.blur(focusTarget);
-      });
+      await userEvent.click(focusTarget);
+      await userEvent.click(formRoot);
 
       // then
       expect(focusSpy).to.have.been.calledWithMatch({ formField });

packages/form-js-viewer/test/spec/render/components/FormField.spec.js

@@ -1,4 +1,5 @@
 import { fireEvent, render } from '@testing-library/preact/pure';
+import userEvent from '@testing-library/user-event';
 
 import { classes } from 'min-dom';
 
@@ -266,8 +267,8 @@ describe('FormField', function () {
   });
 
   describe('eager validation', function () {
-    it('should trigger validation on blur', function () {
-      // when
+    it('should trigger validation on blur', async function () {
+      // given
       const setStateSpy = sinon.spy();
       const { container } = createFormField({
         field: {
@@ -277,15 +278,17 @@ describe('FormField', function () {
         validationErrors: ['validation-error'],
       });
 
-      // then
       const formField = container.querySelector('.fjs-form-field');
       expect(formField).to.exist;
 
       const input = container.querySelector('input[type="text"]');
       expect(setStateSpy).not.to.have.been.called;
 
+      // when
+      await userEvent.click(input);
+      await userEvent.tab();
+
       // then
-      fireEvent.blur(input);
       expect(setStateSpy).to.have.been.calledWith({
         errors: {
           Creditor_ID: ['validation-error'],