Question

运行笑话测试时出现问题。我收到一个导入意外标识符

我已经尝试通过清理npm缓存和installing npm babel jest，polyfill，preset-es2015来进行尝试。我也read this在这里和那里尝试一些不同的配置。

这是我的babel.config.js

module.exports = {
  presets: [
    '@vue/app'
  ],
  env: {
    test: {
      plugins: [
        "transform-strict-mode",
        "transform-es2015-modules-commonjs",
        "transform-es2015-spread",
        "transform-es2015-destructuring",
        "transform-es2015-parameters"
      ]
    }
  }
}

和我的jest config在package.json中

"jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      "^.+\\.js$": "babel-jest",
      ".*\\.(vue)$": "vue-jest"
    },
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1"
    }
  }

这是错误。

Test suite failed to run

    PCROUTE\Test.test.js:3
    import _interopRequireDefault from "PCROUTE\\node_modules\\@babel\\runtime-corejs2/helpers/esm/interopRequireDefault";
           ^^^^^^^^^^^^^^^^^^^^^^

    SyntaxError: Unexpected identifier

我希望通过测试，但是却收到该错误消息。我认为问题出在babel.config.js中的env部分

编辑：我也在使用Windows 7 ，这可能会导致那些前后混合斜杠。

Edit2：我刚刚在Linux上对其进行了测试，但无法正常工作。我的所有内容都用正斜杠

 PCROUTE/src/tests/Test.test.js:3
    import _interopRequireDefault from "PCROUTE/node_modules/@babel/runtime-corejs2/helpers/esm/interopRequireDefault";
           ^^^^^^^^^^^^^^^^^^^^^^

    SyntaxError: Unexpected identifier

      at ScriptTransformer._transformAndBuildScript

编辑3：我看到很多人使用[这些行] （https://github.com/vuejs/vue-cli/issues/1879#issuecomment-409872897）对其进行了修复。

transformIgnorePatterns: [
    "node_modules/(?!(babel-jest|jest-vue-preprocessor)/)"
  ]

jest config file中的

。我添加了它们并运行了此./node_modules/jest/bin/jest.js --clearCache，但是它不起作用。

编辑4：：我刚刚在jest文件中添加了一些内容。并删除了我的babel文件中的一对，然后现在我明白了。 Unexpected String

新的笑话文件

module.exports = {
    moduleFileExtensions: [
      'js',
      'jsx',
      'json',
      'vue'
    ],
    transform: {
      '^.+\\.vue$': 'vue-jest',
      '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
      '^.+\\.jsx?$': 'babel-jest'
    },
    transformIgnorePatterns: [
      '/node_modules/'
    ],
    moduleNameMapper: {
      '^@/(.*)$': '<rootDir>/src/$1'
    },
    snapshotSerializers: [
      'jest-serializer-vue'
    ],
    testMatch: [
      '**/tests/**/*.test.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
    ],
    testURL: 'http://localhost/',
    watchPlugins: [
      'jest-watch-typeahead/filename',
      'jest-watch-typeahead/testname'
    ]
  }

然后，我从babel文件中删除了所有内容，除了presets: @vue/app部分。

这是我遇到的新错误。

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import "core-js/modules/es6.array.find";
                                                                                                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    SyntaxError: Unexpected string

Answer 1

经过几天的努力。最后我回答了我的问题。在这里，我保留了所有配置文件。

jest.config.js

process.env.VUE_CLI_BABEL_TARGET_NODE = true;
process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true;

module.exports = {
    moduleFileExtensions: [
      'js',
      'jsx',
      'json',
      'vue'
    ],
    transform: {
      '^.+\\.vue$': '<rootDir>/node_modules/vue-jest',
      '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
      '^.+\\.jsx?$': 'babel-jest'
    },
    transformIgnorePatterns: [
      '/node_modules/'
    ],
    moduleNameMapper: {
        '^@/(.*)$': '<rootDir>/src/$1'
    },
    snapshotSerializers: [
      'jest-serializer-vue'
    ],
    testMatch: [
      '**/tests/**/*.test.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
    ],
    testURL: 'http://localhost/',
    watchPlugins: [
      'jest-watch-typeahead/filename',
      'jest-watch-typeahead/testname'
    ]
  }

babel.config.js

module.exports = {
  presets: [
    '@vue/app'
  ]
}

注释

我需要添加babel core bridge以便能够将@ babel / core与vue-jest一起使用
建议更改文件后清除玩笑的缓存

导入意外的标识符+ SyntaxError：意外的字符串

1 个答案:

jest.config.js

babel.config.js

注释