在单元测试中模拟 vue-router 的 push() 方法 - Vue 3

Question

我是 Vue 和 StackOverflow 的新手，但我会尝试解释我的问题。

当我尝试为我的应用程序运行单元测试时，出现类型错误。

“TypeError：无法读取未定义的属性（读取‘push’）”

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

程序完全正常运行，否则只是测试失败了。

测试尝试在应用程序中运行 $router.push，但不能，因为它不知道那是什么，如何在测试时成功模拟 Push 方法？

我的 example.spec.js 测试代码如下所示：

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')

  })
})

我的 LoginView.vue 方法代码如下所示：

  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>

我试图使 Push 方法在用户成功登录时将用户重定向到“home”并在测试中模拟重定向。

任何帮助将不胜感激

Answer 1

在 vue3 中，您需要将 mocks 属性包装在 global 属性中

Vue2

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

Vue3

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

来源：https://test-utils.vuejs.org/guide/advanced/vue-router.html

Answer 2

试试这个：

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