如何测试 Vue 路由渲染正确的组件？

Question

如何测试用户单击路由器链接时发生的实际导航？例如，我希望渲染链接的组件，但只有路由发生变化，而渲染的组件不会改变。

在下面的代码片段中，我依赖于 Signup 组件，其中包含指向 /login 路径的路由器链接。请参阅注释行以了解我的意图：

test.only('navigates to login page when login btn is clicked', async () => {
    const TestLogin = {
        template: '<h1>Login page</h1>',
    }
    const routes = [{ path: '/login', name: 'Home', component: TestLogin }]
    const router = new VueRouter({ routes })
    localVue.use(VueRouter)
    const { getByText } = render(Signup, {
        localVue,
        router,
        vuetify,
    })
    const btn = getByText('go to login')
    await fireEvent.click(btn)
    expect(router.history.current.fullPath).toBe('/login')  <----- this passes
    await findByText('Login page')  <-------- this fails!
})

为什么单击链接时未呈现 TestLogin 组件？导航实际上有效，即当我正常运行应用程序时。