Test methods (Composition API)

[standbyoneself]

I am trying to test my method logout() that should be called by clicking on the img element. In order to do that and also because we cannot access to this method directly by wrapper.vm.* I want to assert that inner methods inside the logout() are also called. But these methods are not called.

User.vue:

<template>
  <div class="user">
    <img
      class="user__avatar"
      :src="user.avatar_url"
      data-testid="user-avatar"
    />
    <animated-anchor
      :text="user.login"
      :href="user.html_url"
      class="user__name"
    />
    <img
      :src="logoutIcon"
      class="user__logout-icon"
      @click="logout()"
      data-testid="user-logout-icon"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from '@vue/runtime-core';
import { GithubUser } from '@/types';
import AnimatedAnchor from './AnimatedAnchor.vue';
import logoutIcon from '@/assets/icons/logout.svg';
import { useRouter } from 'vue-router';
import { useStore } from '@/store';

export default defineComponent({
  components: { AnimatedAnchor },
  name: 'User',
  props: {
    user: {
      type: Object as PropType<GithubUser>,
      required: true,
    },
  },
  setup() {
    const router = useRouter();
    const store = useStore();

    const logout = async () => {
      await store.dispatch('logout');
      router.push({ name: 'Auth' });
    };

    return { logoutIcon, logout };
  },
});
</script>

User.spec.ts:

jest.mock('vue-router', () => ({
  ...jest.requireActual('vue-router'),
  useRouter: () => ({
    push: jest.fn(),
  }),
}));

jest.mock('@/store');

import User from '@/components/User.vue';
import { shallowMount } from '@vue/test-utils';
import userStub from '../../../__stubs__/user.stub';
import { useRouter } from 'vue-router';
import { useStore } from '@/store';

describe('User.vue', () => {
  describe('logout icon', () => {
    it.only('should call `logout()` on click', async () => {
      const wrapper = shallowMount(User, {
        props: {
          user: userStub,
        },
      });

      const router = useRouter();
      const store = useStore();

      const logoutIcon = wrapper.get('[data-testid="user-logout-icon"]');

      await logoutIcon.trigger('click');

      expect(store.dispatch).toHaveBeenCalled();
      expect(router.push).toHaveBeenCalled();
    });
  });
});

/src/store/__mocks__/index.ts:

export const useStore = () => ({
  dispatch: jest.fn(),
});

Running tests causes this:
● User.vue › logout icon › should call logout() on click

expect(jest.fn()).toHaveBeenCalled()

Expected number of calls: >= 1
Received number of calls:    0

  70 |       await logoutIcon.trigger('click');
  71 |
> 72 |       expect(store.dispatch).toHaveBeenCalled();
     |                              ^
  73 |       expect(router.push).toHaveBeenCalled();
  74 |     });
  75 |   });

  at Object.<anonymous> (__tests__/unit/components/User.spec.ts:72:30)

I have the reproduction repository: https://github.com/standbyoneself/ws-test-client

What am I do wrong? How to fix that?

[freakzlike]

I think it is better to use the store and router as plugins instead of mocking the module. Then you can use jest.spyOn to check whether methods have been called. You should also check for the passed arguments, to be sure that store.dispatch has been called with 'logout'.

import User from '@/components/User.vue';
import { shallowMount } from '@vue/test-utils';
import userStub from '../../../__stubs__/user.stub';
import router from '@/router'; // Change path to your router
import store from '@/store';

describe('User.vue', () => {
  describe('logout icon', () => {
    it.only('should call `logout()` on click', async () => {
      const wrapper = shallowMount(User, {
        props: {
          user: userStub,
        },
        global: {
          // Install as plugins
          plugins: [store, router]
        }
      });

      // Use mockImplementation to avoid inside logic
      const spyDispatch = jest.spyOn(store, 'dispatch').mockImplementation();
      const spyRouterPush = jest.spyOn(router, 'push').mockImplementation();

      const logoutIcon = wrapper.get('[data-testid="user-logout-icon"]');

      await logoutIcon.trigger('click');

      expect(spyDispatch).toHaveBeenCalledTimes(1);
      expect(spyDispatch).toHaveBeenCalledWith('logout');

      expect(spyRouterPush).toHaveBeenCalledTimes(1);
      expect(spyRouterPush).toHaveBeenCalledWith({ name: 'Auth' });

      spyDispatch.mockRestore();
      spyRouterPush.mockRestore();
    });
  });
});

[standbyoneself]

@freakzlike thanks for your response and a possible workaround!

After couple of hours of researching I solved this by saving the reference of the jest.fn() in the variable (mocked method creates each time I import the module).

This is the code that may be useful:

User.spec.ts

import User from '@/components/User.vue';
import { shallowMount } from '@vue/test-utils';
import userStub from '../../../__stubs__/user.stub';
import { useStore } from '@/store';
import { useRouter } from 'vue-router';

jest.mock('vue-router');
jest.mock('@/store');

describe('logout icon', () => {
  it('should call `logout()` on click', async () => {
    const wrapper = shallowMount(User, {
      props: {
        user: userStub,
      },
    });

    const store = useStore();
    const router = useRouter();

    const logoutIcon = wrapper.get('[data-testid="user-logout-icon"]');

    await logoutIcon.trigger('click');

    expect(store.dispatch).toHaveBeenCalledWith('logout');
    expect(router.push).toHaveBeenCalledWith({ name: 'Auth' });
  });
});

__mocks__/vue-router.ts:

const spyPush = jest.fn();

export const useRouter = () => ({
  push: spyPush,
});

src/store/__mocks__/index.ts:

const spyDispatch = jest.fn();

export const useStore = () => ({
  dispatch: spyDispatch,
});