Vue-test-utils: Wrapper setData does not generate the snapshot with the data set

[dlumbrer]

What problem does this feature solve?

If execute a test by the first time, for instance:

test('simple test', () => {
    const wrapper = shallowMount(App, {
      Vue,
      }
    })
    wrapper.setData({
      test: "test",
    })
    expect(wrapper.element).toMatchSnapshot()
  })

I expect that the snapshot generated has to include the data test: "test" rendered but the result is that I see the default values (defined in the App component) instead.

What does the proposed API look like?

specify in the docs a guide that explains deeper the setData method.

[afontcu]

Hi,

can you provide a reproduction link or a complete example?

---

That being said, have you tried looking for "test" (using find() or similar) instead of using a snapshot? That would remove a whole collection of potential issues.

[lmiller1990]

You may need to do

test('simple test', async () => {
    const wrapper = shallowMount(App, {
      Vue,
      }
    })
    await wrapper.setData({
      test: "test",
    })
    expect(wrapper.element).toMatchSnapshot()
  })

await can force the test to wait for Vue to update the DOM. I could be wrong - I don't have much exp. around snapshots. I like to use expect(wrapper.html()).toContain('test').

(assuming shallowMount is not stubbing out the component that should be rendering test).

[dlumbrer]

Hi,

can you provide a reproduction link or a complete example?

That being said, have you tried looking for "test" (using find() or similar) instead of using a snapshot? That would remove a whole collection of potential issues.

I'm using "toMatchSnapshot()" doing to the test example provided by the Apollo testing guide (https://apollo.vuejs.org/guide/testing.html#simple-tests)

I'll try with other methods, thanks

---

You may need to do

test('simple test', async () => {
    const wrapper = shallowMount(App, {
      Vue,
      }
    })
    await wrapper.setData({
      test: "test",
    })
    expect(wrapper.element).toMatchSnapshot()
  })

await can force the test to wait for Vue to update the DOM. I could be wrong - I don't have much exp. around snapshots. I like to use expect(wrapper.html()).toContain('test').

(assuming shallowMount is not stubbing out the component that should be rendering test).

Using async/await worked! Thanks.