1.0.5 breaks data merge

[nicooprat]

Subject of the issue

Upgrading from 1.0.4 to 1.0.5 makes some of our tests to fail. Looks like the data merge is broken, and adding a console.log() in the data() function at wrapper creation is now displayed twice:

With 1.0.4:

With 1.0.5:

The first one pass through here: https://github.com/vuejs/vue/blob/7912f75c5eb09e0aef3e4bfd8a3bb78cad7540d7/src/core/util/options.js#L104

The second time through there: https://github.com/vuejs/vue/blob/7912f75c5eb09e0aef3e4bfd8a3bb78cad7540d7/src/core/util/options.js#L98

Our code creates a wrapper by merging instance options like this:

const wrapper = shallowMount(OpportunityFeedback, { data() { ... });

Steps to reproduce

Tell us how to reproduce this issue. Please provide a working and simplified example.

Expected behaviour

The data gets merged correctly as before.

Actual behaviour

Data become undefined and this errocr is printed:

[Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.

Possible Solution

Sticking to 1.0.4 for now. Maybe related? #1677

[afontcu]

Here's the diff between 1.0.4 and 1.0.5: v1.0.4...v1.0.5

Not sure how, but these are the only lines I could see as potentially related? v1.0.4...v1.0.5#diff-68ebb4dd9f4503e2b26a1b1ac98d4fa2R127-R132 (#1661)

[nicooprat]

You're right, I just tried to edit this file node_modules/@vue/test-utils/dist/vue-test-utils.js and rollbacked the changes you mentioned, and it works again...

[nicooprat]

So it looks like this feature is broken: https://vue-test-utils.vuejs.org/api/options.html#data

For now I removed the errors by using await setData({ ... }) instead of merging.

[lmiller1990]

Uh oh, this is a pretty major bug. I will look into this. Sorry I missed this one.

Can you post a reproduction? I'll try to reproduce in the meantime.

[lmiller1990]

I cannot reproduce (or, I don't understand how?). Can you provide a reproduction I can run locally?

I made this component:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  name: 'HelloWorld',
  data() {
    return {
      foo: 'bar',
      msg: 'nooo'
    }
  }
});
</script>

Test:

import { mount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('test one', () => {
    const msg = 'ok'

    const wrapper = mount(HelloWorld, {
      data() {
        return {
          msg: 'ok'
        }
      }
    })

    expect(wrapper.text()).toMatch(msg)
  })
})

And it's all good.

Most likely this was introduced by the feature added to make ctx.$store etc available with the composition AP plugin. But I will need to reproduce before I can fix it. Thanks!

[AleksandrSl]

Hi, seems that I encountered similar bug.
On 1.0.4 everything works fine, but fails on > 1.0.5

The most simple reproduction I come up wtih:

import { createLocalVue, shallowMount } from "@vue/test-utils"
import GenericAnalysesReview from "@/components/Bug.vue"


const localVue = createLocalVue()

async function stubComponent(
    data
) {
    return shallowMount(GenericAnalysesReview, {
        localVue,
        data() {
            return data
        },
    })
}

describe("Some test", () => {
    it("will fail", async () => {
        await stubComponent({})
    })
})

"@/components/Bug.vue"

<template>
    <div v-show="runs.length === 1"></div>
</template>

<script>
    export default {
        name: "GenericAnalysesReview",
        data() {
            return {
                runs: [],
            }
        }
    }
</script>

error

[Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.
[Vue warn]: Property or method "runs" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <GenericAnalysesReview> at src/components/Bug.vue
       <Root>
[Vue warn]: Error in render: "TypeError: Cannot read property 'length' of undefined"

found in

---> <GenericAnalysesReview> at src/components/Bug.vue
       <Root>
TypeError: Cannot read property 'length' of undefined ...

One weird notion, when {} is used directly, everything works fine (maybe some transpilation/optimization magic in this case) e.g.

import { createLocalVue, shallowMount } from "@vue/test-utils"
import GenericAnalysesReview from "@/components/Bug.vue"


const localVue = createLocalVue()

async function stubComponent(
    data
) {
    return shallowMount(GenericAnalysesReview, {
        localVue,
        data() {
            return data
        },
    })
}

describe("Some test", () => {

    it("will fail", async () => {
        await stubComponent({})
    })

    it("will not fail", async () => {
        shallowMount(GenericAnalysesReview, {
            localVue,
            data() {
                return {}
            },
        })
    })
})

[lmiller1990]

Thanks for the repro. I will try looking at this soon.

95% chance this commit is causing the problem f78f817

So if anyone else is motivated or has time you can probably try reverting this and see if that fixes the problem, should be good first step to solving this.

[nicooprat]

Thanks for the repro @AleksandrSl . Indeed I encounter this issue only when using a function to generate generic component overrides.

So if anyone else is motivated or has time you can probably try reverting this and see if that fixes the problem,

I can confirm that reverting it solves the issue. Couldn't find a working alternative for now though...