vue: add jest testing hints on imports (#2568)

Add documentation on import order for jest (or other) unit tests using CJS transformations
to the READMEs of all vue packages

Fix #2250

Author: lucas-koehler

packages/vue-vanilla/README.md

@@ -194,6 +194,10 @@ Attributes not specified here fall back to either the `defaultStyles` or provide
 }
 ```
 
+### Testing in CJS-transformed environments
+
+When writing tests for custom renderers in a Jest/Vitest CJS-transformed environment, `vue` should be imported first in your custom renderers. See [Testing with Jest / Vitest](../vue/README.md#testing-with-jest--vitest) in the `@jsonforms/vue` README.
+
 ## License
 
 The JSONForms project is licensed under the MIT License. See the [LICENSE file](https://github.com/eclipsesource/jsonforms/blob/master/LICENSE) for more information.

packages/vue-vuetify/README.md

@@ -174,6 +174,10 @@ provide(
 );
 ```
 
+## Testing in CJS-transformed environments
+
+When writing tests for custom renderers in a Jest/Vitest CJS-transformed environment, `vue` should be imported first in your custom renderers. See [Testing with Jest / Vitest](../vue/README.md#testing-with-jest--vitest) in the `@jsonforms/vue` README.
+
 ## License
 
 The JSONForms project is licensed under the MIT License. See the [LICENSE file](https://github.com/eclipsesource/jsonforms/blob/master/LICENSE) for more information.

packages/vue/README.md

@@ -289,6 +289,27 @@ const myComponent = defineComponent({
 The injected `jsonforms` object is not meant to be modified directly.
 Instead it should be modified via the provided `dispatch` and by changing the props of the `json-forms` component.
 
+### Testing with Jest / Vitest
+
+When testing custom renderers in a CJS-transformed test environment (Jest, or Vitest configured with CJS transforms), `vue` must be imported **before** `@jsonforms/vue` in your renderer files:
+
+```ts
+// Correct - import vue before @jsonforms/vue
+import { defineComponent } from 'vue';
+import { rendererProps, useJsonFormsControl } from '@jsonforms/vue';
+```
+
+```ts
+// May produce errors such as:
+//   "Property '<name>' was accessed during render but is not defined on instance"
+import { rendererProps, useJsonFormsControl } from '@jsonforms/vue';
+import { defineComponent } from 'vue';
+```
+
+The reason is that several components shipped by `@jsonforms/vue` (e.g. `JsonForms`, `DispatchRenderer`) call `defineComponent` at module load. When the package is consumed via `require()` and the test runner's CJS transform doesn't hoist imports, `vue` must already be evaluated at that point. Thus, importing `vue` first in renderer and test files is the safest default.
+
+Browser/dev builds using Webpack, Vite, or other ESM-aware bundlers are not affected.
+
 ## License
 
 The JSON Forms project is licensed under the MIT License. See the [LICENSE file](https://github.com/eclipsesource/jsonforms/blob/master/LICENSE) for more information.