运行使用 Jest 测试时的转译依赖

Question

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

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 需要 t运行spile 的代码。根据 Jest docs，如果 unt运行spiled 代码在 tiptap 或 tiptap-vuetify

中，将以下内容添加到 jest.config.js 应该可以解决问题

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

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

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

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

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

运行使用 Jest 测试时的转译依赖

Transpile dependency when running tests with Jest

javascript

vue.js

jestjs

babel-jest

运行 使用 Jest 测试时的转译依赖

Transpile dependency when running tests with Jest

javascript

vue.js

jestjs

babel-jest

运行使用 Jest 测试时的转译依赖