Jest unit testing solutions fail the initial test

Version

3.0.0-beta.9

Steps to reproduce

Vue CLI v3.0.0-beta.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, Linter, Unit
? Pick a linter / formatter config: Airbnb
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

What is expected?

Test passed

What is actually happening?

Test failed

---

$ vue-cli-service test
 FAIL  tests/unit/HelloWorld.spec.js
  ● Test suite failed to run
    SyntaxError: Unexpected token import

jest.config.js

module.exports = {
  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',
+    '^.+\\.js?$': 'babel-jest',
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  snapshotSerializers: [
    'jest-serializer-vue',
  ],
  testMatch: [
    '<rootDir>/(tests/unit/**/*.spec.(ts|tsx|js)|**/__tests__/*.(ts|tsx|js))',
  ],
};

The .js file should also be converted by babel-jest

[Buffalom]

Having the same issue. Initialized project as follows using the vue ui.

Development environment: Windows 10 Ent npm 6.1.0 vue 3.0.0-beta.16 node v8.11.1

Initially called the project “app” in the vue ui. Got the same error “unexpected token import” on the initial test without reconfiguring anything. When renaming the folder to “App” it worked.

When initializing the same project in a different folder it works without renaming it already. Therefore cannot recreate the problem in a different location right now and provide you with a repo.

[u3u]

@yyx990803 Oh yes, I did not notice before ? Character 😅 But now this problem has arisen again, I don’t know how to reproduce it. After testing, I found out that as long as I change the directory name, it will affect the test results. 🤔

---

I just changed lyric to Lyric and the test passed. When I changed it back to test it failed again.

---

I seem to find the reasons, if I configured babel-plugin-jsx-v-model and the directory name is lyric, the test will not pass 🤔

---

The above assumptions are not quite correct. I have re-initialized a project. When my .babelrc is configured as follows, the test fails:

{
  "presets": [
    [
      "@vue/app",
      {
        "decoraorsLegacy": true
      }
    ]
  ],
  "plugins": [
    "jsx-v-model",
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ],
  "env": {
    "production": {
      "plugins": [["emotion", { "hoist": true }]]
    },
    "development": {
      "plugins": [["emotion", { "sourceMap": true, "autoLabel": true }]]
    }
  }
}

The test passes when my .babelrc is configured as follows:

{
  "presets": [
    [
      "@vue/app",
      {
        "decoraorsLegacy": true
      }
    ]
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ],
  "env": {
    "production": {
      "plugins": [["emotion", { "hoist": true }]]
    },
    "development": {
      "plugins": [["emotion", { "sourceMap": true, "autoLabel": true }]]
    }
  }
}

{
  "presets": [
    [
      "@vue/app",
      {
        "decoraorsLegacy": true
      }
    ]
  ],
  "plugins": [
    "jsx-v-model",
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

{
  "presets": [
    [
      "@vue/app",
      {
        "decoraorsLegacy": true
      }
    ]
  ],
  "plugins": ["jsx-v-model"],
  "env": {
    "production": {
      "plugins": [["emotion", { "hoist": true }]]
    },
    "development": {
      "plugins": [["emotion", { "sourceMap": true, "autoLabel": true }]]
    }
  }
}

{
  "presets": [
    [
      "@vue/app",
      {
        "decoraorsLegacy": true
      }
    ]
  ],
  "plugins": [
    "jsx-v-model",
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

package.json

{
  "name": "vue-cli-jest-bug-reproduce",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "test": "vue-cli-service test",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^2.5.16",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.0-beta.9",
    "@vue/cli-plugin-eslint": "^3.0.0-beta.9",
    "@vue/cli-plugin-unit-jest": "^3.0.0-beta.9",
    "@vue/cli-service": "^3.0.0-beta.9",
    "@vue/eslint-config-airbnb": "^3.0.0-beta.9",
    "@vue/test-utils": "^1.0.0-beta.10",
    "babel-core": "^7.0.0-0",
    "babel-jest": "^22.0.4",
    "babel-plugin-component": "^1.1.0",
    "babel-plugin-emotion": "^9.1.2",
    "babel-plugin-jsx-v-model": "^2.0.3",
    "lint-staged": "^6.0.0",
    "vue-template-compiler": "^2.5.13"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.js": [
      "vue-cli-service lint",
      "git add"
    ],
    "*.vue": [
      "vue-cli-service lint",
      "git add"
    ]
  }
}

Once you combine them with 3 plug-ins, the test will fail! However, as long as the directory name is modified to be inconsistent with the <app-name> when vue create <app-name> is initialized, the test will pass! Oh! It drives me crazy!