Laravel-Vue 单元测试错误“SyntaxError: Unexpected token {”答案

【问题标题】：Laravel-Vue unit testing error "SyntaxError: Unexpected token {"Laravel-Vue 单元测试错误“SyntaxError: Unexpected token {”
【发布时间】：2020-06-20 19:42:58
【问题描述】：

我正在尝试为 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 包含整个代码。

【问题讨论】：

看看这对你有没有帮助stackoverflow.com/questions/59198056/…

标签： javascript laravel unit-testing vue.js vuejs2

【解决方案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"
}

【讨论】：