RouterLink does not render in the test (Vue test utils)

Question

I am trying to test vue-router links but the RouterLink does not render, causing the error Cannot call text on an empty DOMWrapper.

Test:

const mkroute = { params: { test: "a" } };
const mkrouter = { push: jest.fn() };
jest.mock("vue-router", () => ({
  useRoute: () => mkroute,
  useRouter: () => mkrouter,
}));
describe("...", () => {
  it("...", async () => {
    const wrapper = mount(view);
    console.log(wrapper.html());
    expect(wrapper.find("a#test").exists()).toBe(true);
  });
});

console.log:

<div>
  <!--[object Object]-->
  <!--[object Object]-->
  <!--[object Object]-->
</div>

Versions:

Vue 3 / Vue test utils 2 / Vue router 4 / Jest 27

Radosław Andraszyk · Accepted Answer · 2023-01-11 14:24:39Z

0

The unit tests (eg. jest or vitest) use the RouterLinkStub component: https://test-utils.vuejs.org/api/#routerlinkstub

Probably router-link-stub is visible in your html code.

So, to check whether it has been generated correctly, use the ref and findComponent method, for example:

<router-link :to="{ name: url }" ref="buttonAdd">
    <button class="btn btn-sm btn-success btn-wtf">
        <fa icon="plus" /> {{ $t("dictionary.add") }}
    </button>
</router-link>

and a simple test:

it.only('buttonAdd rendered correctly', () => {

    const link = wrapper.findComponent({ ref: 'buttonAdd' });

    expect(link.exists()).to.equal(true);
    expect(link.props().to).toStrictEqual({ name: 'AdminReturnsAdd' });
    
});

answered Jan 11, 2023 at 14:24

Radosław Andraszyk

4608 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

RouterLink does not render in the test (Vue test utils)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related