Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/vue-vanilla/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
4 changes: 4 additions & 0 deletions packages/vue-vuetify/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
21 changes: 21 additions & 0 deletions packages/vue/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down