使用 Jest 运行测试时转换依赖项

Question

我在我的 Vue 应用程序中添加了对 tiptap-vuetify 的依赖，这反过来又添加了对其他 19 个模块的传递依赖。添加后，我运行测试并收到以下错误

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

SyntaxError: Unexpected token 'export'

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
  at node_modules/tiptap-vuetify/dist/bundle-umd.js:1:112
  at Object.<anonymous> (node_modules/tiptap-vuetify/dist/bundle-umd.js:1:2)

因此，tiptap-vuetify 似乎包含 Jest 需要转译的代码。根据Jest docs 将以下内容添加到jest.config.js 应该可以解决问题，如果未编译的代码位于tiptap 或tiptap-vuetify 中

transformIgnorePatterns: [
  "node_modules/(?!(tiptap-vuetify|tiptap)/)"
]

但这并没有什么不同。我添加了以下内容：

transformIgnorePatterns: ['/node_modules/tiptap.*']

并且问题不再发生，但我想我可能正在转换我的整个依赖关系树，因为现在运行测试需要更长的时间。有没有更好的方法来解决这个问题？

Answer 1

tiptap-vuetify 不是导致错误的实际模块，尽管堆栈跟踪具有误导性。

错误最有可能来自vuetify，如Jest 错误的Details 输出所示：

    Jest encountered an unexpected token

    //...

    Details:
                                                         ?
    /Users/tony/src/tmp/vue2-vuetify-test/node_modules/vuetify/lib/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from './components';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token 'export'

      11 | <script>
      12 | // import the component and the necessary extensions
    > 13 | import { TiptapVuetify, Heading, Bold, Italic, Strike, Underline, Code, Paragraph, BulletList, OrderedList, ListItem, Link, Blockquote, HardBreak, HorizontalRule, History } from 'tiptap-vuetify'
         | ^
      14 |
      15 | export default {
      16 |   // specify TiptapVuetify component in "components"

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
      at node_modules/tiptap-vuetify/dist/bundle-umd.js:1:201
      at Object.<anonymous> (node_modules/tiptap-vuetify/dist/bundle-umd.js:1:429)
      at Object.<anonymous> (src/components/MyTipTap.vue:13:1)

确保您的transformIgnorePatterns excludes vuetify 确保它被转译：

// jest.config.js
module.exports = {
  transformIgnorePatterns: ['/node_modules/(?!vuetify)'],
}