Error when mounting DxColumn with Vue test-utils

[faso]

Bug Report

Package versions:

devexteme version: ^19.1.4
devextreme-vue version: ^=19.1.4

Steps to reproduce: Repo for reproduction

1. clone https://github.com/faso/dx-column-mount-bug-repro
2. npm install
3. npm install -g @vue/cli
4. npm run test:unit

Can't test it on a clean machine right now, but this should be enough.

Current behavior:

console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
    [Vue warn]: Error in beforeMount hook: "TypeError: Cannot read property 'init' of undefined"

    found in

    ---> <DxColumn>
           <DxDataGrid>
             <HelloWorld>
               <Root>

Expected behavior: The test should run fine

Seems like this line in configuration-component.js is returning undefined

var config = this.$vnode.componentOptions.$_config;

This could potentially be a limitation of JSDOM that's used to mount the components within Vue's test-utils, but I don't think so, since this line doesn't really touch any browser APIs.

[faso]

The issue is probably not specific to DxColumn though, most likely it holds true for any nested configuration components.

[faso]

Any update on this?

[SirWernich]

i'm having a similar problem. i created a field component that has an NxsNumberBox in it (it extends DxNumberBox and changes the display format based on focus) in it and in there I set the validation with a v-if so that the component doesn't have validation when not necessary.

<nxs-form-field>
    <nxs-number-box>
        <dx-validator v-if="hasValidation">
            <dx-required-rule :message="requiredWarning" v-if="required" />
        </dx-validator>
    </nxs-number-box>
</nxs-form-field>

even if the v-if is removed from the DxValidator and the DxRequiredRule, it fails with a stack trace of

console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Error in beforeMount hook: "TypeError: Cannot read property 'init' of undefined"
      
      found in
      
      ---> <DxRequiredRule>
             <DxValidator>
               <NxsNumberBox>
                 <NxsFormField>
                   <NxsNumberField>
                     <Root>
    console.error node_modules/vue/dist/vue.runtime.common.dev.js:1884
      TypeError: Cannot read property 'init' of undefined
          at VueComponent.beforeMount (<project path>\node_modules\devextreme-vue\core\configuration-component.js:23:16)
          at invokeWithErrorHandling (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:1850:57)
          at callHook (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:4201:7)
          at mountComponent (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:4025:3)
          at VueComponent.Object.<anonymous>.Vue.$mount (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:8386:10)
          at init (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:3112:13)
          at createComponent (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:5952:9)
          at createElm (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:5899:9)
          at createChildren (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:6027:9)
          at createElm (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:5928:9)
          at VueComponent.patch [as __patch__] (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:6449:7)
          at VueComponent.Vue._update (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:3927:19)
          at VueComponent.updateComponent (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:4048:10)
          at Watcher.get (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:4459:25)
          at new Watcher (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:4448:12)
          at mountComponent (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:4055:3)
          at VueComponent.Object.<anonymous>.Vue.$mount (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:8386:10)
          at init (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:3112:13)
          at createComponent (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:5952:9)
          at createElm (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:5899:9)
          at createChildren (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:6027:9)
          at createElm (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:5928:9)
          at VueComponent.patch [as __patch__] (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:6449:7)
          at VueComponent.Vue._update (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:3927:19)
          at VueComponent.updateComponent (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:4048:10)
          at Watcher.get (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:4459:25)
          at new Watcher (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:4448:12)
          at mountComponent (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:4055:3)
          at VueComponent.Object.<anonymous>.Vue.$mount (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:8386:10)
          at init (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:3112:13)
          at createComponent (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:5952:9)
          at createElm (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:5899:9)
          at createChildren (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:6027:9)
          at createElm (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:5928:9)
          at createChildren (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:6027:9)
          at createElm (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:5928:9)
          at createChildren (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:6027:9)
          at createElm (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:5928:9)
          at VueComponent.patch [as __patch__] (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:6449:7)
          at VueComponent.Vue._update (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:3927:19)
          at VueComponent.updateComponent (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:4048:10)
          at Watcher.get (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:4459:25)
          at new Watcher (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:4448:12)
          at mountComponent (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:4055:3)
          at VueComponent.Object.<anonymous>.Vue.$mount (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:8386:10)
          at init (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:3112:13)
          at createComponent (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:5952:9)
          at createElm (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:5899:9)
          at VueComponent.patch [as __patch__] (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:6449:7)
          at VueComponent.Vue._update (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:3927:19)
          at VueComponent.updateComponent (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:4048:10)
          at Watcher.get (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:4459:25)
          at new Watcher (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:4448:12)
          at mountComponent (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:4055:3)
          at VueComponent.Object.<anonymous>.Vue.$mount (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:8386:10)
          at init (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:3112:13)
          at createComponent (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:5952:9)
          at createElm (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:5899:9)
          at VueComponent.patch [as __patch__] (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:6449:7)
          at VueComponent.Vue._update (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:3927:19)
          at VueComponent.updateComponent (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:4048:10)
          at Watcher.get (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:4459:25)
          at new Watcher (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:4448:12)
          at mountComponent (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:4055:3)
          at VueComponent.Object.<anonymous>.Vue.$mount (<project path>\node_modules\vue\dist\vue.runtime.common.dev.js:8386:10)
          at Object.mount (<project path>\node_modules\@vue\test-utils\dist\vue-test-utils.js:8649:21)
          at Object.<anonymous> (<project path>\ClientApp\components\form\fields\__tests__\NxsNumberField.spec.ts:28:25)
          at Object.asyncJestTest (<project path>\node_modules\@jest\core\node_modules\jest-jasmine2\build\jasmineAsyncInstall.js:102:37)
          at <project path>\node_modules\@jest\core\node_modules\jest-jasmine2\build\queueRunner.js:43:12
          at new Promise (<anonymous>)
          at mapper (<project path>\node_modules\@jest\core\node_modules\jest-jasmine2\build\queueRunner.js:26:19)
          at <project path>\node_modules\@jest\core\node_modules\jest-jasmine2\build\queueRunner.js:73:41
          at processTicksAndRejections (internal/process/task_queues.js:93:5)

i'm using:

devextreme: 19.1.7
devextreme-vue: 19.1.7
vue: 2.6.10
vue-jest: 4.0.0-beta.2
vue/test-utils: 1.0.0-beta.29

however, the app works perfectly fine with these components.