我如何解决 route.params 未定义？

【问题标题】：How can i solve route.params is undefined?我如何解决 route.params 未定义？
【发布时间】：2022-02-08 10:46:09
【问题描述】：

我的代码中有这部分，我想测试，但是当我运行测试时 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: () => {} },
  })
})

【问题讨论】：

路由或 $route ?
@jeremycastelli 是路线

标签： vue.js unit-testing jestjs

【解决方案1】：

你的mocks.route 会不模拟

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

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

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

为了让你的组件在useRoute()返回未定义时不会失败，你可以使用这个：

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

不需要try。

要根据tokenId 路由参数值测试您的组件是否按照预期执行，那么您应该在测试中模拟vue-router，以返回一个返回参数对象的函数：

这应该可行：

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

【讨论】：