How can i solve route.params is undefined?

Question

i have this part in my code, i want to test, but when i run the test route.params sound like the wrong:

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

it i used to get the id from url, but at the moment to test it

i am getting this error Error TypeError: Cannot read property 'params' of undefined

this is my test:

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

Answer 1

Your mocks.route does not mock

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

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

You might want to have a look at examples presented here for a detailed approach on how to test various router related scenarios with a vue3 composition api setup.

---

To simply make your component not fail when useRoute() returns undefined, you could use this:

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

There's no need for try.

---

To test that your component does what it's supposed to based on tokenId route param value, then you should mock vue-router in your test, to return a function returning a params object:

This should work:

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