Skip to content

Using setData with array does not trigger watchers or update the view #605

Closed
@tbuteler

Description

@tbuteler

Version

1.0.0-beta.16

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">
    <ul v-if="items.length > 0">
      <li v-for="item in items">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      loaded: false,
      items: []
    }
  },
  watch: {
    items () {
      this.loaded = true
    }
  }
}
</script>

Test:

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

describe('App.vue', () => {
  it('array data triggers watchers', () => {
    const wrapper = mount(App)
    wrapper.setData({ items: ['Foo', 'Bar'] })
    expect(wrapper.vm.loaded).toBe(true)
    expect(wrapper.findAll('li').at(0).text()).toBe('Foo')
    expect(wrapper.findAll('li').at(1).text()).toBe('Bar')
  })
})

After doing setData I expected the HTML to be updated and the watcher (which sets loaded to true) to be run.

What is actually happening?

Although the wrapper.vm.items property yields what I just set, no updates are triggered on the wrapper and the tests fail.


Test passes in 1.0.0-beta.15.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions