Import Unexpected identifier + SyntaxError: Unexpected string

Posted 2023-02-22

【中文标题】Import Unexpected identifier + SyntaxError: Unexpected string

【英文标题】：

【发布时间】：2019-10-06 15:33:14

【问题描述】：

我在运行 jest test 时遇到问题。我收到了一个意外的导入标识符

我已经尝试过清理 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"
      ]
    
  

还有我在 package.json 中的 jest config

"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

【问题讨论】：

你用来运行测试的命令是什么

npm test 运行 jest

你添加了 babel-jest。同时发布 jest.config.js

已经有了，是的，我已经添加了

"PCROUTE\\node_modules\\@babel\\runtime-corejs2/helpers/esm/interopRequireDefault" 我注意到你混合使用了反斜杠和正斜杠，你调查过吗？如果没有，Jest 配置 transform 和 moduleNameMapper 似乎会导致不一致

【参考方案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 一起使用 建议更改文件后清除jest的缓存

【讨论】：

缓存是什么意思？例如 yarn.lock 文件？！

我对另一个包也有同样的问题，我尝试了很多解决方案，但都不起作用！

哪些包？