使用 Vue.js 学习 JEST：第一个示例测试时出错

Posted 2023-02-22

【中文标题】使用 Vue.js 学习 JEST：第一个示例测试时出错

【英文标题】：Learning JEST w Vue.js : error on forst example test

【发布时间】：2019-01-05 14:21:26

【问题描述】：

我正在尝试学习 JEST 来测试我的 Vue 应用程序..

我通过运行标准 vue-cli (3) 示例开始发现它，该示例具有完整配置（babel、lint、vuex、vue-router、单元和 e2e 测试）

vue create cli-test 

生成的 package.json

            "eslintConfig": 
            "root": true,
            "env": 
              "node": true
            ,
            "extends": [
              "plugin:vue/essential",
              "@vue/prettier"
            ],
            "rules": ,
            "parserOptions": 
              "parser": "babel-eslint"
            
          ,
          "postcss": 
            "plugins": 
              "autoprefixer": 
            
          ,
          "browserslist": [
            "> 1%",
            "last 2 versions",
            "not ie <= 8"
          ],
          "jest": 
            "moduleFileExtensions": [
              "js",
              "jsx",
              "json",
              "vue"
            ],
            "transform": 
              "^.+\\.vue$": "vue-jest",
              ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
              "^.+\\.jsx?$": "babel-jest"
            ,
            "moduleNameMapper": 
              "^@/(.*)$": "<rootDir>/src/$1"
            ,
            "snapshotSerializers": [
              "jest-serializer-vue"
            ],
            "testMatch": [
              "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
            ],
            "testURL": "http://localhost/"
          

我运行 lint 没有任何错误

   yarn lint  

然后我运行 test:unit，在唯一生成的规范文件 tests/unit/HelloWorld.spec.js

中的 import 语句出现错误

            yarn run test:unit
            yarn run v1.9.2
            $ vue-cli-service test:unit
             FAIL  tests/unit/HelloWorld.spec.js
              ● Test suite failed to run

                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

                Details:

                /Users/yves/Developments/WIP/TESTS/cli-test/tests/unit/HelloWorld.spec.js:1
                ("Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest)import "core-js/modules/es6.array.iterator";
                                                                                                         ^^^^^^

                SyntaxError: Unexpected token import

                  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

            Test Suites: 1 failed, 1 total
            Tests:       0 total
            Snapshots:   0 total
            Time:        5.532s
            Ran all test suites.
            error Command failed with exit code 1.
            info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

为什么这个生成的测试没有通过？在自动生成之前不应该检查一下吗？学习的开始太糟糕了......或者是乐观主义者，这个错误被提出来立即挑战新手......

【参考方案1】：

需要升级 babel-jest

yarn upgrade babel-jest@23.4.0"

然后测试：uniy通过了

 yarn run test:unit
 yarn run v1.9.2
 $ vue-cli-service test:unit
 PASS  tests/unit/HelloWorld.spec.js
   HelloWorld.vue
    ✓ renders props.msg when passed (30ms)

  Test Suites: 1 passed, 1 total
 Tests:       1 passed, 1 total
 Snapshots:   0 total
 Time:        7.349s
 Ran all test suites.