Jest 或 Mocha 與 Vue：SyntaxError：無法在模塊外使用 import 語句

Question

編輯：這篇文章因編輯而失控，請點擊此鏈接到一個新的 Stackoverflow 帖子，該帖子更清晰： SyntaxError：在遵循 vue-test-utils 官方教程時無法在模塊外使用 import 語句

關於這個問題的帖子和線程數以千計，我仍然無法解決我的問題。 我遵循了 Jest AND Mocha 的“入門”部分，兩次都得到相同的錯誤： SyntaxError: Cannot use import statement outside a module但他們提供的鏈接根本沒有幫助。

底部有一個新的編輯，其中包含一個干凈的新項目的步驟，供您遵循，這會導致錯誤。

"vue-jest": "^3.0.7" ， "vue": "^2.6.12" ， "@vue/test-utils": "^1.2.2"

package.json

"mocha": "mocha 'tests/Frontend/**/*.test.js'"

示例.test.js：

import { mount } from "@vue/test-utils"
import Dashboard from "../../resources/js/views/Dashboard";
import * as assert from "assert";

describe('test example', () => {
    it('should work', () => {
        assert.equal([1, 2, 3].indexOf(4), -1); // doesn't matter what I do here
    })
})

我試過的：

• 在 mocha 中使用--require @babel/register標志
• 設置"transformIgnorePatterns": []從而允許考慮所有 node_modules
• 添加具有以下內容的.babelrc文件：
  這導致在構建應用程序時出現以下錯誤：

Error: Multiple configuration files found. Please remove one:
 - package.json
 - C:\Users\f.marchi\workspace\projects\sanctum-test\.babelrc

{
    "env": {
        "test": {
            "plugins": ["transform-es2015-modules-commonjs"]
        }
    }
}

有人可以確認，這些文檔缺少一些非常重要的步驟嗎？ 我真的不知道我在做什么錯，我只是按照教程。

編輯： jest.config.js：

module.exports = {
    clearMocks: true,

    collectCoverage: true,

    coverageDirectory: "coverage",

    moduleFileExtensions: [
        "js",
        "json",
        "vue"
    ],
    transform: {
        ".*\\.(vue)$": "vue-jest"
    },
    transformIgnorePatterns: []
};

編輯：我剛剛又試了一次，如果你願意，可以跟隨：

1. vue 創建笑話測試
2. npm install --save-dev jest @vue/test-utils vue-jest
3. 將笑話配置添加到 package.json：

{
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      ".*\\.(vue)$": "vue-jest"
    }
  }
}

4. npm install --save-dev babel-jest @babel/core @babel/preset-env babel-core@^7.0.0-bridge.0
5. 將笑話配置調整為：

{
  "jest": {
    "transform": {
      // process `*.js` files with `babel-jest`
      ".*\\.(js)$": "babel-jest" //<-- changed this
    }
  }
}

6. 將 babel 配置調整為：

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset',
        '@babel/preset-env' //<-- added this
    ]
};

Answer 1

您應該使用 vue-cli API。 在您的 package.json 中，將以下內容添加到腳本中：“test:unit”：“vue-cli-service test:unit”您已經安裝了 vue-cli 和 test-utils，所以它現在應該可以工作了。