Jest 甚至无法运行导入异步函数的组件的测试套件

Question

我已将一个项目从 angularjs 移至 Vue。移动它之后，我试图开玩笑地添加单元测试。我对一些较小的组件和服务进行了测试，它们按预期工作，没有任何问题。我现在正在尝试向一些稍微复杂一些的组件添加测试，现在我只收到该测试套件的错误。报错如下

E:\Development\work\project\node_modules\@babel\runtime\helpers\esm\asyncToGenerator.js:17
    export default function _asyncToGenerator(fn) {
    ^^^^^^

    SyntaxError: Unexpected token 'export'

我要测试的组件有几个数据属性和子组件。

基本要点是

<template>
<div>
  <div v-if="allowed">...</div>
  <ChildComponent />
</div>

<script>
  import ChildComponent from './ChildComponent';
  import {getIsAllowed} from './allowed.service.js';

  export default {
    name: 'Parent',
    data() {
      return {
        allowed: getIsAllowed();
      }
    }
</script>

还有很多，但与我面临的问题无关。

问题出在ChildComponent，类似如下。

<template>
<div>...</div>
</template>

<script>
import {functionThatCallsAyncFunction} from 'fileThatContainsAsyncFunctions'
</script>

我的测试脚本如下

import {mount} from '@vue/test-utils';
import Parent from './Parent';

describe('my tests', () => {
  test('verify tests run', () => {
    expect(true).toBe(true);  
  })
})

这导致了我看到的错误。

我可以删除 Parent 的导入以消除错误。

我也可以从父组件中删除子组件的导入来修复错误。

我也可以去掉调用Child中async函数的函数的导入来修复错误。

我可以将函数从 async/await 更改为使用 .then()，它会起作用。

shallowMount 和 stubs 没有效果，因为在到达那个点之前测试炸弹。

一定是我遗漏了什么导致异步函数根本无法运行。我已经搞砸了 2 天了，google 提供了很多想法，但 none 已经奏效了。

我的相关 package.json 部分

"scripts" : {
  "test": "jest --config=jest.conf.js"
},
"devDependencies" : {
    "@babel/core": "^7.1.6",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/preset-env": "^7.1.6",
    "@vue/babel-preset-app": "^3.11.0",
    "@vue/test-utils": "^1.0.0-beta.26",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^23.6",
    "babel-loader": "^8.0.4",
    "jest": "^23.6.0",
    "jest-serializer-vue": "^2.0.2",
    "vue-jest": "^3.0.1"
}

jest.conf.js很简单

const {defaults} = require('jest-config');
module.exports = {
  moduleFileExtensions: [...defaults.moduleFileExtensions, 'vue'],
  transform: {
    ".*\.(vue)$": "vue-jest",
    "^.+\.js$": "<rootDir>/node_modules/babel-jest"
  },
  'setupFiles': ['./tests/setup.js']
};

我的也是babel.config.js

module.exports = {
  presets: [
    '@vue/app',
    ['@babel/preset-env', {targets: { node: 'current'}}],
  ],
};

如果需要任何其他信息，我很乐意提供。这让我难以自拔。希望有人有一些想法来帮助它像我期望的那样工作。

提前致谢。

Answer 1

您可以尝试让 Jest 转译有问题的节点模块。有关完整说明，请参阅 https://github.com/facebook/jest/issues/2550#issuecomment-381718006。

  transformIgnorePatterns: [
    '/node_modules/(?!transpile-me|transpile-me-too).+(js|jsx)$'
  ],

和https://jestjs.io/docs/en/configuration.html#transformignorepatterns-arraystring

Jest 甚至无法运行导入异步函数的组件的测试套件

Jest failing to even run a test suite for component that imports async function

unit-testing

npm

vue.js

jestjs

babeljs

Jest 甚至无法 运行 导入异步函数的组件的测试套件

Jest failing to even run a test suite for component that imports async function

unit-testing

npm

vue.js

jestjs

babeljs

Jest 甚至无法运行导入异步函数的组件的测试套件