Vue-cli: Run unit test HelloWorld failed

[smoothdvd]

Version

3.0.0-rc.12

Node and OS info

Node 10.8.0 / yarn 1.9.4 / macOS 10.13.6

Steps to reproduce

1. Create new project with Mocha Chai
2. yarn run test:unit

What is expected?

Pass unit test

What is actually happening?

WEBPACK Failed to compile with 1 error(s)

Error in ./src/components/HelloWorld.vue

Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Super expression must either be null or a function
at /Users/alexgao/Dev/vue-webpack/node_modules/prettier/index.js:32893:5
at /Users/alexgao/Dev/vue-webpack/node_modules/prettier/index.js:32913:4

ERROR mocha-webpack exited with code 1.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[yyx990803]

For some reason downgrading to prettier 1.13.7 works.

[yyx990803]

Fixed by pinning prettier to 1.13.7 in @vue/component-compiler-utils. Remove your node_modules and lockfile and re-install should fix the problem.

[smoothdvd]

@yyx990803 Thanks! Just do it now.

[yerol]

Works with Prettier version 1.14.0 as well. 1.14.1 has a breaking change.

[sodatea]

FYI it is a jsdom-global & rollup issue.

https://github.com/vuejs/vue-test-utils/issues/936

[sagaban]

I fixed it adding to my package.json "resolutions":{ "@vue/eslint-config-prettier/prettier": "1.13.7" }

[themathmagician]

I am getting the same error. Adding the resolution above does not fix it?

[maxim-usikov]

Me to got error.

Version

3.2.1

Environment info

System:
    OS: macOS 10.14.1
    CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
  Binaries:
    Node: 11.4.0 - /usr/local/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 71.0.3578.80
    Firefox: 60.0.2
    Safari: 12.0.1
  npmPackages:
    @vue/babel-preset-app:  3.2.0
    @vue/cli-overlay:  3.2.0
    @vue/cli-plugin-babel: ^3.2.0 => 3.2.0
    @vue/cli-plugin-eslint: ^3.2.0 => 3.2.1
    @vue/cli-plugin-unit-mocha: ^3.2.0 => 3.2.0
    @vue/cli-service: ^3.2.0 => 3.2.0
    @vue/cli-shared-utils:  3.2.0
    @vue/component-compiler-utils:  2.3.1
    @vue/eslint-config-prettier: ^4.0.0 => 4.0.1
    @vue/preload-webpack-plugin:  1.1.0
    @vue/test-utils: ^1.0.0-beta.20 => 1.0.0-beta.27
    @vue/web-component-wrapper:  1.2.0
    babel-helper-vue-jsx-merge-props:  2.0.3
    babel-plugin-transform-vue-jsx:  4.0.1
    eslint-plugin-vue: ^5.0.0-0 => 5.0.0
    vue: ^2.5.17 => 2.5.21
    vue-eslint-parser:  4.0.3
    vue-hot-reload-api:  2.3.1
    vue-loader:  15.4.2
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.5.17 => 2.5.21
    vue-template-es2015-compiler:  1.6.0
  npmGlobalPackages:
    @vue/cli: 3.2.1

Steps to reproduce

1. vue create vue-with-mocha-eslint-prettier
2. Choose manual select features.
   
3. cd vue-with-mocha-eslint-prettier
4. yarn test:unit
5. Got Webpack compile error.
   

What is expected?

Pass HelloWorld.vue tests.

What is actually happening?

Got Webpack compile error.

[alant]

"resolutions":{ "@vue/eslint-config-prettier/prettier": "1.13.7" }

Did not work for me. However, pinning prettier to 1.13.7 worked.

[agriffis]

Here's a fix that works with newer prettier (1.15.3)

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 have an existing setup for my tests that uses ES6 imports, so my full line looks like this:

package.json

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

[darin-sai]

@agriffis's solution worked for us. Specifically, it's just the window.Date = Date bit. Our code is simply:

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

We're running whatever version of prettier vue-loader wants, currently 1.16

[sonson1023]

@agriffis Thanks.

Your comment's is worked .

[bearcodi]

@agriffis You just saved me "not giving a two sh1ts" and choosing to skip component testing hahaha

[georgeben]

Thank you @agriffis

[sodatea]

This workaround has now been added to @vue/cli-plugin-unit-mocha 3.4.0 by default to avoid any other dependency change accidentally re-triggering this regression.

[AdrianHL]

Thanks @agriffis !

[abrenneke]

The workaround above also works with browser-env:

require('browser-env')();
window.Date = Date;