Testing that Vuex action was called with specific argument (from component)

Question

I am writing a Jest test for a Vue component's method. Specifically, I want to test that a Vuex action (I've mapped to this action in the component with mapActions) was called with a certain argument.

I mock the argument that should be passed to the action-- my test is close, but the argument the action receives has a bunch of extra information, and I'm not sure why.

The method in my component that I'm testing is:

triggerSave (trip) {
  if (this.canSave) {
    const tripToSave = { tripInProcess: true, trip: { tripId: trip.tripId, }, };
    this.updateMyTrips(tripToSave);
  }
},

Where updateMyTrips is the Vuex action I've mapped to in my component.

In my jest tests, I mock the action that I'm testing in a beforeEach (along with the store)

describe('TripPlanner', () => {
  let actions;
  let store;

 beforeEach(() => {
   actions = {
     updateMyTrips: jest.fn(),
   },
  store = new Vuex.Store({
    modules: {
      trips: {
        namespaced: true,
        actions,
      },
    },
  });
});

The test itself that I have is

test('trigger save calls updateMyTrips action', () => {
const mockTrip = [
  {
    tripId: 1234,
    tripDestination: 'Rio di Janeiro',
  },
];
  const wrapper = shallowMount(TripPlanner, { store, localVue, propsData: { trip: mockTrip, canSave: true, }, },);
  wrapper.vm.updateMyTrips(mockTrip[0]);
  const mockUpdate = { tripInProcess: true, trip: { tripId: mockTrip.tripId }, };
  expect(actions.updateMyTrips).toHaveBeenCalledWith(mockUpdate);
});

When I run the test, and look at the Expected/Received values, it does receive my mockUpdate object, but also receives

"commit": [Function anonymous],
+   "dispatch": [Function anonymous],
+   "getters": Object {},
+   "rootGetters": Object {},
+   "rootState": Object {
+     "addOns": Object {},
+   "state": Object {},

So the test fails.

If I just test that expect(actions.updateMyTrips).toHaveBeenCalled the test passes...but when I test that it was called WITH that specific argument, it fails.

I don't understand why the store's dispatch, getters, state, etc. are also being received!

Because this is what context object that actions receive looks like. vm.updateMyTrips !== actions.updateMyTrips. — Estus Flask
– Estus Flask, Commented Jun 3, 2020 at 14:50
ah, that makes sense....this test should just be that the action was called. thank you! — tx291
– tx291, Commented Jun 3, 2020 at 14:51

Kevin Mendez · Accepted Answer · 2021-02-04 23:32:22Z

4

The first argument is pass automatic, the second argument is your data that you are passing to vuex.

You can pass like first argument this:

expect.any(Object),

And the second argument will be your data

const mockTrip = [
  {
    tripId: 1234,
    tripDestination: 'Rio di Janeiro',
  },
];

I dont understand for what it not say nothing the documentation about this issue.

answered Feb 4, 2021 at 23:32

Kevin Mendez

6685 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Testing that Vuex action was called with specific argument (from component)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related