shallowMount fails with TypeError when component uses a data of type Symbol in it's template

[penguintree]

Version

1.1.4

Reproduction link

https://github.com/penguintree/vue-test-util-symbol-issue

Steps to reproduce

npm run test:unit

What is expected?

Unit tests should pass

What is actually happening?

One of the unit test fails with error :
TypeError: Failed to execute 'setAttribute' on 'Element': parameter 2 is a symbol, which cannot be converted to a string.

---

Possibly a regression in regards of this closed issue

Basically, it is not possible to shallowMount a component wich passes a Symbol to a child component.

[phloose]

Can confirm, It's still an issue and only happening when running tests. In the browser console no errors are shown regarding the usage of a Symbol

[boboldehampsink]

Any news on this? Still happening

[jrummell]

I can confirm this issue. If I replace shallowMount with mount, it works.

[liamdebeasi]

Some of our users are also running into this issue with Ionic Vue (see: ionic-team/ionic-framework#24181). Vue 3.1 sets all property keys in the properties object, even if certain properties are not actually being used by the end developer (see vuejs/core#3889). We use Symbol to differentiate between properties that are used and properties that are not used.

Using shallowMount on Ionic Vue components causes this bug to appear. Using mount instead of shallowMount works for now, but it would be great if this could get fixed.

[lmiller1990]

I looked into this, I posted my findings and some ideas to proceed here: ionic-team/ionic-framework#24181 (comment)

This is not really a specific Test Utils problem, but more of how jsdom chooses to implement their attribute serializer, but it only manifests when using shallowMount. There's not a real "fix", but we will probably need some kind of hack/escape hatch for this scenario (stubs w/ symbols). See my link ^ for more.

[boboldehampsink]

@lmiller1990 any news? Ionic 6.0 is now out as stable, but can't be used with Vue before this is fixed.

[lmiller1990]

@boboldehampsink Ionic 6 seems to use Vue 3, so you'll need Test Utils v2. This bug is fixed here vuejs/test-utils#1076 which will be released this week.

As for back-porting that fix, you could do something similar and strip out symbols in this library. It's not a priority for me right now, but if you'd like to make a PR, that'd be great.

[ebisbe]

@lmiller1990 Do we leave this ticket open for back porting it?
For me, no response from 2y so I'd go and close it. If anyone is interested he can make a PR and back port it, right?

[lmiller1990]

I think it's fine to leave this open - known issue, not fixed. It's unlikely anyone is using Vue 2 with Ionic now, they would likely be looking to upgrade.

[wangxiang4]

This problem can be solved using the wrapping layer arrow function

[lmiller1990]

Please share a snippet @wangxiang4, this sounds like useful info. Thanks!