vue.js - 我该如何解决 route.params is undefined？

Question

我的代码中有这部分，我想测试，但是当我运行测试 route.params 时，听起来像是错误的:

 onMounted(async () => {
        try {
          const { tokenId } = route.params

我以前是从 url 中获取 id，但现在要测试它

我收到这个错误错误类型错误:无法读取未定义的属性“参数”

这是我的测试:

beforeEach(() => {
  wrapper = shallowMount(App, {
    mocks: {
      route: {
          params: {
            id: 'id'
          }
        }
    },
    global: {
      plugins: [store],
    },
    computed: { notFound: () => {} },
  })
})

Answer 1

您的mocks.route 不 mock

import { useRoute } from 'vue-router'
//...

setup() {
  const route = useRoute();
  //...
}

您可能想查看提供的示例 here有关如何使用 vue3 组合 api 设置测试各种路由器相关场景的详细方法。

---

为了让您的组件在 useRoute() 返回 undefined 时不会失败，您可以使用这个:

const { tokenId } = route?.params || {};
if (tokenId) {
  // do your thing...
}

没有必要try。

---

要测试你的组件是否根据 tokenId 路由参数值执行它应该做的事情，那么你应该在你的测试中模拟 vue-router ，以返回一个函数返回一个参数对象:

这应该有效:

jest.mock('vue-router', () => ({
  useRoute: () => ({ params: { id: 'id' } })
}));