The router's currentRoute.path should be /SignUpUser as that is the page I import and it's route is /SignUpUser. However, the path turns out to be root.
This is the code:
import SignUpUser from '@/components/SignForms/SignUpUser.vue'
const localVue = createLocalVue()
localVue.use(VueRouter)
it('does not route to root when sign up is interrupted because validations fail', async () => {
let router = new VueRouter()
const wrapper = mount(SignUpUser, {
localVue,
router,
})
console.log(router.currentRoute.path) // should be '/SignUpUser' but is '/'
let usernameField = wrapper.findComponent('#username');
usernameField.setValue('Avi')
let submitBtn = wrapper.findComponent('button')
await submitBtn.trigger('click');
expect(router.currentRoute.path).toBe('/SignUpUser')
})
Moreover, expect(router.currentRoute.path).toBe('/SignUpUser') fails because the path is still /. I am unsure what is happening and could really use some help.
When unit testing a vue component, you have to configure everything: nothing from your actual app will be used.
That means your app routes configuration is not used here. So you are using a VueRouter without any routes configuration.
Just add a testing routes configuration (see documentation):
it('should redirect to /SignUpUser page', () => {
const routes = [
{
path: '/',
component: { template: 'Root' }
},
{
path: '/SignUpUser',
component: SignUpUser
}
];
let router = new VueRouter({ routes })
router.push('/SignUpUser')
// You are now on /SignUpUser
const wrapper = mount(SignUpUser, {
localVue,
router,
})
})
Note that it means your test will actually test a mocked Router, and it does not have much sense to check that on this route (that you set up yourself on the test) you mount this component.