setData does not force a re-render of the component when using v-model, data(), and a computed property

[s-robertson]

Version

1.0.0-beta.13

Reproduction link

https://github.com/s-robertson/vtu-setdata

Steps to reproduce

Create a new Vue component with the following criteria:

1. Have data() return an object containing an empty string, e.g. msg
2. Have a computed property that returns a boolean depending on if msg is empty or not. E.g. hasMsg
3. Have an <input> in the component template that uses v-model, bound to msg
4. Have an element, such as an <h1> in the component template that uses v-if, bound to hasMsg. This element must come AFTER the <input> in the template

Now write a unit test that:

1. Mounts the component via shallow()
2. Calls setData and sets msg to a non-empty string
3. Checks to see if the template contains the <h1>

Finally, run the unit test.

What is expected?

Calling setData will cause the component to re-render, making hasMsg be true and the test will pass.

What is actually happening?

Calling setData does not cause the component to re-render. The unit test cannot find the <h1> element and fails:

 FAIL  tests/unit/HelloWorld.spec.js
  HelloWorld.vue
    ✕ renders props.msg when passed (36ms)

  ● HelloWorld.vue › renders props.msg when passed

    expect(received).toBe(expected) // Object.is equality
    
    Expected value to be:
      true
    Received:
      false

       9 |     wrapper.setData({ msg });
      10 | 
    > 11 |     expect(wrapper.contains('h1')).toBe(true);
      12 |   })
      13 | });
      14 | 
      
      at Object.<anonymous> (tests/unit/HelloWorld.spec.js:11:36)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        1.062s
Ran all test suites.
 ERROR  jest exited with code 1.
error Command failed with exit code 1.

---

What's interesting is that the order of the <input> and <h1> in the template matters. If the <h1> comes before the <input> the test will also pass.

You can also get the test to pass by forcefully updating the component via wrapper.vm.$forceUpdate(); after you've called setData.

[eddyerburgh]

I believe this has been fixed in the dev branch. The test case you provided passes.

[s-robertson]

Hi @eddyerburgh,

I switched to the dev branch in my example project, but am still seeing the unit test fail:

s-robertson/vtu-setdata@7758fa2

[eddyerburgh]

That's because the dev branch did not have the updated built file.

I've released the fixes in 1.0.0-beta.14

[An-AngryBear]

@eddyerburgh

version: @vue/test-utils": "^1.0.0-beta.16"

I have a v-if pointing to a data property called errors.recordType on an element with the attribute data-test-id="record-type-error"

this fails...

const wrapper = mount(Modal)
wrapper.setData({ errors: { 'recordType': 'Error Message' } })
expect(wrapper.contains('[data-test-id="record-type-error"]')).toBe(true)

this does not...

const wrapper = mount(Modal)
wrapper.setData({ errors: { 'recordType': 'Error Message' } })
wrapper.vm.$forceUpdate()
expect(wrapper.contains('[data-test-id="record-type-error"]')).toBe(true)

Seems to not be fixed yet, unless I'm doing something wrong.

[maoberlehner]

I have a similar problem as @An-AngryBear with 1.0.0-beta.16

<template>
  <div>
    <div>
      <h2>Active stubs</h2>
      <div
        v-if="!activeStubs.length"
        data-qa="no active stubs info"
      >
        No stubs enabled!
      </div>
      <table
        v-else
        data-qa="active stubs"
      >
        <tr
          v-for="(stub, index) in activeStubs"
          :key="index"
          data-qa="active stub"
        >
          <td>{{ stub.url && stub.url.toString() }}</td>
          <td>{{ stub.type }}</td>
          <td>{{ stub.code }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: `NetworkTabContent`,
  data() {
    return {
      activeStubs: [],
    };
  },
};
</script>

test(`It should render a table of active stubs.`, () => {
  wrapper.setData({ activeStubs: [{}, {}] });
  // Without the next line, the test fails because
  // the component is not rerendered.
  wrapper.vm.$forceUpdate();

  expect(wrapper.contains(`[data-qa="active stubs"]`)).toBe(true);
  expect(wrapper.findAll(`[data-qa="active stub"]`).length).toBe(2);
});

[narenderv7]

@maoberlehner Similarly I'm using v-if = "show" property, Initially it was set to false and I'm making it as true in a method. I've tried set the {show = true} using (setData) and called the particular method But got a _isDestroyed of undefined. please see the code below.

Test.vue
<template>
<div>some data</div>
<child v-if="show"></child>
</template>

<script>
export default {
   name : 'test',
   data() => {
   return {
         show: false
     }
  },
    methods: {
       toggleShow() {
          this.show = !this.show
       }
    }
}
</script>

Test.test.js
describe('Methods ', () => {
    const mountComponent = () => {
        return shallowMount(Test, { 
        stubs: {
           'child': true
        }
        })
     }
  
    it('test toggle',  done => {
       const wrapper = mountComponent()
        wrapper.setData({ show: true });
        wrapper.vm.$forceUpdate()
       wrapper.vm.toggleShow()
       expect(wrapper.vm.show).toBe(false) // should to toggle
       done()
     })
})

While running this test got following error ~~

Test.test.js › Methods › should call toggleShow

TypeError: Cannot read property '_isDestroyed' of undefined

  57 |       const wrapper = mountComponent()
> 58 |       wrapper.setData({show: true})
     |               ^
  59 |       wrapper.vm.$forceUpdate()
  60 |       wrapper.vm.toggleShow()
  61 |       expect(wrapper.vm.show).toBe(false)

  at destroy (node_modules/vue/dist/vue.runtime.common.js:4174:28)
  at invokeDestroyHook (node_modules/vue/dist/vue.runtime.common.js:5741:59)
  at removeVnodes (node_modules/vue/dist/vue.runtime.common.js:5757:11)
  at VueComponent.patch [as __patch__] (node_modules/vue/dist/vue.runtime.common.js:6170:11)
  at VueComponent.Vue._update (node_modules/vue/dist/vue.runtime.common.js:2668:19)
  at VueComponent.vm._update (node_modules/@vue/test-utils/dist/vue-test-utils.js:2095:12)
  at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.js:2786:10)
  at Watcher.get (node_modules/vue/dist/vue.runtime.common.js:3140:25)
  at Watcher.run (node_modules/vue/dist/vue.runtime.common.js:3217:22)
  at Watcher.update (node_modules/vue/dist/vue.runtime.common.js:3205:10)
  at VueComponent.Vue.$forceUpdate (node_modules/vue/dist/vue.runtime.common.js:2689:19)
  at updateChildComponent (node_modules/vue/dist/vue.runtime.common.js:2863:8)
  at prepatch (node_modules/vue/dist/vue.runtime.common.js:4142:5)
  at patchVnode (node_modules/vue/dist/vue.runtime.common.js:5923:7)
  at updateChildren (node_modules/vue/dist/vue.runtime.common.js:5820:9)
  at patchVnode (node_modules/vue/dist/vue.runtime.common.js:5934:29)
  at VueComponent.patch [as __patch__] (node_modules/vue/dist/vue.runtime.common.js:6094:9)
  at VueComponent.Vue._update (node_modules/vue/dist/vue.runtime.common.js:2668:19)
  at VueComponent.vm._update (node_modules/@vue/test-utils/dist/vue-test-utils.js:2095:12)
  at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.js:2786:10)
  at Watcher.get (node_modules/vue/dist/vue.runtime.common.js:3140:25)
  at Watcher.run (node_modules/vue/dist/vue.runtime.common.js:3217:22)
  at Watcher.update (node_modules/vue/dist/vue.runtime.common.js:3205:10)
  at Dep.notify (node_modules/vue/dist/vue.runtime.common.js:695:13)
  at Object.reactiveSetter [as show] 

(node_modules/vue/dist/vue.runtime.common.js:1012:11)
at VueComponent.proxySetter [as show]
(node_modules/vue/dist/vue.runtime.common.js:3298:26)
at VueComponent.set [as $set] (node_modules/vue/dist/vue.runtime.common.js:1034:17)
at node_modules/@vue/test-utils/dist/vue-test-utils.js:1162:10
at Array.forEach ()
at recursivelySetData (node_modules/@vue/test-utils/dist/vue-test-utils.js:1155:21)
at VueWrapper.setData (node_modules/@vue/test-utils/dist/vue-test-utils.js:1654:3)
at Object.setData (test/unit/views/tdi/HFE.test.js:59:15)

[eddyerburgh]

@narenderv7 Have you tried setting sync to false and using Vue.nextTick?

test('use Vue.nextTick', (done) => {
  const wrapper = mount(TestComponent, { sync: false })
  wrapper.trigger('click')
  Vue.nextTick(() => {
    expect(wrapper.text()).toBe('updated')
    done()
  })
})

[josemotanet]

I just came across this issue and I believe 1.0.0-beta.25 mitigates the original issue. I had a similar experience of not seeing a DOM update that would encourage a correct test assertion whereas now the assertion is returning the expected value.

I would kindly suggest @s-robertson to update to the latest version of the toolbelt and test it out. 👍

[rlecellier]

I've just ugrade from 1.0.0-beta.22 to 1.0.0-beta.25 and get a similar issue.

modal-container.vue

<template>
  <transition name="modal">
    <div id="modal" class="modal__mask" v-if="config.show" :config="config">
    <slot></slot>
    </div>
  </transition>
</template>

modal-container.specs.js

it('closes the modal when the close button is clicked', () => {
    let modalConfig = { show: true }
    const propsData = { config: modalConfig }
    const wrapper = mount(ModalContainer, {
      localVue,
      propsData,
      slots: {
        default: 'Hello world',
      },
    })

    const closeButton = wrapper.find('.modal__close')
    closeButton.trigger('click')
    expect(wrapper.isEmpty()).toBe(true)
  })

This test fail, I still have to use wrapper.vm.forceUpdate() in order to make it pass.

[eddyerburgh]

This seems like a seperate issue @rlecellier , could you create a new issue with a reproduction in either a GitHub repo or codesandbox?

[An-AngryBear]

I've found that sometimes I have to use an async function and call await on setData and setProps

[narenderv7]

I ended up stubbing it, It worked for me

[onomojo]

This seems to have regressed starting with 1.0.0-beta.30 and still broken in 1.0.0-beta.31. 1.0.0-beta.29 seems to work fine for me though.