In Cypress component testing, exposed values in a script setup component are not accessible on the component instance (AKA wrapper.vm)

[segevfiner]

Current behavior

In Cypress component testing, exposed values in a script setup component are not accessible on the component instance (AKA wrapper.vm).

This is available when using @vue/test-utils directly in vitest.

Desired behavior

Exposed values from a script setup component are accessible.

P.S. The type returned inside Chainable by mount is not easily accessible as it is defined inline, which makes it hard to use via an alias (as/get). It might be nice to turn it into an exported interface for ease of use?

Test code to reproduce

https://github.com/segevfiner/cypress-test-utils-expose-issue

Cypress Version

12.10.0

Node version

v16.20.0

Operating System

macOS 13.3.1

Debug Logs

cypress-debug.log

Other

The same kind of test works in vitest.

[warrensplayer]

@segevfiner This appears to be due to the older version of @vue/test-utils that is used in the Cypress vue mount adaptor.

@lmiller1990 Can you confirm my hypothesis? The @vue/test-utils dependency has not been updated in 7 months or so. Is that easy to update without causing a breaking change?

[lmiller1990]

Sure, we should be able to bump to https://github.com/vuejs/test-utils/releases/tag/v2.3.2 without breaking.

v2.4.0 has vuejs/test-utils#2026 which may permanent fix this need to constantly update types, but it might be a breaking change, so I'm not sure if we can adopt it yet.

Edit... I tried dropping in Test Utils v2.3.2, I'm getting a bunch of typing errors that are very difficult to understand. I am wondering if we should just make mount take any as the type, since this is proving quite disruptive to users, at least until we've got a more maintainable solution.

[lmiller1990]

Actually, I got the types to work. I see the value but I cannot access it:

I think this is related to how we use a Proxy in cypress/vue, to wrap anothter proxy in Test Utils... eg here.

Oddly enough, Reflect.has(component, 'hello') is true, but Reflect.get(component, 'hello') is undefined.

[lmiller1990]

Fixed in #26633

defineExpose({
  hello: 'world'
})

Will never work. See docs. defineExpose is only for variables declared - like const, let etc. I think this will solve your issue, though, of accessed bindings that are in defineExpose.

[cypress-bot]

Released in 12.12.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v12.12.0, please open a new issue.