vitest router-link stub not display the text

102 Views Asked by At

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?

0

There are 0 best solutions below