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;

See !175698 (comment 2258172863).

Edited by Mark Florian