We are using CustomRenderers on top of vuetify and test them with jest, vue-test-utils and testing-library. We had very weird errors during test execution:
console.warn
[Vue warn]: Property "controlWrapper" was accessed during render but is not defined on instance.
...
Cannot read properties of undefined (reading 'control')
It turns out that the error happens because of the import order of defineComponent. In our custom renderer, we had the following:
<script lang="ts">
import { ControlElement } from "@jsonforms/core";
import { rendererProps, RendererProps, useJsonFormsEnumControl } from "@jsonforms/vue";
import { useVuetifyControl, ControlWrapper, DisabledIconFocus } from "@jsonforms/vue-vuetify";
import { defineComponent } from "vue";
if this is switched to
<script lang="ts">
import { ControlElement } from "@jsonforms/core";
import { defineComponent } from "vue";
import { rendererProps, RendererProps, useJsonFormsEnumControl } from "@jsonforms/vue";
import { useVuetifyControl, ControlWrapper, DisabledIconFocus } from "@jsonforms/vue-vuetify";
the tests run properly. Note that the display is completely fine.
Expected behavior
Either the import order shouldn't matter, or at least that should be written extremely prominently in the documentation.
Clone the repository and execute yarn install and then yarn test
See error
Go to the file SelectFieldRenderer and switch the order of import { defineComponent } from "vue"; and import { rendererProps, RendererProps, useJsonFormsEnumControl, } from "@jsonforms/vue";
See no error
You can also run yarn dev to see that everything seems nice in the browser.
I couldn´t find an obvious reason for this issue. But we think it might be related to circular dependencies in JSON Forms. We created an issue to resolve them in the future.
Describe the bug
We are using CustomRenderers on top of vuetify and test them with jest, vue-test-utils and testing-library. We had very weird errors during test execution:
It turns out that the error happens because of the import order of
defineComponent
. In our custom renderer, we had the following:if this is switched to
the tests run properly. Note that the display is completely fine.
Expected behavior
Either the import order shouldn't matter, or at least that should be written extremely prominently in the documentation.
Steps to reproduce the issue
Reproduction:
yarn install
and thenyarn test
SelectFieldRenderer
and switch the order ofimport { defineComponent } from "vue";
andimport { rendererProps, RendererProps, useJsonFormsEnumControl, } from "@jsonforms/vue";
You can also run
yarn dev
to see that everything seems nice in the browser.Most relevant code (see reproduction repo)
and here is the test:
and the test component:
Screenshots
No response
Which Version of JSON Forms are you using?
v3.1.0
Framework
Vue
RendererSet
Other (please specify in the Additional context field)
Additional context
We use jsonforms/vue-vuetify renderers in v3.1.0.preview - however I believe the problem resides with jsonforms/vue as that import messes up the test.