vee-validate: [Vue warn]: Error in directive validate bind hook: "TypeError: Cannot read property '$scopedSlots' of undefined"

Essentially, I’m just mounting a component that has children with v-validate prop on a test.

Once I remove the v-validate prop from the children, the test passes just fine.

Any idea why that happens?

Edit:

Reproducing is possible here: https://github.com/jourdanrodrigues/v-validate-issue. I’m having this issue on a MacOS Mohave and Ubuntu/Alpine (Docker) and VeeValidate 2.2.x.

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 8
  • Comments: 28 (4 by maintainers)

Most upvoted comments

Use sync: false property in options, while mounting component.

mount(YourComponent, {
    propsData: {},
    sync: false, // add this
  });

Hi, are there any updates on this issue? I am seeing a similar error using Vuetify. If I have a form like this …

<v-form v-model="isFormValid"> <!-- Layout and inputs removed for brevity --> </v-form>

… where isFormValid is just a Boolean property then I get the following error in my unit tests:

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property '$scopedSlots' of undefined"

If I remove the v-model="isFormValid" directive the test starts passing.

Where that fix “sync: false” came from? I did not find any docs for it https://vue-test-utils.vuejs.org/api/options.html#mounting-options I would like to understand what is it exactly. 🤔 But thank you anyway for providing solution.

In previous versions of vue-jest, they were trying to handle component syncing themselves, if you wanted to disable it you added the sync: false option, but that had many inconsistences (like the issues with the $scopedSlots).

In recent versions of vue-jest they no longer sync actions, that means that we, the developers, need to make sure to await any async functions now like clicking or setting a field value, also waiting for $nextTick if necessary.

Hope it helps.

Hope it helps. Had same issue and it blown my mind.

First I tried to debug my code but it wasn’t possible so I removed code one by one and tested it one by one and found that there is some issue with the concatenation. Following code is many places so it’s hard to get the exact issue.

Buggy code:

<img src="/" + consultant.company.company_logo height="65"
                                            class="mt-n3 ml-n3" />

Corrected code:

<img :src="'/' + consultant.company.company_logo" height="65"
                                            class="mt-n3 ml-n3" />