I'm not entirely sure how to summarise this issue but I've seen it a few times and I can't work out what I'm doing wrong. What seems to be happening, is that at some point during the mounting process, all the content of the component being mounted becomes undefined, which immediately causes any computed properties that rely on other data (props, for example) to fail.
To give an example, I have a bootstrap component that either renders a single button, or a dropdown button depending on the length of an actions array, which is a property. This is a simple computed property:
computed: {
isSingleAction() {
return this.actions.length === 1
}
}
If I run console.log(this.actions) before this computed property, then I get 2 outputs: one which is the expected property that I'm passing in with propsData ([ { routeName: [Getter/Setter], label: [Getter/Setter] } ]) and then a moment later I see an undefined output. That undefined output immediately causes a stack trace when it tries to figure out length of an undefined value.
Does anyone have any idea why I might be seeing this?
The mount itself is really simple:
const globalActionsWrapper = mount(GlobalActions, {
propsData: {
actions: [
{ routeName: "foo", label: "Foo" }
]
}
})
I'll figure out a good way to reproduce this. To work around it, adding v-if="actions" to the component's top level element prevents any undefined weirdness. Maybe I've misunderstood the order that Vue resolves props in it's lifecycle hooks? I'd always thought having properties rely on prop existence, when required: true, was fine.
I'm going to close this, because I think it's more to do with my misunderstanding of the component lifecycle than a testing bug.
@robcresswell How did you solve the problem? I have the same problem, but for me it works in every context, but not the test. If I remove my code within "created" or "mounted" it works in test, but the functionality is broken.
Most helpful comment
@robcresswell How did you solve the problem? I have the same problem, but for me it works in every context, but not the test. If I remove my code within "created" or "mounted" it works in test, but the functionality is broken.