Handling promise resolution

[skray]

Sorry if this should go in the forums or chat, but I was a little confused about this section in the docs: https://vue-test-utils.vuejs.org/en/guides/getting-started.html#what-about-nexttick

It states

To simplify usage, vue-test-utils applies all updates synchronously so you don't need to use Vue.nextTick in your tests.

This is true if you are only doing DOM manipulation, but as soon as you are waiting for Promise resolution, I do not believe the statement holds.

I have what I think is a pretty common pattern in a component that I am trying to test, where it loads data from an API when it is created, and presents it in a list. Simply calling wrapper.update(), as far as I can tell, only re-renders the DOM, but does not push forward the event loop like Vue.$nextTick() does.

Explicitly calling wrapper.vm.$nextTick() does still push the event loop forward, and I get my data rendered in the DOM.

Is that the expected way to handle things in vue-test-utils? If so, I think it might be helpful to amend the What about nextTick section to clarify that nextTick is still needed for things like resolving asynchronous data retrieval.

[eddyerburgh]

Thanks for the issue 🙂

You're right, update only re renders the DOM. It doesn't affect async functions, like promises.

I think this should be added to the docs. Would you like to make a PR clarifying that update does not do this?

[skray]

I'd be happy to, I'll try to get something up tonight.

[fartek]

You can handle wrapper.vm.$nextTick by using your test runner's done/end functions.
For instance with Ava you would write a test:

// use 'test.cb' instead of just 'test' as it tells Ava to wait for a callback
test.cb('A $nextTick test that will pass', t => {
  const wrapper = shallow(MyComponent);
  wrapper.vm.$nextTick(() => {
    t.pass(); // passes the test - you can have any assertion here
    t.end(); // ends the test
  });
});

And other test runners also must have similar methods for testing async JS.

[skray]

Sorry, forgot to close this after merging #86.

Also thanks @fartek for the example, I've actually been a fan of using async/await in my tests, so I don't have to wrap anything in a callback:

it('should await synchronously', async () => {
  const wrapper = mount(MyComponent)
  
  await wrapper.vm.$nextTick()

  // assert things like data loading properly
}

[chlab]

Sorry for posting this here, but I'm having trouble with this exact case. I am writing a test for a component that loads data from an API and displays that data in a form. I'm mocking the data access layer and resolving the promise right away. With the code above, the value is never there yet and my test fails.

Here's the test:

// ...imports

describe('Profile page', () => {
  const localVue = createLocalVue()
  localVue.use(Vuex)

  // mock api data
  jest.mock('@/data/PersonData', () => {
    return {
      getOwnerData () {
        return Promise.resolve({ email: 'test@mail.ch' })
      }
    }
  })

  test('data is loaded and rendered', async () => {
    const store = createNamespacedStore('@/store/modules/Profile', 'Profile')
    const wrapper = mount(Profile, {
      store,
      localVue,
      mocks: {
        $t: jest.fn()
      }
    })

    await wrapper.vm.$nextTick()
    // this fails:
    expect(wrapper.find({ ref: 'emailField' }).text()).toBe('test@mail.ch')
    // this passes:
    setTimeout(() => {
      expect(wrapper.find({ ref: 'emailField' }).text()).toBe('test@mail.ch')
    }, 10)
  })
})

Any help on this?

[eddyerburgh]

Use flush-promises:

npm install --save-dev flush-promises

import flushPromises from 'flush-promises'

  test('data is loaded and rendered', async () => {
    const store = createNamespacedStore('@/store/modules/Profile', 'Profile')
    const wrapper = mount(Profile, {
      store,
      localVue,
      mocks: {
        $t: jest.fn()
      }
    })
    await flushPromises()
    expect(wrapper.find({ ref: 'emailField' }).text()).toBe('test@mail.ch')
  })
})

[chlab]

Thanks @eddyerburgh. Unfortunately, it still doesn't work. I have the await flushPromises() right before the expect. Again, if I put the expect into the setTimeout block, even with 1ms, the test passes.

It may be relevant to note that the component I'm testing calls the mocked function getOwnerData() in it's beforeMount hook. So it's being invoked automatically. All the examples I'm seeing with jest are invoking the async methods themselves, like:

expect(wrapper.load()).resolves.toBe(...)

[eddyerburgh]

Try calling flushPromises twice.

Here's an example test for a component that runs an async function in beforeMount—https://github.com/eddyerburgh/vue-hackernews-chapter-6/blob/master/src/views/__tests__/ItemList.spec.js#L65

[chlab]

Doesn't work either:

await flushPromises()
await flushPromises()
expect(wrapper.find({ ref: 'emailField' }).text()).toBe('test@mail.ch')

edit: huh, this works though:

flushPromises().then(() => {
  expect(wrapper.find({ ref: 'emailField' }).text()).toBe('test@mail.ch')
})

Any idea why the async/await version wouldn't work (I'm using async/await everywhere else in my code)? 🤔

[mixn]

I can +1 on @chlab’s use–case, works for me as a thenable, unfortunately doesn’t with await. 🤔

[eddyerburgh]

@mixn What test runner/ browser environment are you using?