Learning JEST w Vue.js : error on forst example test

Question

I am trying to learn JEST for testing my Vue apps..

I started discovering it by running a standard vue-cli (3) example, with full config ( babel, lint, vuex, vue-router, unit and e2e tests)

vue create cli-test

generated 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/"
          }

I run lint wo any error

   yarn lint

then I run test:unit, with an error on the import statement in the only generated spec file tests/unit/HelloWorld.spec.js

            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.

why this generated test does not pass ? should not it be ielf checked before being autogenerated ? too bad start for learning ... or being optimist, this error is raised to challenge immediatly the newbie ...

Unknown Unknown · Accepted Answer · 2018-07-28T21:17:16

need to upgrade babel-jest

yarn upgrade [email protected]"

then test:uniy passed

 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.

Learning JEST w Vue.js : error on forst example test

1 Answers