Vue-test-utils: jsdom-global in mocha example may break modules bundled by rollup

[sodatea]

Version

1.0.0-beta.24

Reproduction link

https://github.com/sodatea/vue-test-utils-mocha-webpack-example

Steps to reproduce

Import prettier (>= 1.14.1) in any test file and run test.

What is expected?

No error

What is actually happening?

TypeError: Super expression must either be null or a function

---

In the guide it is said jsdom-global is required to simulate browser environment in Node when testing with mocha.

However, jsdom-global injects a window object to the global namespace. This window object only has DOM-related properties.

Meanwhile, rollup-plugin-commonjs uses the following snippet to infer the global object:
https://github.com/rollup/rollup-plugin-commonjs/blob/master/src/helpers.js#L4

So it will use the window object provided by jsdom-global as commonjsGlobal.

prettier depends on iarna-tomal and is bundled by rollup.
In the latest version of iarna-tomal, there's a class extends global.Date (https://github.com/iarna/iarna-toml/blob/latest/lib/create-date.js), which , after transpilation, would become something like _inherits(Date, commonjsGlobal.Date).

But as mentioned before, the window object only contains DOM-related properties, window.Date is undefined… therefore an error is thrown.

I don't think there's anything wrong with rollup's detection mechanism. And jsdom-global's development seems to be stale now.
So I think we'd better address this issue in the documentation and provide a practical workaround.

Related bugs:

• https://github.com/vuejs/vue-cli/issues/2128
• https://github.com/vuejs/vue-cli/issues/2300

[MacPrawn]

As a _temporary_ workaround, I fake-out the Date object on the jsdom/jsdom-global window object:

_setup.js_

require('jsdom-global')();

window.Date = Date;

Great work on the test utils by the way - thank you!!

[trickstival]

If someone is still experiencing this issue there is an important note: if you're using the @vue/cli-plugin-unit-mocha for vue-cli 3 you should require your setup file like this in your package.json:

"scripts": {
  "test:unit": "vue-cli-service test:unit --require tests/unit/setup.js"
}

my setup.js looks like this now:
```js
require('jsdom-global')()

window.Date = Date
```

[skozzii]

require('jsdom-global')() window.Date = Date

Thank you! I tried all the other suggestions and this was the one that worked.

[bpantchewy]

ok so what is the latest on this? Should I keep using the setup.js trick above or is a more appropriate fix along the way in vue-cli? Or by upgrading eslint-config-prettier? I am not sure if the above is a permanent fix or not

[TerryZ]

As a _temporary_ workaround, I fake-out the Date object on the jsdom/jsdom-global window object:

_setup.js_

require('jsdom-global')();

window.Date = Date;

Great work on the test utils by the way - thank you!!

It's work! Thanks.

[layen520]

If someone is still experiencing this issue there is an important note: if you're using the @vue/cli-plugin-unit-mocha for vue-cli 3 you should require your setup file like this in your package.json:

"scripts": {
  "test:unit": "vue-cli-service test:unit --require tests/unit/setup.js"
}

my setup.js looks like this now:

require('jsdom-global')()

window.Date = Date

Thanks

[agriffis]

Here's what I'm using, with the JSDOM configuration from @vue/cli-plugin-unit-mocha to avoid other issues, especially with localStorage

tests/unit/pre-setup.js

// from @vue/cli-plugin-unit-mocha/setup.js
require('jsdom-global')(undefined, {pretendToBeVisual: true, url: 'http://localhost'})

// https://github.com/vuejs/vue-test-utils/issues/936
// better fix for "TypeError: Super expression must either be null or
// a function" than pinning an old version of prettier.
window.Date = Date

package.json

"scripts": {
  "test": "vue-cli-service test:unit --require tests/unit/pre-setup.js"
}

I also have a test setup using ES6 imports, so my full package.json invocation is:

"scripts": {
  "test": "vue-cli-service test:unit --require tests/unit/pre-setup.js --include tests/unit/setup.js"
}

[ZhihaoLau]

As a _temporary_ workaround, I fake-out the Date object on the jsdom/jsdom-global window object:

_setup.js_

require('jsdom-global')();

window.Date = Date;

Great work on the test utils by the way - thank you!!

you saved my day, thanks

[culturegr]

Is there any update regarding the status of this bug please?

[feitiange]

well, but now is there a easy way to override jsdom-global options,I need url like 'http://localhost?a=1&b=2#hash'

[lmiller1990]

So, I think this is _not_ something vue-test-utils should really be taking care of - perhaps the setup guide should just include a note on this issue, why it happens, and how to work around it. I've had a similar problem (with url property, I believe) and ended up using a similar work around.

I'd say we update the docs/guide regarding this problem, and close this one once that is merged. Thoughts?

[sodatea]

Yeah that was what I proposed for

[lmiller1990]

We have docs for this now: https://vue-test-utils.vuejs.org/guides/#usage-without-a-build-step