Props not correctly traversed on extended components under Vue 3
It seems that calling wrapper.props() on a Vue wrapper wrapping a component that extends another component doesn't work as expected under Vue 3. The props object is empty, as if the component doesn't define any props.
This is either a bug in @vue/test-utils@2, or a bug in our compat layer vue-test-utils-compat.
The workaround for now is to explicitly redeclare the props on the component that extends the other. E.g.,
diff --git a/ee/app/assets/javascripts/boards/components/boards_selector.vue b/ee/app/assets/javascripts/boards/components/boards_selector.vue
index 8efb76da88bd..98857fd4d48e 100644
--- a/ee/app/assets/javascripts/boards/components/boards_selector.vue
+++ b/ee/app/assets/javascripts/boards/components/boards_selector.vue
@@ -13,6 +13,9 @@ export default {
extends: BoardsSelectorFoss,
mixins: [Tracking.mixin()],
inject: ['isEpicBoard'],
+ // Work around a possible @vue/test-utils@2 bug, where `Wrapper#props()`
+ // doesn't correctly traverse into the extended component's `props`.
+ // See https://gitlab.com/gitlab-org/gitlab/-/issues/509355.
+ props: BoardsSelectorFoss.props,
computed: {
showCreate() {
return this.isEpicBoard || this.multipleIssueBoardsAvailable;
Edited by Mark Florian