this.$children is empty in the created lifecycle hook

[KyleMayes]

Version

1.0.0-beta.20

Reproduction link

https://codesandbox.io/s/q89qro9yq?module=%2Fsrc%2Fcomponents%2FTabs.spec.js

Steps to reproduce

1. Run the unit tests (click on "Tests" at the bottom)

What is expected?

The mount function in the test will render the tabs component as it is seen in the browser on the right, with three li elements in the ul element representing the three child tab components.

What is actually happening?

In the tabs component, there is a created lifecycle hook:

created() {
  this.tabs = this.$children;
}

This works in the browser, but $children is empty when rendered by vue-test-utils.
This results in the li elements (which are produced by iterating over this tabs data field) are not rendered.

[eddyerburgh]

$children is empty when a component initializes, and child instances are pushed to it when they are created.

This is however a bug with synchronous behavior. You can either fix it by setting sync to false and using setTimeout to wait for the next tick:

it("renders with content", (done) => {
 // ..
  const tabs = mount(Tabs, { localVue, slots: { default: content }, sync: false });
  setTimeout(() => {
    expect(tabs.html()).toContain("li");
    done()
  })
});

Or force the component to re render:

it("renders with content", () => {
  // ..
  const tabs = mount(Tabs, { localVue, slots: { default: content } });
  tabs.vm.$forceUpdate()
  expect(tabs.html()).toContain("li");
});

[eddyerburgh]

I've released beta.29 which uses Vue async mode to render synchronously, but it causes a bug with this use case.

Since this is an edge case, and there is a workaround we won't fix this issue.

The solution going forward is to set sync to false.