RouterLink does not render in the test (Vue test utils) - vue.js

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

Answer 1

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' });
});