我在运行jest测试时遇到问题.我得到了一个意外的标识符

我已经try 过清理npm缓存和installing npm babel jest、polyfill、preset-es2015.我还try 了一些不同的配置.

这是我的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

我希望通过考试,但我收到了错误信息.我认为问题在于《巴别塔》中的env部分.配置.js

Edit: I'm also using windows 7,我认为这可能会导致前后混合的斜杠.

Edit2: I just tested it in Linux and it doesn't work.我都是前斜杠

 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 

Edit 3: I saw a lot of people fixed it with [these lines](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,但它不起作用.

Edit 4:我刚刚在我的Jest 文件中添加了一些东西.删除了我babel文件中的一对

新Jest 文件

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'
    ]
  }

presets: @vue/app部分外,我还有deleted everything from my babel file部分.

这是我得到的新错误.

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

    SyntaxError: Unexpected string

推荐答案

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

Jest 配置.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'
    ]
  }

巴贝尔.配置.js

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

笔记

  • 我需要添加babel core bridge才能在vue jest中使用@babel/core
  • 建议在更改文件后清除jest的缓存

Vue.js相关问答推荐

为什么v-show需要组件的包装元素?

如何使用composition api v-model Select 框获取其他JSON 值?

如何向 添加方法和 v-model?

从数据库中删除后,Vue.js $remove 不删除元素

如何在 vue 的 scss 中使用深度 Select 器

Vue watch 意外调用了两次

在按键 vuejs 中只允许数字和一个小数点后 2 位限制

如何从我的 Vuetify 数据表中正确更新 Vuex 状态

如何在 vue 3 脚本设置中的组件上使用 v-model

如何从 .vue 文件中导出多个对象

Vue:从 Vue 实例更新组件数据

使用 VueJS 在 v-for 中转换

Amazon EC2 错误:监听 EACCES 0.0.0.0:80

Vue-test-utils:在单个测试中多次使用 $nextTick

vuetify:以编程方式显示对话框

在加载数据之前触发mounted方法 - VueJS

动态更改我的 Vue.js SPA 主题的最佳方式?

从 ajax 调用填充 Vue.js 中的下拉列表

如何让 vuetify 数据表在卡片内时跨越容器的整个宽度?

仅在提交时验证 vuetify 文本字段