时间戳

首页 > 解决方案 > 使用 Jest 运行测试时转换依赖项

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

问题描述

我在我的 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 文档jest.config.js，如果未转译的代码在tiptap 或tiptap-vuetify 中，则添加以下内容应该可以解决问题

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

但这没有任何区别。我添加了以下内容：

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

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

标签： javascriptvue.jsjestjsbabel-jest

解决方案

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

错误很可能来自，如Jest 错误vuetify的输出所示：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排除vuetify项以确保它被转译：

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

推荐阅读