Fix components that read undefined properties on Vue instances
Summary
Several Vue components read a property that the instance does not define. Jest cannot report any of them today, because the Jest console watcher ignores every "property is not defined on the instance" render warning.
Two things hide these defects:
spec/frontend/environment.jsignores the warning for any property name. The pattern exists to stop Jest's own probing from masking a failing assertion, but it is far wider than that purpose needs.- Vue 2 binds a computed getter to the raw component instance, so an unknown property
read inside a computed never warns at all. Vue 3 binds the getter to the public
proxy, which does warn. Every case below is therefore invisible in the Vue 2 lane
and only appears under
VUE_VERSION=3.
!250835 (merged) narrows the pattern to the
eight property names Jest probes. That change unmasks the cases listed here, and it
cannot merge until they are fixed, because jest vue3 sets allow_failure: false.
Affected code
Found by running the whole suite locally with the narrowed pattern. Grouped by cause.
1. this.$apollo read with no Apollo provider
| Source | Failing spec |
|---|---|
app/assets/javascripts/repository/components/header_area/blob_overflow_menu.vue:117 |
spec/frontend/repository/components/header_area/blob_overflow_menu_spec.js |
ee/app/assets/javascripts/security_orchestration/components/policy_drawer/drawer_wrapper.vue:159 |
ee/spec/frontend/security_orchestration/components/policy_drawer/drawer_wrapper_spec.js |
2. this.$route read with no router
| Source | Failing spec |
|---|---|
app/assets/javascripts/repository/components/header_area/permalink_dropdown_item.vue:42 |
spec/frontend/repository/components/header_area/blob_repository_actions_group_spec.js |
ee/app/assets/javascripts/ai/components/navigation_rail.vue:79 |
ee/spec/frontend/ai/init_duo_panel_spec.js |
The component reads $route with no guard, so it breaks whenever it is mounted outside
a router, not only in specs.
3. runWithContext
| Source | Failing spec |
|---|---|
app/assets/javascripts/rapid_diffs/app/init_file_finder.js:40 |
spec/frontend/rapid_diffs/app/init_file_finder_spec.js |
app/assets/javascripts/notes/components/comment_form.vue:616 |
ee/spec/frontend/notes/components/comment_form_spec.js |
runWithContext is a Vue 3 application-level API. Something reads it from a component
instance. Needs tracing.
4. A data key with no default
| Property | Source | Failing spec |
|---|---|---|
packageRegistryAllowAnyoneToPullOption |
app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue:449 |
spec/frontend/pages/projects/shared/permissions/components/settings_panel_spec.js |
isGitlabCom |
app/assets/javascripts/security_configuration/components/secret_push_protection_feature_card.vue:109 |
spec/frontend/security_configuration/components/secret_push_protection_feature_card_spec.js |
type |
not yet traced | spec/frontend/issuable/popover/components/work_item_popover_spec.js and its EE counterpart |
settings_panel.vue builds its state with return { ...defaults, ...this.currentSettings }
at line 378. packageRegistryAllowAnyoneToPullOption is missing from defaults, so it
exists only when a caller supplies it. When it is absent the computed
packageRegistryApiForEveryoneEnabledShown is always falsy and the setting never
renders. app/helpers/projects_helper.rb:874 supplies it in production, so the gap is
not user visible today, but nothing enforces that.
Steps to reproduce
Apply the narrowed pattern from !250835 (merged), then run:
VUE_VERSION=3 yarn jestEach failure reports:
Unexpected calls to console (1) with:
[1] warn: [Vue warn]: Property "<name>" was accessed during render but is not defined on instance.The same command on master passes, because the warning is ignored.
Proposed resolution
One merge request per group above, so each lands with its owning group's review. Then
rebase !250835 (merged) on top and confirm
jest vue3 is green.
For groups 1 and 2, prefer guarding the component over adding a router or an Apollo provider to the spec, because the unguarded read is the actual defect.