首页 文章

学习JEST w Vue.js:最糟糕的示例测试错误

提问于
浏览
0

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

我开始通过运行标准的vue-cli(3)示例,使用完整配置(babel,lint,vuex,vue-router,unit和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 wo任何错误

yarn lint

然后我运行test:unit,在唯一生成的spec文件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 回答

  • 0

    需要升级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.
    

相关问题