need to help about dynamic routing test

[sevkioruc]

Hello everyone,

I want to test that clicking item after route to detail page of the item.

Although I looked previous issues about this topic I could not solve problem.

I am using Vue 2, Jest and vue-testing-library and I mocked backend with https://github.com/mswjs/msw

• TodoList.spec.js

  import TodoList from '../src/components/TodoList.vue'
  import TodoDetail from '../src/components/TodoDetail.vue'

const routes = [
    { path: '/', component: TodoList },
    { path: '/todo/:id', component: TodoDetail }
]

it('route to detail page of todo after clicking on todo', async () => {
     render(TodoList, { routes })

     const todo = await screen.findByText('Todo1')
     await userEvent.click(todo)

     const detailPage = await screen.findByTestId('detail-page')
     await waitFor(() => { expect(detailPage).toBeInTheDocument() }, { timeout: 10000 })
})

• TodoList.vue

      <li class="list-group-item" v-for="(todo, index) in todos" :key="index">
        <p class="card-text">
          <router-link :to="'/todo/' + todo.id">
            {{ todo.title }}
          </router-link>
        </p>
      </li>

[afontcu]

Hi!

You're rendering TodoList, not the whole app (with <router-view> and so on). If you want to test a whole router interaction, please check out https://github.com/testing-library/vue-testing-library/blob/main/src/__tests__/vue-router.js#L15 as example. Notice that App.vue is the root component of the app, not one of its routes.

Hope it helps!

[sevkioruc]

Hi!

I understood better more then before and will review this example. Thank you so much for your answer.