Bug: ReferenceError: XMLSerializer problems

[maerteijn]

Describe the bug
Since release 2.0.0-rc.18 I sometimes encounter the following error when running my testsuite with JSDOM:

    TypeError: Failed to execute 'serializeToString' on 'XMLSerializer': parameter 1 is not of type 'Node'.

This does not happen with 2.0.0-rc.17. There are more issues with XMLSerializer, but this one is reproducable in a separate testcase. I can add more tests for the other issues when requested.

To Reproduce
See the repo here: https://github.com/maerteijn/xmlserializer-problems-testcase
See the CI result here: https://github.com/maerteijn/xmlserializer-problems-testcase/actions/runs/1720099564

Expected behavior
That the test won't fail due to the use of XMLSerializer. I have the feeling that it has a large impact on how vue-test-utils responds compared to previous versions.

Related information:

• @vue/test-utils version: 2.0.0-rc.18
• Vue version: 3.2.x
• JSDOM version: 16.7 until v19.0
• node version: v16.13.0
• npm (or yarn) version: 8.1.0

[cexbrayat]

@maerteijn Thanks for the repro. We have some regressions in rc.18 (I personally still use rc.17)

@xanf WDYT? This is weirdly not breaking any tests in VTU, but maybe there are no tests with multi-root components. It looks like there https://github.com/jsdom/w3c-xmlserializer that we might use?

[xanf]

@cexbrayat that's weird, I will take a look today. Using w3c-xmlserializer feels like a good option

In any case, happy to have repro!

[maerteijn]

Ok sorry guys, the original report and assumptions I did that XMLSerializer does not exist in JSDOM is incorrect and was a problem in my local environment.

XMLSerializer exists in JSDOM since version 13.0.0 and makes use of the w3c-xmlserializer as you already suggested.

I do have other problems with the XMLSerializer and one of them is now reproducable in a separate repository. (see also the ci results. I updated this issue with the new information.

[xanf]

@maerteijn thank you for keeping us updated. I will take a look today :)

[lmiller1990]

I was not able to repro this in our code base, copy pasted the test from the OP:

caabd06

[freakzlike]

I tried to analyse this. The error gets thrown because Symbol("impl") !== Symbol("impl"). I think this might come from different package versions from @vue/cli-plugin-unit-mocha.
@vue/cli-plugin-unit-mocha uses jsdom@v18 + jsdom-global@v3 and the test repo jsdom@v19 + global-jsdom@v8.

Unfortunally I was not able to get this running, but maybe this helps someone by digging into this.

[maerteijn]

With jsdom@v18 and jsdom-global@v3 I get the same results:

https://github.com/maerteijn/xmlserializer-problems-testcase/actions/runs/2091906179

See the branch: https://github.com/maerteijn/xmlserializer-problems-testcase/tree/jsdom-v8.0.0-jsdom-global-v3.0.2

[cexbrayat]

If you try to force the dependency resolution (using yarn "resolutions" for example), and set jsdom to v19 and global-jsdom to v8, do you still reproduce the issue?

It may be worth opening an issue in the CLI rather than here, as I suspect we won't be able to help much if this is a dependency issue.

[maerteijn]

Ok, so after some fiddling around I can tell you more what causes the issue:

• In 2.0.0-rc.18, the usage of XMLSerializer was introduced, see this PR: fix(html): ensure wrapper.html() works correctly for multi-root #1120.
  The XMLSerializer is initialized as following:

  new XMLSerializer()

• JSDOM has a XMLSerializer, shipped with the w3c-xmlserializer package.
• jsdom-global doesn't export XMLSerializer as a global variable, therefore I get ReferenceError: XMLSerializer is not defined
• global-jsdom does this dynamically, but then I get parameter 1 is not of type 'Node'. So something is exported there as a global XMLSerializer, but not the correct / working one.

When I manually patch the global XMLSerializer like so:

jsdom-global:

require("jsdom-global")()

global.XMLSerializer = window.XMLSerializer

global-jsdom:

require("global-jsdom/register")

global.XMLSerializer = window.XMLSerializer

then the correct XMLSerializer class is used in vue-test-utils and all is fine, see the latest CI run of the demonstration repo:
https://github.com/maerteijn/xmlserializer-problems-testcase/actions/runs/2103439380

So new window.XMLSerializer() could be called here instead of new XMLSerializer() so the newer @vue/test-utils will work out of the box with JSDOM.

And there should be some documentation regarding seting up @vue/test-utils with JSDOM?

[lmiller1990]

Wow, awesome bug hunt. Sounds like it only happens w/ certain versions. Rather than doc it, should we just add a try/catch and handle both cases, so users don't need to think too much about it?

[maerteijn]

I just noticed this in the source of the cli-plugin-unit-mocha package:

https://github.com/vuejs/vue-cli/blob/master/packages/%40vue/cli-plugin-unit-mocha/setup.js

There are already some similar workarounds added for missing globals like vuejs/core#2943

As jsdom-global hasn't been updated in 5(!) years, not all newer objects like XMLSerializer are exported. Now I also understand why global-jsdom is working strangely as cli-plugin-unit-mocha uses jsdom-global already so both packages at the same time will mess up the global namespace.

I guess I should make a PR for cli-plugin-unit-mocha to also add XMLSerializer here?