diff --git a/packages/vue-vanilla/README.md b/packages/vue-vanilla/README.md index ef704d3b2..6477e9f82 100644 --- a/packages/vue-vanilla/README.md +++ b/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. diff --git a/packages/vue-vuetify/README.md b/packages/vue-vuetify/README.md index 5e8e171ee..e782a711d 100644 --- a/packages/vue-vuetify/README.md +++ b/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. diff --git a/packages/vue/README.md b/packages/vue/README.md index a03c58463..3d97db659 100644 --- a/packages/vue/README.md +++ b/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 '' 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.