eddyerburgh / vue-test-utils-vuex-example

Example repository testing vuex with vue-test-utils
53 stars 21 forks source link

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

Open gkatsanos opened 6 years ago

gkatsanos commented 6 years ago

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

eddyerburgh commented 6 years ago

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()
  })
})
gkatsanos commented 6 years ago

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 commented 6 years ago

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

eddyerburgh commented 6 years ago

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

gkatsanos commented 6 years ago

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

eddyerburgh commented 6 years ago

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

gkatsanos commented 6 years ago

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! ✔️

eddyerburgh commented 6 years ago

Thanks 🙂