Vue Jest Test Unknown Custom Element - Nested Component

Question

I have a pair of components as follows:

ParentComponent -- ChildComponent

where child is rendered within parent. There are no console errors on the front end.

However, a simple jest test:

it("renders child form", () => {
        expect(wrapper.contains(Child)).toBe(true);
});

fails and gives the warning:

Unknown custom element: <Child> - did you register the component correctly?

Tests on the child individually pass, and the parent/child have rely similar stores and getters so the test setup is identical.

Why does this happen? Is there a way I can better debug the process the test is taking to see why the child is not appearing in the parent?

At the top of the tests there is a beforeEach that shallowMounts the parent with the mock store. ShallowMount is not the issue as the test does not run with mount.

Answer 1

Found the answer - Vue didn't like the use of a router to do router.push("routeName"), and would only run with this.$router.push. Vue didn't give any useful warnings so trial and error was the only way to fix it!