vue: add jest testing hints on imports#2568
Conversation
- Add documentation on import order for jest (or other) unit tests using CJS transformations - Add explicit `exports` property to vue's package.json to facilitate tools finding the correct bundle Mitigates #2250
✅ Deploy Preview for jsonforms-examples ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
coverage: 82.957%. remained the same — lk/2250-vue-test-import-order-doc into master |
|
The "exports" seems to have caused test issues on windows and mac 😅 Reason: This is a known category of issue in the Node.js ecosystem — exports + workspace symlinks + cross-platform is a notorious combination. Removing the exports field was the pragmatic fix. |
lucas-koehler
changed the title
| ```ts | ||
| // May cause errors in tests: | ||
| // "Property 'controlWrapper' was accessed during render but is not defined on instance" |
There was a problem hiding this comment.
The quoted error references controlWrapper, which comes from the Vuetify bindings. The generic Vue README does not seem like the correct place for this.
| ### Testing with Jest / Vitest | ||
|
|
||
| When testing custom renderers with Jest or Vitest using CJS transforms, `vue` must be imported **before** `@jsonforms/vue` in your renderer files. | ||
| This is due to the CJS bundle eagerly evaluating Vue component definitions at `require()` time, which can cause issues when Jest's module resolution processes imports sequentially. |
There was a problem hiding this comment.
This is a bit generic. The cause seems to be that we call defineComponent at module load so vue needs to be initialized first. Do other component libraries have the same issue?
|
@sdirix I made the wording a bit more precise and also added a note to the vue-vuetify and vue-vanilla readmes referencing the vue readme. |
3 participants
Add explicitexportsproperty to vue's package.json to facilitate tools finding the correct bundleCloses #2250