时间戳

首页 > 解决方案 > Jest 或 Mocha 与 Vue：SyntaxError：无法在模块外使用 import 语句

javascript - Jest 或 Mocha 与 Vue：SyntaxError：无法在模块外使用 import 语句

问题描述

编辑：这篇文章因编辑而失控，请点击此链接到一个新的 Stackoverflow 帖子，该帖子更清晰： SyntaxError:Cannot use import statement outside a module when following vue-test-utils official tutorial

关于这个问题的帖子和线程数以千计，我仍然无法解决我的问题。我遵循了 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"

包.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
    })
})

我试过的：

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 配置：
{
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      ".*\\.(vue)$": "vue-jest"
    }
  }
}
  1. npm install --save-dev babel-jest @babel/core @babel/preset-env babel-core@^7.0.0-bridge.0
  2. 将笑话配置调整为：
{
  "jest": {
    "transform": {
      // process `*.js` files with `babel-jest`
      ".*\\.(js)$": "babel-jest" //<-- changed this
    }
  }
}
  1. 将 babel 配置调整为：
module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset',
        '@babel/preset-env' //<-- added this
    ]
};

标签： javascriptvue.jsjestjsmocha.jsvue-test-utils

解决方案

推荐阅读