Vue-test-utils: Unexpected behaviour when watching

[tbuteler]

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.

[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.

[tbuteler]

Thanks for the quick response, Edd.

I ran your solution locally and though it fixes the original reproduction repository's test, my own tests were still failing. I've pushed an update to the reproduction repository with a bit more code which causes it to fail again. Namely, showing the content conditionally on a user click, then attaching the test component to the document with attachToDocument: true.

(For context, I'm testing a searchable dropdown component, so the test above mimics this behaviour).

What this seems to do is trigger the watcher once on click, before the setData will trigger it again. That earlier trigger seems to cause the computed property to fail to update (as before the fix).

[tbuteler]

Should I open a new issue? Or is the second scenario something that falls outside the use-case and won't be fixed?

[eddyerburgh]

This should be fixed in #510

[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!