[6.22] [vueAttribute/assertVue] javascript error: Converting circular structure to JSON

[lk77]

• Dusk Version: 6.22
• Laravel Version: 8.33.5
• PHP Version: 7.4.24
• Database Driver & Version: mysql 5.7

Description:

assertVue does not work on vue 3 in some cases due to the presence of $vnode and $root in the ctx object,
because it tries to json encode it which can cause an error "Converting circular structure to JSON"

It seems that keeping the app instance globally like for example with a mixin trigger the issue

Steps To Reproduce:

create a hello-word project

vue create hello-world

create a circular reference in the main.js, for example with a mixin that makes the app object globally available :

let app = createApp(App)

app.mixin({
    beforeCreate() {
        this.$app = app;
    }
})

app.mount('#app')

in console :

JSON.stringify(document.querySelector('.hello').__vueParentComponent.ctx)

it should trigger something like that :

Uncaught (in promise) TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    |     property 'component' -> object with constructor 'Object'
    --- property 'vnode' closes the circle

the error is in vueAttribute method :

public function vueAttribute($componentSelector, $key)
    {
        $fullSelector = $this->resolver->format($componentSelector);

        return $this->driver->executeScript(
            "var el = document.querySelector('".$fullSelector."');".
            "return typeof el.__vue__ === 'undefined' ".
                '? JSON.parse(JSON.stringify(el.__vueParentComponent.ctx)).'.$key.
                ': el.__vue__.'.$key
        );
    }

here is th PR that added vue 3 support : #968

it might be safer to remove $root and $vnode before JSON.stringify

in my side, the fix i did is that :

app.mixin({
    beforeCreate() {
        this.$getApp = () => {
            return app;
        }
    }
})

it prevent any circular reference.

i'm doing that because i need a better way to retrieve the vue instance than using getCurrentInstance which can return null in some contexts

thanks.

[derekmd]

Setting up a Vue 3 test component using the options API (same as Vue 2) using your given example, I found the userland-defined el.__vueParentComponent.ctx['$app'] key must be removed before serializing to JSON.

The two macros below allow $browser->assertVue3() to be called instead of $browser->assertVue(), avoiding cyclical object references. If they're also called, Dusk methods assertVueIsNot, assertVueContains, and assertVueDoesNotContain would also need custom macros to invoke vue3Attribute().

use PHPUnit\Framework\Assert as PHPUnit;
use Laravel\Dusk\Browser;

Browser::macro('assertVue3', function ($key, $value, $componentSelector = null) {
    $formattedValue = json_encode($value);

    PHPUnit::assertEquals(
        $value,
        $this->vue3Attribute($componentSelector, $key),
        "Did not see expected value [{$formattedValue}] at the key [{$key}]."
    );

    return $this;
});

Browser::macro('vue3Attribute', function ($componentSelector, $key) {
    $fullSelector = $this->resolver->format($componentSelector);

    $this->ensurejQueryIsAvailable();

    return $this->driver->executeScript(
        "var el = document.querySelector('".$fullSelector."');".
        // shallow copy ctx object so the Vue component isn't affected by deleted keys
        'var ctx = jQuery.extend({}, el.__vueParentComponent.ctx);'.
        // 'delete ctx.$vnode;'.
        // 'delete ctx.$root;'.
        'delete ctx.$app;'.
        'return JSON.parse(JSON.stringify(ctx)).'.$key
    );
});

---

From playing around with Laravel Breeze's Vue components, recently converted to Vue 3's composition API last month (laravel/breeze#127), it looks like these Dusk methods don't even work with the composition API. document.querySelector('[dusk="foo"]').__vueParentComponent.ctx after JSON evaluation transforms to an empty {} object. Any <script setup>-defined props are encapsulated within the component object.

From briefly inspecting console output of document.querySelector('[dusk="foo"]').__vueParentComponent and the compiled component JavaScript, I don't see a global access point to those props that could be fetched from within the browser console. Vue browser devtools show a setup context (AFAIK via proxy objects) so there must be an entry point in dev environments. Laravel Dusk maybe needs to create a Vue dev extension to capture the prop context of each document.querySelectorAll('[dusk]') result.

If a solution can't be found to support the composition API, these Laravel Dusk methods may need to eventually be deprecated.

[lk77]

thanks !

that macro seems to do the trick indeed.
I guess there is no easy way for dusk to fix that, since it's user defined.

Perhaps dusk should do a sort of whitelist of known attributes of the ctx object, but that adds to the complexity.

I won't close this issue for know, i don't know if you consider this to be an issue on dusk part or not.

[driesvints]

Thanks @derekmd for those insights. I think maybe those macros can be PR'd to Dusk and a note in the docs could be added about not supporting the composition API. I don't think this is really an issue as that's something we simple cannot support. However, if anyone can figure something out, we'd welcome PR's.

[lk77]

Hello,

i've encountered this issue again, this time because of $i18n for some reason,

i've done this :

app.mixin({
    beforeCreate() {
        this.toJSON = function() {
            let data = this.$data;
            let props = this.$props;
            let computed = this.$options.computed;

            let ctx = Object.assign({}, data, props, computed);

            if(this.modelValue) {
                ctx.modelValue = this.modelValue;
            }

            Object.keys(ctx).forEach(key => {
                try {
                    JSON.stringify(ctx[key]);
                } catch(e) {
                    delete ctx[key];
                }
            })

            return ctx;
        };
    }
})

it works without a Browser::macro

it should return data/props/computed that can be json encoded,
if any circular reference is present, the key is removed.

I've done that because i have circular reference in my data too