Unexpected behaviour when watching

Version

1.0.0-beta.13

Reproduction link

https://github.com/tbuteler/vue-test-utils-issue

Steps to reproduce

Clone the repository, then run:

yarn install
yarn run tests

What is expected?

Component:

<template>
  <div id="app">
    <div>
      <pre>data.text: <em>{{ text }}</em></pre>
    </div>
    <!-- Tests fail in 1.0.0-beta.13 with .fails portion of the code -->
    <div class="fails">
      <pre>computed.text: <em>{{ computedText }}</em></pre>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      text: '',
      basket: []
    }
  },
  computed: {
    computedText () {
      return this.text
    }
  },
  watch: {
    text () {
      this.basket.push(this.computedText)
    }
  }
}
</script>

Test:

import { shallow } from '@vue/test-utils'
import App from '../src/App.vue'

describe('App.vue', () => {
  it('updates computed properties', () => {
    const wrapper = shallow(App)
    expect(wrapper.vm.text).toBe('')
    expect(wrapper.vm.basket).toEqual([])
    wrapper.setData({ text: 'foo' })
    expect(wrapper.vm.text).toBe('foo')
    expect(wrapper.vm.computedText).toBe('foo')
    expect(wrapper.vm.basket).toEqual(['foo']) // Fails
  })
})

In the text watch handler, I expected the computed property to have been updated to the latest value of text.

What is actually happening?

The computed property is somehow lagging behind. Curiously, this only happens when the computed property is actually being rendered inside the template, otherwise it behaves as expected.

---

This issue was not present in 1.0.0-beta.12, regardless of what the template contains. From the release information, I would suspect it has something to do with the new sync functionality.

[tbuteler]

Tested this today with my actual suite and its components, which are far more complex than the examples above and everything worked as expected. Thanks for your effort!

[eddyerburgh]

This is a bug caused by dependencies running in the incorrect order. I’ve created a fix that will be released in the next version.

For the moment, you will need to set sync to false and use Vue.nextTick:

it('updates computed properties', (done) => {
  const wrapper = shallow(App, {
    sync: false
  })
  Vue.nextTick(() => {
    expect(wrapper.vm.basket).toEqual(['foo']) // Fails
    done()
  })
})

Alternatively, you can use beta.12.