vueAttribute does not work with Vue 3 and vite build. only with vite dev.

[Harrald]

Dusk Version

7.12.1

Laravel Version

10.38.0

PHP Version

8.1.26

PHPUnit Version

10.5.3

Database Driver & Version

No response

Description

vueAttribute (or any of the Vue functions that use this function) only work when bun run dev is running. When you run bun run build the function always returns null.

This is because el.__vueParentComponent is only available when the dev server is running. For production builds __vueParentComponent is missing on elements.

Steps To Reproduce

Have a Vue project/component.
Make a Dusk test which tests the page with the Vue component.

Try dd($browser->vueAttribute('@component', 'property')); while running the dev server. This should return a value.
Try dd($browser->vueAttribute('@component', 'property')); without running the dev server. This should return null.

[driesvints]

Heya, thanks for reporting.

We'll need more info and/or code to debug this further. Can you please create a repository with the command below, commit the code that reproduces the issue as one separate commit on the main/master branch and share the repository here? Please make sure that you have the latest version of the Laravel installer in order to run this command. Please also make sure you have both Git & the GitHub CLI tool properly set up.

laravel new bug-report --github="--public"

Please do not amend and create a separate commit with your custom changes. After you've posted the repository, we'll try to reproduce the issue.

Thanks!

[Harrald]

https://github.com/Harrald/laravel-dusk-issue-1085 The Laravel installer made it 2 commits instead of 1. If you really need it to be a total of 2 i can rebase if you want.

[driesvints]

Thanks, that's perfect.

So this is sort of expected. If you go to your browser when not running vite you'll also be greeted with a manifest not found issue. Why it's not working when running npm run build is something that I'm wondering about though. I'm guessing it's a combination of running Dusk (a test environment) and building for production. I'll let @crynobone chime in here to see if he knows more.

[crynobone]

I don't believe there's anything we can do here other than update documentation to give alert about this limitation.

[driesvints]

Feel free to PR the docs, thanks!

[jose-seabra]

@Harrald in order to Dusk tests to have access to el.__vueParentComponent you must bundle vite with the development NODE_ENV, otherwise those el properties don't get exposed.

I believe this is the same way properties are available for the devtools browser extension. So if you don't see them in the devtools, dusk tests aren't capable of accessing them either.

You can add/edit a vite build command in which you specify the NODE_ENV like this:
"build:dev": "NODE_ENV=development vite build",

As stated above, this is a limitation when you're trying to run tests against a production build, but it is the intended behavior.

Reference:
https://vitejs.dev/guide/env-and-mode#node-env-and-modes