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?

[cexbrayat]

@maerteijn I agree, I think the CLI is the best place to fix it, as it looks like this issue only occurs with this exact setup.

We can probably even transfer the issue there as it would make more sense?

[maerteijn]

@cexbrayat Yes I think so. It's not an issue with test-utils and your jest based test environment is working as it should.

[lmiller1990]

Ok - closing this one off, since it's not a bug here and there's no action required (in VTU).

[maerteijn]

A PR with a XMLSerializer global was merged, thank you all for helping out!

[AndreiSoroka]

Hi, I catch this error in 2.0.0-rc.20 but in 2.0.0-rc.7 all is good

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

Reproduce: https://codesandbox.io/s/movie-app-vue-example-forked-bfkebn?file=/src/components/Header/header.spec.js

[xanf]

@AndreiSoroka thank you for reproduction. Let ne take a closer look