Mocking vue-router's push() method in Unit testing - Vue 3

Question

I'm new to Vue and StackOverflow, but I'll try to explain my problem.

I get a TypeError when I try to run the unit test for my application.

"TypeError: Cannot read properties of undefined (reading 'push')"

https://i.sstatic.net/pqUkZ.png

The program runs exactly as it should otherwise, it's only the test that fails.

The test tries to run $router.push in the application, but can't, because it doesn't know what that is, how can I successfully mock the push method while testing?

My example.spec.js test code looks like this:

import { shallowMount } from '@vue/test-utils'
import LoginView from '@/views/LoginView.vue'

describe('LoginView.vue', () => {
  it('loginSuccess-test', async () => {

    const wrapper = shallowMount(LoginView, {
      mocks: {
        $router: {
          push: () => {}
        }
      }
    })

    await wrapper.setData({username:'user', password:'pass'})
    await wrapper.find('button').trigger('click')
    const statusId = wrapper.find('#loginstatusLabel');

    expect(wrapper.find('#loginstatusLabel').element.textContent).toBe('true')

  })
})

My LoginView.vue methods code looks like this:

  methods: {
    checkCredentials() {
      if (this.username === 'user' && this.password === 'pass') {
        this.loginSuccess = 'true';
        this.$router.push({ name: 'home' });
      }
      else {
        this.toast.error("Username or password is incorrect    Try again");
        this.message = 'Login failed!';
        this.isActive = false;

      }
    }
</script>

I'm trying to make the push method redirect the user to "home" when he successfully logs in and mock the redirection in testing.

Any help will be greatly appreciated

Aviv Galmidi · Accepted Answer · 2022-09-11 13:45:46Z

1

In vue3 you need to wrap the mocks property inside global property

const wrapper = shallowMount(LoginView, {
  mocks: {
    $router: {
      push: () => {}
    }
  }
})

const wrapper = shallowMount(LoginView, {
  global: {
    mocks: {
      $router: {
        push: () => {}
      }
    }
  }
})

Source: https://test-utils.vuejs.org/guide/advanced/vue-router.html

answered Sep 11, 2022 at 13:45

Aviv Galmidi

111 bronze badge

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

Comments

Eze Kohon · Accepted Answer · 2022-03-05 20:40:19Z

0

Try this:

mocks: {
        $router: {
          push: jest.fn(),
        }
      }

answered Mar 5, 2022 at 20:40

Eze Kohon

3252 silver badges13 bronze badges

1 Comment

Titus Kristiansen Over a year ago

I've already tried that, but the same TypeError gets thrown.

Collectives™ on Stack Overflow

Mocking vue-router's push() method in Unit testing - Vue 3

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related