Vue-cli: Jest HelloWorld Test Fails Out of the Box

[rgant]

Version

3.0.0-beta.9

Reproduction link

https://github.com/rgant/vue-helloworld-test-fails

Steps to reproduce

Create new Vue project with Jest unit tests. Run jest.

What is expected?

Initial HelloWorld component test pass

What is actually happening?

Test fails

---

euphorbus:~/Programming/vue (master)$ vue create tmp2


Vue CLI v3.0.0-beta.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Unit
? 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


Vue CLI v3.0.0-beta.9
✨  Creating project in /Users/rgant/Programming/vue/tmp2.
⚙  Installing CLI plugins. This might take a while...

yarn install v1.6.0
(node:9224) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Saved lockfile.
✨  Done in 19.86s.

🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.6.0
(node:9230) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...

success Saved lockfile.
✨  Done in 4.39s.

⚓  Running completion hooks...
⠁ 
🎉  Successfully created project tmp2.
👉  Get started with the following commands:

 $ cd tmp2
 $ yarn serve

euphorbus:~/Programming/vue (master)$ cd tm
tmp/  tmp2/ 
euphorbus:~/Programming/vue (master)$ cd tmp2
euphorbus:~/Programming/vue/tmp2 (master)$ ls
jest.config.js node_modules   package.json   public         src            tests          yarn.lock
euphorbus:~/Programming/vue/tmp2 (master)$ ls tests/unit/HelloWorld.spec.js 
tests/unit/HelloWorld.spec.js
euphorbus:~/Programming/vue/tmp2 (master)$ cat tests/unit/HelloWorld.spec.js 
import { shallow } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message'
    const wrapper = shallow(HelloWorld, {
      propsData: { msg }
    })
    expect(wrapper.text()).toMatch(msg)
  })
})
euphorbus:~/Programming/vue/tmp2 (master)$ which jest
node_modules/.bin/jest
euphorbus:~/Programming/vue/tmp2 (master)$ jest
 FAIL  tests/unit/HelloWorld.spec.js
  ● Test suite failed to run

    /Users/rgant/Programming/vue/tmp2/tests/unit/HelloWorld.spec.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { shallow } from '@vue/test-utils';
                                                                                                    ^

    SyntaxError: Unexpected token {

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

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.783s
Ran all test suites.
euphorbus:~/Programming/vue/tmp2 (master)$ cat package.json 
{
  "name": "tmp2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "test": "vue-cli-service test"
  },
  "dependencies": {
    "vue": "^2.5.16"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.0-beta.9",
    "@vue/cli-plugin-unit-jest": "^3.0.0-beta.9",
    "@vue/cli-service": "^3.0.0-beta.9",
    "@vue/test-utils": "^1.0.0-beta.10",
    "babel-core": "^7.0.0-0",
    "babel-jest": "^22.0.4",
    "vue-template-compiler": "^2.5.13"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

[rgant]

I gotta say the Vue Issue Helper was a really poor experience. I had to turn off my ad blocker to get it to even work. Because the form fields are "fancy" all the times I needed to refresh trying to get it to work resulted in my losing all of my previous input. It also doesn't have an option for the current version of the cli beta9 so I had to change that here. It also didn't help me to determine what project this issue should be filed under. I assume the cli.

[Akryum]

I had to turn off my ad blocker to get it to even work.

It works for me with uBlock Origin enabled. Also, we are not responsible for and not controlling whatever browser addon you are using.

Because the form fields are "fancy" all the times I needed to refresh trying to get it to work resulted in my losing all of my previous input.

The input not being "fancy" (I don't even know what you really meant by that) won't retain values if you refresh, it's how browsers work.

It also doesn't have an option for the current version of the cli beta9 so I had to change that here.

This is because the git tags weren't turned into proper GitHub releases for the last 3 betas of vue-cli. It can be fixed in the new issue helper to fetch tags instead of releases.

It also didn't help me to determine what project this issue should be filed under.

I would assume that having an issue with vue-cli, you would select the vue-cli project...

Also, the issue helper has a repository where you can post the issues you encounter with it.

[rgant]

Ok, so I shouldn't have polluted this issue with complaining about the issue tool. I'd appreciate focusing on the actual ticket content instead of my difficulties submitting it. If you want I can delete my earlier comment.

Just FYI:

The autocomplete attribute also controls whether Firefox will, unlike other browsers, persist the dynamic disabled state and (if applicable) dynamic checkedness of an across page loads. The persistence feature is enabled by default. Setting the value of the autocomplete attribute to off disables this feature. This works even when the autocomplete attribute would normally not apply to the by virtue of its type. See bug 654072.

[Akryum]

Just FYI:

This only impacts the disabled and checkedness of inputs, not their actual value (you can try in a basic webpage, type something into an input and refresh).

If you want I can delete my earlier comment.

You can open issues here, would be much appreciated.

[LinusBorg]

euphorbus:~/Programming/vue/tmp2 (master)$ jest

the plugin brings its own test script:

test": "vue-cli-service test"

Running jest directly doesn't work. This is because the vue-cli-service test command does set a few env variables, which our babel preset uses to dermine wether or not to compile import statements to commonjs

In other words: Everything works as expectd if you follow the steps defined by this plugin. If you leave that path, it's your responsibility to adjust your config to make it work.

You could, for example, make the necessary adjustments yourself in .babelrc

[yyx990803]

Please at least read the docs of the plugin you installed before opening issues... They are linked in the welcome page when you first run the app.

[rgant]

All of the test run methods result in the exact same error:

euphorbus:~/Programming/vue/tmp2 (master)$ yarn test
yarn run v1.6.0
(node:12838) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
$ vue-cli-service test
 FAIL  tests/unit/HelloWorld.spec.js
  ● Test suite failed to run

    /Users/rgant/Programming/vue/tmp2/tests/unit/HelloWorld.spec.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { shallow } from '@vue/test-utils';
                                                                                                    ^

    SyntaxError: Unexpected token {

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

 FAIL  tests/unit/HelloWorld.spec.ts
  ● Test suite failed to run

    /Users/rgant/Programming/vue/tmp2/src/components/HelloWorld.vue:2
    import _classCallCheck from "/Users/rgant/Programming/vue/tmp2/node_modules/@babel/runtime/helpers/classCallCheck";
           ^^^^^^^^^^^^^^^

    SyntaxError: Unexpected identifier

      1 | import { shallow } from '@vue/test-utils';
    > 2 | import HelloWorld from '@/components/HelloWorld.vue';
      3 | 
      4 | describe('HelloWorld.vue', () => {
      5 |   it('renders props.msg when passed', () => {

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)
      at Object.<anonymous> (tests/unit/HelloWorld.spec.ts:2:19)

Test Suites: 2 failed, 2 total
Tests:       0 total
Snapshots:   0 total
Time:        1.372s
Ran all test suites.
 ERROR  jest exited with code 1.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
euphorbus:~/Programming/vue/tmp2 (master)$ vue-cli-service test
 FAIL  tests/unit/HelloWorld.spec.js
  ● Test suite failed to run

    /Users/rgant/Programming/vue/tmp2/tests/unit/HelloWorld.spec.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { shallow } from '@vue/test-utils';
                                                                                                    ^

    SyntaxError: Unexpected token {

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

 FAIL  tests/unit/HelloWorld.spec.ts
  ● Test suite failed to run

    /Users/rgant/Programming/vue/tmp2/src/components/HelloWorld.vue:2
    import _classCallCheck from "/Users/rgant/Programming/vue/tmp2/node_modules/@babel/runtime/helpers/classCallCheck";
           ^^^^^^^^^^^^^^^

    SyntaxError: Unexpected identifier

      1 | import { shallow } from '@vue/test-utils';
    > 2 | import HelloWorld from '@/components/HelloWorld.vue';
      3 | 
      4 | describe('HelloWorld.vue', () => {
      5 |   it('renders props.msg when passed', () => {

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)
      at Object.<anonymous> (tests/unit/HelloWorld.spec.ts:2:19)

Test Suites: 2 failed, 2 total
Tests:       0 total
Snapshots:   0 total
Time:        1.433s
Ran all test suites.
 ERROR  jest exited with code 1.
euphorbus:~/Programming/vue/tmp2 (master)$ jest
 FAIL  tests/unit/HelloWorld.spec.js
  ● Test suite failed to run

    /Users/rgant/Programming/vue/tmp2/tests/unit/HelloWorld.spec.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { shallow } from '@vue/test-utils';
                                                                                                    ^

    SyntaxError: Unexpected token {

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

 FAIL  tests/unit/HelloWorld.spec.ts
  ● Test suite failed to run

    /Users/rgant/Programming/vue/tmp2/src/components/HelloWorld.vue:2
    import _classCallCheck from "/Users/rgant/Programming/vue/tmp2/node_modules/@babel/runtime/helpers/classCallCheck";
           ^^^^^^^^^^^^^^^

    SyntaxError: Unexpected identifier

      1 | import { shallow } from '@vue/test-utils';
    > 2 | import HelloWorld from '@/components/HelloWorld.vue';
      3 | 
      4 | describe('HelloWorld.vue', () => {
      5 |   it('renders props.msg when passed', () => {

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)
      at Object.<anonymous> (tests/unit/HelloWorld.spec.ts:2:19)

Test Suites: 2 failed, 2 total
Tests:       0 total
Snapshots:   0 total
Time:        1.397s
Ran all test suites.

[rgant]

I have been trying to read the documents. This is probably related to changes in babel beta46 which will cause changes in how to hierarchical babel configuration scripts are processed.

[wolfeidau]

I fixed this by adding the following fragment to jest.config.js as per https://github.com/kidd3/SL/pull/4.

  "transformIgnorePatterns": [
    "node_modules/(?!jest-test)" + "node_modules/(?!(jest-test))"
  ],

Would it be worth doing a PR for this?

[LinusBorg]

I'm not a fan of change that are not clear to me. What does that do, why does it fix the problem?

[wolfeidau]

@LinusBorg totally, would need some investigation. My initial understanding is that it is associated with how jest and babel work together. https://github.com/thymikee/jest-preset-angular/issues/66#issuecomment-323696947 has a note on this.

[webia1]

I've updated CLI (Beta 11 to 15) and created a new virgin project and got this error very first time:

 npm run test:unit

> [email protected] test:unit /whateverFolder/tevue
> vue-cli-service test:unit

 FAIL  tests/unit/HelloWorld.spec.ts
  ● Test suite failed to run

    /whateverFolder/tevue/src/components/HelloWorld.vue:2
    import _classCallCheck from "/whateverFolder/tevue/node_modules/@babel/runtime/helpers/builtin/es6/classCallCheck";

    SyntaxError: Unexpected identifier

      1 | import { shallowMount } from '@vue/test-utils';
    > 2 | import HelloWorld from '@/components/HelloWorld.vue';
      3 |
      4 | describe('HelloWorld.vue', () => {
      5 |   it('renders props.msg when passed', () => {

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)
      at Object.<anonymous> (tests/unit/HelloWorld.spec.ts:2:19)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        4.488s
Ran all test suites.
(node:34241) ExperimentalWarning: The fs.promises API is experimental
 ERROR  jest exited with code 1.

Vue CLI v.3.0.0-beta.15 (vue-router, vuex, stylus, babel, typescript, pwa, unit-jest)
Node v10.1.0, Npm v6.1.0

The rest is as in package.json.

[LinusBorg]

Then please open a new issue. We can't track closed ones, and this one was about a similar error, but 6 releases ago.

It should have been fixed with this: https://github.com/vuejs/vue-cli/commit/1279b3e

[webia1]

That's the working jest configuration part in package.json

 "jest": {
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "vue"
    ],
    "transform": {
      "^.+\\.vue$": "vue-jest",
      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
      "^.+\\.tsx?$": "ts-jest"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!jest-test)"
    ],
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1"
    },
    "snapshotSerializers": [
      "jest-serializer-vue"
    ],
    "testMatch": [
      "<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))"
    ]
  }

Adding the following part did help (@wolfeidau you have a typo in your code, all the stuff right to + including + is redundant :

    "transformIgnorePatterns": [
      "node_modules/(?!jest-test)"
    ],

[yyx990803]

Can't reproduce on fresh beta.15 installs, using npm/yarn and Node 8/10. Are you on Windows?

Please open a separate issue with a reproducible repo because transformIgnorePatterns is just a band-aid fix and is not really addressing the problem.

[chipit24]

Posting here since this was a top hit for me on a Google search.

I ran into this issue even after updating all my dependencies to the latest version. To finally fix the issue, I had to switch to yarn.

Another thing that worked is spinning up a new app with the cli (with the same options as the problem repo), copying over the package.json from the problem repo to the new app, running npm i, copying the lockfile from the new app to the problem one, and then running npm i again in the problem repo.

Possibly an issue with npm not updating nested dependencies 🤷‍♂️

[dph01]

This problem has happened a couple of times for me when trying to run npm run test:unit when test:unit was defined as either vue-cli-service test:unit or just jest.

None of the above suggestions worked for me.

I found the following cleared the problem:

1. running yarn (with no arguments).
2. running yarn run test:unit (the tests ran OK).
3. running npm run test:unit, the tests now work fine

Edit: The problem just happened again, it looks like step 2 is unnecessary.