Laravel-Vue单元测试错误"SynTaxError：意外令牌{"

Question

我正在尝试为Vue编写单元测试，它是在Laravel环境中建立的。我按照这篇文章设置项目进行测试。但它并没有像预期的那样工作，我在运行npm测试时遇到了这个错误。

> @ 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"

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!');
  });
});

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

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

此存储库包含整个代码。




Answer 1

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

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!');
  });
});

{
   "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"
}