vue-test-utils-vuex-example icon indicating copy to clipboard operation
vue-test-utils-vuex-example copied to clipboard

(n/t) Could you add an example which is testing the return of an Async Action?

Open gkatsanos opened this issue 7 years ago • 8 comments

Could you add an example which is testing the return of an Async Action?

gkatsanos avatar Oct 28 '17 15:10 gkatsanos

I'm actually looking at writing a library right now to make this easier, but you can do something like this:

test('promise based action', (done) => {
  const wrapper = mount(Component)
  setTimeout(() => {
    expect(wrapper.hasClass('updated').toBe(true)
    done()
  })
})

eddyerburgh avatar Oct 28 '17 15:10 eddyerburgh

I was looking at http://facebook.github.io/jast/docs/en/tutorial-async.html . I was wondering how I can combine that with Vuex.

gkatsanos avatar Oct 28 '17 15:10 gkatsanos

Essentially Imagine you have an action such as:

export const fetchItems = ({ commit, dispatch, state }) => {
  commit(types.PRE_HTTP_REQUEST);
  api.fetchItems(state.apiEntryPoint, state.nextPage).then((data) => {
    dispatch('receiveItems', data);
  }).catch(() => {
    commit(types.FETCHED_ADS_FAIL);
  });
};

using Axios like:

const fetchItems = (url, page = 1) => (
  axios(url, { params: { page } })
    .then(response => response.data)
    .catch((err) => {
      throw err;
    })
);

and you wanna see if the content returned is what you're expecting and then that the Component dependent on that content (Vuex) looks as it should

gkatsanos avatar Oct 28 '17 15:10 gkatsanos

You'd have to mock the axios call. I just wrote a test that uses a library called flush-promises and async Jest tests — https://github.com/eddyerburgh/chapter-6/blob/master/src/store/tests/store-config.spec.js#L34

eddyerburgh avatar Oct 28 '17 16:10 eddyerburgh

@eddyerburgh I meant having an example page that basically does this: https://vuex.vuejs.org/en/testing.html but with Jest instead

gkatsanos avatar Oct 29 '17 08:10 gkatsanos

Ok, do you mean there should be on on vue-test-utils? If so, can you make an issue there so that I can track it and any contributors can be involved

eddyerburgh avatar Oct 29 '17 09:10 eddyerburgh

Sorry I just looked around and I see in chapter-6 a pretty good example : https://github.com/eddyerburgh/chapter-6/blob/master/src/store/tests/actions.spec.js Yeah I was wondering if a small example on how to test the store (not a component that depends on the store but the store itself like in chapter-6) can be part of the main documentation over in https://vue-test-utils.vuejs.org/en/guides/using-with-vuex.html will do! ✔️

gkatsanos avatar Oct 29 '17 09:10 gkatsanos

Thanks 🙂

eddyerburgh avatar Oct 29 '17 09:10 eddyerburgh