我如何解决 route.params is undefined？

Question

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

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

我曾经从 url 获取 id，但目前正在测试它

我收到这个错误错误类型错误：无法读取未定义的属性 'params'

这是我的测试：

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() return 未定义时不会失败，您可以使用此：

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

不需要try。

要测试您的组件是否根据 tokenId 路由参数值执行它应该做的事情，那么您应该在测试中模拟 vue-router 到 return 一个函数 returning 参数对象：

这应该有效：

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

我如何解决 route.params is undefined？

How can i solve route.params is undefined?

unit-testing

vue.js

jestjs