Skip to content

Computed property is not always updated #573

Closed
@bponomarenko

Description

@bponomarenko

Version

1.0.0-beta.15

Reproduction link

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

Steps to reproduce

Clone repository. Then run:

npm install
npm run test

What is expected?

All unit tests pass.

Component:

<template>
  <div id="app">
    {{ stringified }}
  </div>
</template>

<script>
export default {
  props: {
    collection: {
      type: Array,
      default: () => [],
    }
  },
  data: () => ({
    data: ''
  }),
  computed: {
    stringified() {
      return this.collection.join(',');
    }
  },
  watch: {
    collection: 'execute',
  },
  methods: {
    execute() {
      this.data = this.stringified;
    }
  }
}
</script>

Test:

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

describe('App.vue', () => {
  it('renders props.msg when passed', () => {
    const wrapper = shallow(App);
    expect(wrapper.vm.stringified).toEqual('');
    expect(wrapper.vm.data).toEqual('');

    wrapper.setProps({ collection: [1, 2, 3] });
    expect(wrapper.vm.stringified).toEqual('1,2,3');
    expect(wrapper.vm.data).toEqual('1,2,3');

    wrapper.vm.collection.push(4, 5);
    expect(wrapper.vm.stringified).toEqual('1,2,3,4,5');
    expect(wrapper.vm.data).toEqual('1,2,3,4,5');
  });
});

It is expected, that computed property will be updated as soon as collection property changed.

What is actually happening?

Computed property is not updated.


When component is rendered on the page – computed property is properly updated on "collection" property mutation.

Might be related to previously fixed #502

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