I have a vitest to test a button component the test looks like this:
it('renders a router-link when href prop is provided', () => {
const wrapper = shallowMount(Button, {
props: {
buttonText: 'Go to Home',
href: '/home',
},
stubs: {
RouterLink: RouterLinkStub
}
});
//expect(wrapper).toMatchSnapshot()
// Check that the component is rendered as a router-link
expect(wrapper.findComponent(RouterLink).exists()).toBe(true);
// Check that the router-link has the correct 'to' prop
expect(wrapper.findComponent(RouterLink).props().to).toBe('/home');
// Check that the router-link text is correct
const routerLinkComponent = wrapper.findComponent(RouterLink)
console.log(routerLinkComponent.html().toContain);
});
The console.log
returns:
<router-link-stub to="/home" replace="false" custom="false" ariacurrentvalue="page" class="bg-blue-600 px-4 py-2 leading-5 text-center text-white text-xl rounded block"></router-link-stub>
I would expect <router-link-stub>
to have the text "Go to home" but it does not. When actually using the component the inner text does get rendered to the user?