Jest HelloWorld Test Fails Out of the Box #1189

rgant · 2018-04-28T22:10:27Z

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"
  ]

The text was updated successfully, but these errors were encountered:

rgant · 2018-04-28T22:15:57Z

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 · 2018-04-28T22:28:54Z

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 · 2018-04-28T22:50:34Z

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 · 2018-04-29T08:32:17Z

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 · 2018-04-29T10:17:42Z

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 · 2018-04-29T12:39:45Z

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 · 2018-04-29T14:49:12Z

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 · 2018-04-29T15:06:06Z

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 · 2018-05-23T17:02:22Z

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 · 2018-05-23T17:44:13Z

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

wolfeidau · 2018-05-23T22:39:29Z

@LinusBorg totally, would need some investigation. My initial understanding is that it is associated with how jest and babel work together. thymikee/jest-preset-angular#66 (comment) has a note on this.

webia1 · 2018-06-01T17:55:38Z

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

> tevue@0.1.0 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 · 2018-06-01T17:59:32Z

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: 1279b3e

webia1 · 2018-06-01T18:04:50Z

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 · 2018-06-01T18:22:30Z

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 · 2018-06-29T20:14:01Z

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 · 2018-09-28T10:51:46Z

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:

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

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

LinusBorg closed this as completed Apr 29, 2018

fs-jonathan mentioned this issue Nov 15, 2018

Jest tests can't process import statement #1584

Open

This was referenced Apr 13, 2021

[Snyk] Fix for 1 vulnerabilities carlosrojaso/vue-cli#65

Open

[Snyk] Fix for 1 vulnerabilities Matthelonianxl/vue-cli#42

Open

This was referenced Apr 26, 2021

[Snyk] Fix for 1 vulnerabilities Matthelonianxl/vue-cli#44

Open

[Snyk] Fix for 1 vulnerabilities posrix/vue-cli#79

Open

[Snyk] Fix for 1 vulnerabilities carlosrojaso/vue-cli#66

Open

carlosrojaso mentioned this issue Nov 4, 2022

[Snyk] Fix for 1 vulnerabilities carlosrojaso/vue-cli#132

Open

snyk-bot mentioned this issue Nov 5, 2022

[Snyk] Security upgrade ts-loader from 4.5.0 to 8.0.14 posrix/vue-cli#141

Open

carlosrojaso mentioned this issue Dec 25, 2022

[Snyk] Fix for 1 vulnerabilities carlosrojaso/vue-cli#142

Open

posrix mentioned this issue Dec 25, 2022

[Snyk] Security upgrade ts-loader from 4.5.0 to 8.0.14 posrix/vue-cli#150

Open

posrix mentioned this issue Oct 1, 2023

[Snyk] Fix for 1 vulnerabilities posrix/vue-cli#186

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Jest HelloWorld Test Fails Out of the Box #1189

Jest HelloWorld Test Fails Out of the Box #1189

rgant commented Apr 28, 2018

rgant commented Apr 28, 2018

Akryum commented Apr 28, 2018

rgant commented Apr 28, 2018

Akryum commented Apr 29, 2018 •

edited

Loading

LinusBorg commented Apr 29, 2018 •

edited

Loading

yyx990803 commented Apr 29, 2018

rgant commented Apr 29, 2018

rgant commented Apr 29, 2018

wolfeidau commented May 23, 2018

LinusBorg commented May 23, 2018

wolfeidau commented May 23, 2018

webia1 commented Jun 1, 2018

LinusBorg commented Jun 1, 2018 •

edited

Loading

webia1 commented Jun 1, 2018

yyx990803 commented Jun 1, 2018

chipit24 commented Jun 29, 2018

dph01 commented Sep 28, 2018 •

edited

Loading

Jest HelloWorld Test Fails Out of the Box #1189

Jest HelloWorld Test Fails Out of the Box #1189

Comments

rgant commented Apr 28, 2018

Version

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?

rgant commented Apr 28, 2018

Akryum commented Apr 28, 2018

rgant commented Apr 28, 2018

Akryum commented Apr 29, 2018 • edited Loading

LinusBorg commented Apr 29, 2018 • edited Loading

yyx990803 commented Apr 29, 2018

rgant commented Apr 29, 2018

rgant commented Apr 29, 2018

wolfeidau commented May 23, 2018

LinusBorg commented May 23, 2018

wolfeidau commented May 23, 2018

webia1 commented Jun 1, 2018

LinusBorg commented Jun 1, 2018 • edited Loading

webia1 commented Jun 1, 2018

yyx990803 commented Jun 1, 2018

chipit24 commented Jun 29, 2018

dph01 commented Sep 28, 2018 • edited Loading

Akryum commented Apr 29, 2018 •

edited

Loading

LinusBorg commented Apr 29, 2018 •

edited

Loading

LinusBorg commented Jun 1, 2018 •

edited

Loading

dph01 commented Sep 28, 2018 •

edited

Loading