Skip to content

watch mounting option should overwrite option on same component #1391

Closed
@lmiller1990

Description

@lmiller1990

Version

1.0.0-beta.30

Reproduction link

https://i-included-a-repro.com

Steps to reproduce

repro

import { mount, shallowMount } from '@vue/test-utils'

const Comp = {
  template: '<div />',
  props: ['myProp'],
  watch: {
    myProp: {
      handler(val, oldVal) {
        console.log('Original watcher triggered!')
      },
      deep: true
    }
  }
}

test('Both watchers trigger', (done) => {
  const wrapper = mount(Comp, {
    propsData: {
      myProp: 'foo'
    },
    watch: {
      myProp: {
        handler(val, oldVal) {
          console.log('Overridden watcher triggered!')
        },
        deep: true
      }
    }
  })

  wrapper.setProps({ myProp: 'ok' })

  setTimeout(() => {
    done()
  }, 100)
})

What is expected?

Only the mounting options watcher should do anything.

What is actually happening?

Both watchers are triggered.


This is because of this line here which uses Vue's watcher merge strategy, which is to create an array of watchers. That code is in Vue core, found here.

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions