Laravel-Vue单元测试错误"SyntaxError:意外的标记{“

Question

我正在尝试为Vue编写单元测试，设置在Laravel环境中。我跟随this article设置了用于测试的项目。但它并没有像预期的那样工作，当我运行npm test时，我得到了这个错误。

> @ test G:\Unit testing\Vue-Laravel
> mochapack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/js/setup.js tests/js/\*\*/\*.spec.js

(node:3224) UnhandledPromiseRejectionWarning: G:\Unit testing\Vue-Laravel\tests\js\setup.js:3
import { mount } from '@vue/test-utils';
       ^

SyntaxError: Unexpected token {
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at exports.requireOrImport (G:\Unit testing\Vue-Laravel\node_modules\mocha\lib\esm-utils.js:20:12)
    at Object.exports.handleRequires (G:\Unit testing\Vue-Laravel\node_modules\mocha\lib\cli\run-helpers.js:94:34)
    at mochaChecks (G:\Unit testing\Vue-Laravel\node_modules\mochapack\lib\cli\argsParser\parseArgv\mocha\parseMochaArgs.js:60:19)
(node:3224) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
 WEBPACK  Compiling...

  [=========================] 98% (after emitting)

 DONE  Compiled successfully in 198ms                                                                                          12:25:43 AM
  [=========================] 100% (completed)

 WEBPACK  Compiled successfully in 198ms

 MOCHA  Testing...



  0 passing (0ms)

 MOCHA  Tests completed successfully"

setup.js

require('jsdom-global')();

import { mount } from '@vue/test-utils';
import expect from 'expect';
import App from '../../../resources/js/App.vue';

describe('App.vue', () => {
  it('says Hello Vue!', () => {
    const wrapper = mount(App);
    expect(wrapper.html()).toContain('Hello Vue!');
  });
});

App.vue

<template>
  <div>
      <h1>
          {{ msg }}
      </h1>
  </div>
</template>

<script>
export default {
    name: 'app-component',
    data(){
        return {
            msg : "Hello Vue!"
        }
    }
}
</script>

Git集线器存储库

此repository包含完整的代码。

Answer 1

当我将测试代码提取到一个单独的文件中时，这个问题得到了修复。

setup.js

require('jsdom-global')();

test.spec.js

import { mount } from '@vue/test-utils';
import expect from 'expect';
import App from '../../../resources/js/App.vue';

describe('App.vue', () => {
  it('says Hello Vue!', () => {
    const wrapper = mount(App);
    expect(wrapper.html()).toContain('Hello Vue!');
  });
});

package.json

{
   "test:unit": "cross-env NODE_ENV=testing mochapack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/Vue/Unit/setup.js tests/Vue/Unit/**/*.spec.js"
}