如何为通过Webpacker运行的Vue应用配置Jest

Question

我有一个通过Webpacker gem管理Vue应用程序的Rails应用程序。

我无法为单元测试设置Jest。我不得不添加一些新的依赖项，例如vue-jest和babel-jest，但是现在我遇到了测试无法识别新组件的问题。

当我运行jest命令（通过yarn）时，一旦遇到要导入到被测组件中的新组件，我编写的测试就会失败。

import AnotherComponent from './another-component.js';
       ^^^^^^^^^^^^^

SyntaxError: Unexpected identifier

  2 | 
  3 | import { mount } from '@vue/test-utils';
> 4 | import ComponentUnderTest from '../src/component-under-test.vue';
    | ^
  5 | 

我的package.json如下：

"jest": {
  "roots": [
    "test"
  ],
  "moduleFileExtensions": [
    "js",
    "json",
    "node",
    "vue"
  ],
  "transform": {
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
    ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
  },
  "transformIgnorePatterns": [
    "node_modules/"
  ]
},

您知道我需要提供更多的配置来解决此问题吗？