Cannot locate component appended to vm.$root.$el about avoriaz

[jackysee]

Currently I would use <DatePicker ref='datepicker' /> attribute so that I can refer to it at this.$refs.datePicker and only test the props passing and event emit part.

For DatePicker create an individual test, create a clone of the component and delete the mounted function before test.

edit: attachToDocument:true is needed in parent component

[eddyerburgh]

I never considered this use case and I'm not sure how to solve it.

Short term, I suggest testing dateInput using shallow.

// Test that show props are passed to Datepicker when Dateinput has data show set to true
// Note: you need to give Datepicker a name for this to work
test('toogle DatePicker', t => {
      let wrapper = shallow(DateInput);
      wrapper.setData({ show: true });
      t.true(wrapper.find(DatePicker)[0].vm.show)
});

This isn't a good solution, and I'm sorry but I'm not sure how to fix the problem. I'll detail it below.

[eddyerburgh]

The problem is that attachToDocument creates a div and passes that as the root of the component you are mounting. When the component is rendered it runs Datepicker's mounted method and attaches it to the div we made (vm.$root.$el). Shortly after, the root components $el is updated with the result of the render function. The original div that has Datepicker attached is then cut off, and is not possible to access from the root vm.

In summary, attachToDocument is a hack to attach the instance to a document. Your component happens to not work because of that hack.

I'll have a think about how to fix this.