我无法通过 symfony/webpack-encore 使用 Jest 和 Vuejs 运行测试

Posted 2023-02-22

【中文标题】我无法通过 symfony/webpack-encore 使用 Jest 和 Vuejs 运行测试

【英文标题】：I can't run test using Jest and Vuejs with symfony/webpack-encore

【发布时间】：2020-03-02 22:49:16

【问题描述】：

我正在尝试在 symfony/webpack-encore 上使用 jest 和 vuejs 框架实现单元测试，但经过多次尝试，我仍然收到此错误：

Jest 遇到了意外的令牌

这通常意味着您正在尝试导入 Jest 无法解析的文件， 例如它不是纯 javascript。

默认情况下，如果 Jest 看到 Babel 配置，它将使用它来转换您的文件，忽略“node_modules”。

进口 ^

SyntaxError: Unexpected token

20 | 21 |从'三'导入*作为三；

22 |从“三个/examples/jsm/loaders/GLTFLoader.js”导入 GLTFLoader ； | ^

这里是我的 .babelrc 和 package.json 文件：

.babelrc：

  "presets": [
    "env", 
    ["env", 
      "modules": false
    ],
    "stage-2",
    "vue"
  ],
  "plugins": ["transform-runtime", "transform-es2015-modules-commonjs"],
  "env": 
    "test": 
      "presets":[
        ["es2015",  "modules": false ],
        "vue",
        "stage-2"
      ],
      "plugins": [
        "transform-es2015-modules-commonjs",
        "dynamic-import-node"
      ]
    
  

package.json：

    "dependencies": 
        "bazinga-translator": "^2.6.6",
        "bootstrap": "^4.3.1",
        "driver.js": "^0.9.6",
        "highcharts": "^6.2.0",
        "jquery": "^3.3.1",
        "jquery-ui": "^1.12.1",
        "jquery.fancytree": "^2.30.2"
    ,
    "devDependencies": 
        "@babel/core": "^7.7.0",
        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.2.0",
        "@babel/plugin-syntax-dynamic-import": "^7.2.0",
        "@babel/preset-env": "^7.7.1",
        "@babel/preset-stage-2": "^7.0.0",
        "@symfony/webpack-encore": "^0.27.0",
        "@vue/cli-plugin-babel": "^3.0.5",
        "@vue/cli-plugin-e2e-cypress": "^3.0.5",
        "@vue/cli-plugin-eslint": "^3.0.5",
        "@vue/cli-plugin-pwa": "^3.0.5",
        "@vue/cli-plugin-unit-jest": "^3.0.5",
        "@vue/cli-service": "^3.0.5",
        "@vue/test-utils": "^1.0.0-beta.29",
        "babel-jest": "^24.9.0",
        "babel-loader": "^8.0.6",
        "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
        "babel-preset-env": "^1.7.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-stage-0": "^6.24.1",
        "babel-preset-stage-2": "^6.24.1",
        "babel-preset-vue": "^2.0.2",
        "core-js": "^3.0.0",
        "expose-loader": "^0.7.5",
        "file-loader": "^4.2.0",
        "gltf-loader-2": "^0.0.3",
        "jest": "^24.9.0",
        "jest-serializer-vue": "^2.0.2",
        "jest-transform-stub": "^2.0.0",
        "jest-vue-preprocessor": "^1.7.0",
        "node-sass": "^4.12.0",
        "regenerator-runtime": "^0.13.2",
        "sass-loader": "^7.0.1",
        "stats.js": "^0.17.0",
        "three": "^0.110.0",
        "three-orbitcontrols": "^2.110.1",
        "transform-runtime": "^0.0.0",
        "url-loader": "^1.1.1",
        "vue": "^2.6.10",
        "vue-jest": "^3.0.5",
        "vue-loader": "^15.0.11",
        "vue-svg-loader": "^0.12.0",
        "vue-template-compiler": "^2.6.10",
        "webpack-notifier": "^1.6.0"
    ,
    "scripts": 
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress",
        "test": "jest ./assets/src",
        "test:unit": "vue-cli-service test:unit"
    

我确实尝试过使用 vue-cli，但在同一个地方仍然遇到同样的错误！

谢谢，

【问题讨论】：

您要导入哪些 Javascript 文件到 Jest 中？

这是一个vuejs组件，上面有import GLTFLoader from 'three/examples/jsm/loaders/GLTFLoader.js';的块

您需要加载 Javascript 文件。 Vue 组件不是 JS 文件。

这就是为什么我将babel-preset-vue 安装为 babel 预设以便我可以加载 vue 组件但这里的问题是导入 js 文件而不是 vue 组件

【参考方案1】：

问题在于导入 three.js 库， 来源：https://github.com/facebook/jest/issues/3905#issuecomment-323525803

只要关注这个doc，我就能运行我的测试。