Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jest tests can't process import statement #1584

Open
ijdickinson opened this Issue Jun 15, 2018 · 159 comments

Comments

Projects
None yet
@ijdickinson
Copy link

ijdickinson commented Jun 15, 2018

Version

3.0.0-rc.2

Reproduction link

https://github.com/ijdickinson/vue-cli-jest-problem

Steps to reproduce

This is a similar problem to 1475, but I can't find a way to resolve it. I created a new app with vue-cli, selecting Jest tests. I added a simple POJO (src/models/model.js) and a test for it (tests/model.spec.js).

To repro the problem, just npm run test:unit

What is expected?

Tests to pass, or at least run

What is actually happening?

$ npm run test:unit

> test-application@0.1.0 test:unit /home/ian/workspace/project/test-application
> vue-cli-service test:unit

 FAIL  tests/unit/model.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://facebook.github.io/jest/docs/en/configuration.html

    Details:

    /home/ian/workspace/project/test-application/tests/unit/model.spec.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import "core-js/modules/es6.promise";
                                                                                             ^^^^^^

    SyntaxError: Unexpected token import

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

 PASS  tests/unit/HelloWorld.spec.js

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.427s
Ran all test suites.
 ERROR  jest exited with code 1.
@minorgod

This comment was marked as outdated.

Copy link

minorgod commented Jun 15, 2018

I was able to fix this issue by adding the following to the jest.config.js transform section:

'^.+\\.js$': 'babel-jest',
@ijdickinson

This comment was marked as outdated.

Copy link
Author

ijdickinson commented Jun 16, 2018

@minorgod Thanks, I confirm that this does indeed fix my problem.

So, should it be added to the standard template for jest.config.js? Or is it something that just needs to be mentioned in the docs?

@Akryum

This comment was marked as outdated.

Copy link
Member

Akryum commented Jun 16, 2018

This looks like a bug, since it's done here.

@marlonbarcarol

This comment was marked as outdated.

Copy link

marlonbarcarol commented Jun 19, 2018

Adding '^.+\\.js$': 'babel-jest' does fixes it, I was facing the same problem with vue-cli: 3.0.0-rc.3.
Just a reminder that it should be placed in the end of the transform object, right after '^.+\\.tsx?$': 'ts-jest', otherwise it won't work.

Update: I've started to get the same thing again, so I had to run node node_modules/.bin/jest --clearCache to solve it.

@onigunn

This comment has been minimized.

Copy link

onigunn commented Jun 22, 2018

Adding '^.+\\.js$': 'babel-jest' was not enough for me. Tests run only on empty cache once and started throwing Unexpected token errors on change. As mentioned here I also had to add transformIgnorePatterns ['<rootDir>/node_modules/'] to my jest.config.js

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

For now everything seems to be good.

@tinchox5

This comment was marked as outdated.

Copy link

tinchox5 commented Jun 28, 2018

Same issue. None of the proposed solutions works for me

@hajarrashidi

This comment was marked as off-topic.

Copy link

hajarrashidi commented Jul 2, 2018

+1

@Kirtscheva

This comment was marked as off-topic.

Copy link

Kirtscheva commented Jul 2, 2018

Same issue about my tests.. Again none of the solutions worked for me..

@rahulakurati

This comment was marked as off-topic.

Copy link

rahulakurati commented Jul 3, 2018

+1

@marcusnunes

This comment has been minimized.

Copy link

marcusnunes commented Jul 4, 2018

Is everyone here using windows? I didn't reproduce the error on mac.

@Akryum

This comment has been minimized.

Copy link
Member

Akryum commented Jul 5, 2018

Note: I can't reproduce on the dev environment.

@ijdickinson

This comment has been minimized.

Copy link
Author

ijdickinson commented Jul 5, 2018

Is everyone here using windows?

I'm using Ubuntu 18.04

@joebartels

This comment has been minimized.

Copy link

joebartels commented Jul 5, 2018

Reproduced on mac here.
For me it occurred after manually incremented all the @vue/* packages to rc.3 from one of the betas (beta.16 I think).
I did a rm -rf node_modules && npm cache clean --force && npm install

^ began erroring.

What ended up working for me was globally installing the latest @vue/vue-cli (rc.3) and starting a new project. This also installed all rc.3 @vue/* packages but for some reason it no longer errored.

@zhangfaliang

This comment was marked as off-topic.

Copy link

zhangfaliang commented Jul 6, 2018

npm i -D jest babel-jest babel-preset-es2015 babel-preset-react react-test-renderer

@onekiloparsec

This comment has been minimized.

Copy link

onekiloparsec commented Jul 6, 2018

I did a full clean as proposed by @joebartels above, and I also updated (through the UI) to RC3, but to no avail. Same errors.

It seems to appear only in my tests involving vuex.

@rahulakurati

This comment has been minimized.

Copy link

rahulakurati commented Jul 7, 2018

I’m running on Mac. I configured this for vuejs. And it worked for me.

@Akryum

This comment has been minimized.

Copy link
Member

Akryum commented Jul 8, 2018

I can't reproduce the issue on Windows 10 & Node 10.4.1:

  • with the cloned version
  • after upgrading the dependencies: see ijdickinson/vue-cli-jest-problem#1 (needed to change the jest config for Windows following a fix in the jest generator which will be available in the next release).
@k-funk

This comment was marked as off-topic.

Copy link

k-funk commented Jul 9, 2018

For anyone that this may be able to help, I ran into this issue because my IDE auto-imported a library the wrong way: import { put, ... } from 'redux-saga/es/effects'; vs import { put, ... } from 'redux-saga';

@onekiloparsec

This comment has been minimized.

Copy link

onekiloparsec commented Jul 12, 2018

That's it ? Closed ? Well, I am on a Mac, with RC3, and still have the exact same errors. I tried everything that is suggested in this thread. For the archive, here is my latest 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',
    '^.+\\.js$': 'babel-jest'
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  snapshotSerializers: [
    'jest-serializer-vue'
  ],
  testMatch: [
    '<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))'
  ],
  transformIgnorePatterns: ['<rootDir>/node_modules/']
}
@onekiloparsec

This comment has been minimized.

Copy link

onekiloparsec commented Jul 12, 2018

Since it was failing on my newly created test file, I decided to remove it. But after 2 min, not happy with this situation, I wanted to retry, so I put it back. And all green ! Tested again, all green.

There must be something fishy with a cache somewhere, no?

@joebartels

This comment has been minimized.

Copy link

joebartels commented Jul 12, 2018

@onekiloparsec that loosely resembles what happened to me.
However, instead of removing the file and placing it back, I started a new project with latest vue-cli (@vue/vue-cli (rc.3)) and one-by-one copied files from the "broken" directory into the new one...

@LinusBorg

This comment has been minimized.

Copy link
Member

LinusBorg commented Jan 15, 2019

And yes, sorry, I guess it's css modules, this is what I meant:

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';

Those are not imports for css modules. They are imports for normal css that will usually be extracted into an app.css file during build. And I've done many of those, they work fine everytime so far.

"CSS modules" refers to this: https://cli.vuejs.org/guide/css.html#css-modules

I can certainly create a sample repo if necessary, but with the explanations here, it seems like in my case at least, the issues are not unknown/resolved?

Both (normal imports and CSS module imports) should be covered by the existing rule I referred to in my previous reply, and as I have used them personally, I can say I can't replicate the issue that you seem to experience.

@chriszrc

This comment has been minimized.

Copy link

chriszrc commented Jan 18, 2019

@LinusBorg ok, I created a repo here - https://github.com/chriszrc/vue-cli-jest-test-errors

The commits split out the actions I took, so if you want to see the errors, you can checkout a specific commit if you want. I did the following:

  1. cli create
  2. add bootstrap vue - tests now fail
  3. make jest config modifications, tests now pass

In order to make the tests pass, I had to make the additions seen here:

chriszrc/vue-cli-jest-test-errors@885362d#diff-8cc2c6c811a2cb6959ec026bf6d37f58

@volokolamskspb

This comment has been minimized.

Copy link

volokolamskspb commented Jan 19, 2019

Yeah, you should avoid using Jest in vue cli application. I just replaced vue cli with vue-ssr render and Jest tests work fine now. This issue isn't solved yet...

@LinusBorg

This comment has been minimized.

Copy link
Member

LinusBorg commented Jan 19, 2019

@chriszrc Thanks for the reproduction, I'll try to make time to tomorrow to check it out!

@brihaspati

This comment has been minimized.

Copy link

brihaspati commented Jan 22, 2019

I was facing the same issue with a new vue-cli project and below solution worked for me

I added this to jest.config.js and it worked fine

transformIgnorePatterns: [ "node_modules/(?!(babel-jest|jest-vue-preprocessor)/)" ]

@farcaller

This comment has been minimized.

Copy link

farcaller commented Jan 30, 2019

I came here from the infamous SyntaxError: Unexpected identifier but my issue seem to be somewhat different: I'm importing vuetify/lib which is ES6 and needs to be transpiled.

Here's a sample repo created with:

$ vue create vue-cli-1584

Vue CLI v3.3.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Pick a linter / formatter config: TSLint
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Jest
? Pick a E2E testing solution: Cypress
? 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 add vuetify

? Choose a preset: Default (recommended)

Now, this alone is enough to make the tests break because Vuetify will change the default component to use vuetify, so we need to load it in the test scope too (ignoring the localVue for now): farcaller/vue-cli-1584@035037e

In here I add the @/plugins/vuetify import that loads vuetify/lib under the hood, declare its type so that tsc is happy and add a js preprocessing to jest via babel-jest.

It breaks with:

yarn test:unit
yarn run v1.12.3
$ vue-cli-service test:unit
 FAIL  tests/unit/example.spec.ts
  ● Test suite failed to run

    /Users/farcaller/temp/a/vue-cli-1584/node_modules/vuetify/lib/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Vuetify from './components/Vuetify';
                                                                                                    ^^^^^^^

    SyntaxError: Unexpected identifier

      1 | import Vue from 'vue'
    > 2 | import Vuetify from 'vuetify/lib'
        | ^
      3 | import 'vuetify/src/stylus/app.styl'
      4 |
      5 | Vue.use(Vuetify, {

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at Object.<anonymous> (src/plugins/vuetify.ts:2:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.904s
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.

Which to me looks like jest didn't ask babel to transpile vuetify or babel failed to do it properly.

@LinusBorg

This comment has been minimized.

Copy link
Member

LinusBorg commented Jan 30, 2019

jest doesn't transform anything from /node_modules by default. We had this stuation in quite a lot of the above comments so far (so judgement, no one should be forced to read all that).

You have to add something like this to the jest config:

"transformIgnorePatterns": ["<rootDir>/node_modules/(?!vuetify/lib)"]
@farcaller

This comment has been minimized.

Copy link

farcaller commented Jan 30, 2019

thanks @LinusBorg; I just came to that after reading the jest manual all over again.

That's a really cryptic config option there!

@farcaller

This comment has been minimized.

Copy link

farcaller commented Jan 30, 2019

And to other people following, if you have something else in your transformIgnorePatterns, e.g. the storybook's "/node_modules/(?!(@storybook/.*\\.vue$))" you can't just add another line to the array, you must join them in the same regex.

@farcaller

This comment has been minimized.

Copy link

farcaller commented Jan 30, 2019

And to follow up on why that's happening:

By default jest ignores node_modules and won't transpile anything inside; so any modules that you source untranspiled would break.

When you add them to transformIgnorePatterns it's a common pattern to use the forward lookahead regex 🙄, e.g. 'node_modules/(?!(vuetify)/)' which means "ignore everything that has node_modules/ unless it's followed by vuetify. Having this ignore overrides the default. Now, if you have two or mode modules you need to transpile like this you have to add them to the same first regex because otherwise it will ignore the other modules on the first attempt.

@runarberg

This comment has been minimized.

Copy link

runarberg commented Feb 4, 2019

I can reproduce this on a fresh project if I update babel-jest:

npx @vue/cli create rep-jest-fail
cd rep-jest-fail
npx @vue/cli add @vue/unit-jest
npm run test:unit
# ✓ Passes

# Update babel-jest to `^24.0.0` (is on `23.6.0` by default)
npm install --save-dev babel-jest@latest
npm run test:unit
# ✘ Fails

Output:

    /tmp/jest-fail/tests/unit/example.spec.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { shallowMount } from '@vue/test-utils';
                                                                                                    ^

    SyntaxError: Unexpected token {

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

Note that simply downgrading (npm install --save-dev babel-jest@23) will not fix the problem on its own. I had to remove node_modules and package-lock.json and clear the jest cache, before the tests would run again:

npm install --save-dev babel-jest@23
npx jest --clearCache
rm -fr node_modules package-lock.json
npm install
@candu

This comment has been minimized.

Copy link

candu commented Feb 5, 2019

To workaround this problem in my project, I had to install jest manually instead of depending on @vue/cli-plugin-unit-jest:

  • uninstall @vue/cli-plugin-unit-jest;
  • install latest jest, vue-jest, babel-jest, jest-transform-stub, and jest-serializer-vue (to satisfy dependencies in jest.config.js);
  • install both babel-core@7.0.0-bridge.0 and latest @babel/core;
  • add these lines to the top of vue.config.js:
process.env.VUE_CLI_BABEL_TARGET_NODE = true;
process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true;

Once @vue/cli-plugin-unit-jest and vue-jest update to Babel 7, it should hopefully be possible to drop the dependency on babel-core and just install @vue/cli-plugin-unit-jest instead :)

@lee-chase

This comment has been minimized.

Copy link

lee-chase commented Feb 6, 2019

No joy @candu got this instead

    /Users/lee/Source/carbon/carbon-components-vue/tests/unit/cv-tag.spec.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import "core-js/modules/es6.array.iterator";

However, after installing those directly, and then adding @vue/cli-plugin-unit-jest back I was able to get it to work.

Only downside is my Storybook build fails due to babel-core :-(

So I changed my unit test script to....

"test:unit": "yarn add babel-core@7.0.0-bridge.0; vue-cli-service test:unit; yarn remove babel-core"

Amused me and does not make my tests that much longer.

@lee-chase

This comment has been minimized.

Copy link

lee-chase commented Feb 7, 2019

Also found I could remove the need for babel-core@7.0.0-bridge.0 if I used node v10

@igasparetto

This comment has been minimized.

Copy link

igasparetto commented Feb 12, 2019

Rrrr... I found something else. If the component to be tested is inside the test folder, then I can import it. If it is in the src folder, I can't.

This doesn't work
import MyComponentToTest from '@/components/MyComponentToTest.vue'

I copied the component into the same folder as the .spec.js file and imported it like this and it worked!
import MyComponentToTest from './MyComponentToTest.vue'

Why?

My config:

  "babel": {
    "plugins": [
      "@babel/plugin-syntax-jsx",
      "@babel/plugin-syntax-dynamic-import",
      "@babel/plugin-transform-spread",
      "@babel/plugin-proposal-object-rest-spread"
    ],
    "env": {
      "test": {
        "plugins": [
          "transform-es2015-modules-commonjs"
        ],
        "presets": [
          [
            "@babel/preset-env",
            {
              "modules": false
            }
          ]
        ]
      }
    }
  },
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "snapshotSerializers": [
      "jest-serializer-vue"
    ],
    "transform": {
      "^.+\\.js$": "babel-jest",
      ".*\\.(vue)$": "vue-jest"
    }
  }

@igasparetto

This comment has been minimized.

Copy link

igasparetto commented Feb 12, 2019

Answering my own question: the test folder needs to be inside the src folder.

@jonaskuske

This comment has been minimized.

Copy link
Contributor

jonaskuske commented Feb 12, 2019

@igasparetto Your jest configuration is missing the module name mapper:

  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  }

This tells jest what URLs starting with "@" (i.e. '@/components/MyCompoentToTest.vue') are supposed to mean. During normal builds this is mapped using resolve.alias in the webpack configuration, but this config is not shared with jest, so it has to be explicitly declared in moduleNameMapper as shown above. :)

@igasparetto

This comment has been minimized.

Copy link

igasparetto commented Feb 12, 2019

@jonaskuske, indeed.
I have made so many changes trying to get this to a working stage that that was deleted.
Thanks

@daviesdoclc

This comment has been minimized.

Copy link

daviesdoclc commented Feb 23, 2019

I just ran across this today. My test were previous working with the first set of dependencies. Yesterday I bumped all my dependency versions to the latest (2nd set) and noticed my test would no longer run because of the import issue discussed. I've tried all the above suggestions to no avail.

    "@vue/cli-plugin-babel": "^3.1.1",
    "@vue/cli-plugin-eslint": "^3.1.5",
    "@vue/cli-plugin-unit-jest": "^3.1.1",
    "@vue/cli-service": "^3.1.4",
    "@vue/test-utils": "^1.0.0-beta.20",
    "babel-jest": "^23.6.0",
    "eslint-plugin-vue": "^5.0.0-0",
    "node-sass": "^4.9.0",
    "replace": "0.3.0",
    "sass-loader": "^7.0.1",
    "vue-template-compiler": "^2.5.17"


    "@vue/cli-plugin-babel": "^3.4.0",
    "@vue/cli-plugin-eslint": "^3.4.0",
    "@vue/cli-plugin-unit-jest": "^3.4.0",
    "@vue/cli-service": "^3.4.0",
    "@vue/test-utils": "^1.0.0-beta.29",
    "babel-jest": "^24.1.0",
    "eslint-plugin-vue": "^5.2.2",
    "node-sass": "^4.11.0",
    "replace": "^1.0.1",
    "sass-loader": "^7.1.0",
    "vue-template-compiler": "^2.6.6"
@daviesdoclc

This comment has been minimized.

Copy link

daviesdoclc commented Feb 24, 2019

I narrowed it down to the upgrade from babel-jest 23.6.0 to 24.1.0. There is a similar error report here facebook/jest#7957 and here facebook/jest#7271. @runarberg suggested this same resolution above.

@lee-chase

This comment has been minimized.

Copy link

lee-chase commented Feb 26, 2019

Current state for me.
If I add a .babelrc file containing

{
  "presets": ["env"]
}

to my test/unit folder I get past the import issue instead getting

$ yarn test:unit
yarn run v1.13.0
$ vue-cli-service test:unit
 FAIL  tests/unit/cv-tag.spec.js
  ● Test suite failed to run

    Plugin 1 specified in "/Users/lee/Source/carbon/test/carbon-components-vue/node_modules/@vue/babel-preset-app/index.js" provided an invalid property of "default" (While processing preset: "/Users/lee/Source/carbon/test/carbon-components-vue/node_modules/@vue/babel-preset-app/index.js")

      at Plugin.init (node_modules/babel-core/lib/transformation/plugin.js:131:13)
      at Function.normalisePlugin (node_modules/babel-core/lib/transformation/file/options/option-manager.js:152:12)
      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:184:30
          at Array.map (<anonymous>)
      at Function.normalisePlugins (node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
      at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14
      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:323:22
          at Array.map (<anonymous>)
      at OptionManager.resolvePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
      at OptionManager.mergePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
      at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
      at OptionManager.init (node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
      at File.initOptions (node_modules/babel-core/lib/transformation/file/index.js:212:65)
      at new File (node_modules/babel-core/lib/transformation/file/index.js:135:24)
      at Pipeline.transform (node_modules/babel-core/lib/transformation/pipeline.js:46:16)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.738s
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.

If I then install babel-core@7.0.0-bridge.0 my tests run successfully. Package.json dependencies as below

  "dependencies": {
    "carbon-components": "^9.48.1",
    "d3": "^5.7.0",
    "flatpickr": "4.5.1",
    "vue": "^2.5.21"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@commitlint/cli": "^7.2.1",
    "@commitlint/config-conventional": "^7.1.2",
    "@storybook/addon-actions": "^4.1.11",
    "@storybook/addon-knobs": "^4.1.11",
    "@storybook/addon-notes": "^4.1.11",
    "@storybook/addon-options": "^4.1.11",
    "@storybook/addon-storysource": "^4.1.11",
    "@storybook/vue": "^4.1.11",
    "@vue/cli-plugin-babel": "^3.4.0",
    "@vue/cli-plugin-eslint": "^3.4.0",
    "@vue/cli-plugin-unit-jest": "^3.4.0",
    "@vue/cli-service": "^3.4.0",
    "@vue/eslint-config-prettier": "^4.0.1",
    "@vue/test-utils": "^1.0.0-beta.20",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.1.0",
    "babel-loader": "^7.0.0",
    "babel-plugin-transform-object-rest-spread": "7.0.0-beta.3",
    "babel-preset-env": "^1.7.0",
    "babel-preset-vue": "^2.0.2",
    "eslint": "^5.10.0",
    "eslint-plugin-vue": "^5.0.0-0",
    "husky": "^1.3.0",
    "jest": "^24.1.0",
    "jest-config": "^24.1.0",
    "jest-runtime": "^24.1.0",
    "jest-serializer-vue": "^2.0.2",
    "jest-transform-stub": "^2.0.0",
    "lint-staged": "^8.1.0",
    "node-sass": "^4.11.0",
    "prettier": "^1.15.3",
    "sass-loader": "^7.1.0",
    "stylelint": "^9.9.0",
    "stylelint-config-property-sort-order-smacss": "^4.0.1",
    "stylelint-config-sass-guidelines": "^5.3.0",
    "vue-highlightjs": "^1.3.3",
    "vue-jest": "^3.0.2",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "^2.5.21"
  },

Unfortunately this kills my build so I have to uninstall between tests.

NOTE: After uninstalling babel-core the tests still run! This is because babel-jest has cached the file transformations. Clearing jest cache or editing a component will cause it to fail again.

@mvolkmann

This comment has been minimized.

Copy link

mvolkmann commented Feb 27, 2019

This seems to be the main culprit: "babel-jest": "^24.1.0",

@mvolkmann

This comment has been minimized.

Copy link

mvolkmann commented Mar 4, 2019

If you use Vue CLI to create a new project and run “npm run test:unit” without changing anything, the tests will work. I believe the issue is that you project has newer versions of some dependencies because they have ~ or ^ in front of their versions which allow newer versions to be installed. If you pin to the same versions used in the new, working project then it should work. In particular, upgrading babel-jest to 24.1.0 will break the ability to run the unit tests.

@hellboy81

This comment has been minimized.

Copy link

hellboy81 commented Mar 4, 2019

which library versions (babel-jest etc..) and babelrc settings should I use to make it run?

@LinusBorg

This comment has been minimized.

Copy link
Member

LinusBorg commented Mar 4, 2019

I believe the issue is that you project has newer versions of some dependencies because they have ~ or ^ in front of their versions which allow newer versions to be installed.

You can't "accidentally" upgrae to a new major version for babel-jest, the version range we set when creating a project is "^23.*".

Installing a new major release of any dependency might break a project as by definition, major releases (can) contain breaking changes.

which library versions (babel-jest etc..) and babelrc settings should I use to make it run?

@vue/cli-unit-jest currently relies on jest and babel-jest 23.*

@hellboy81

This comment has been minimized.

Copy link

hellboy81 commented Mar 4, 2019

@vue/cli-unit-jest

npm ERR! code E404
npm ERR! 404 Not Found: @vue/cli-unit-jest@latest

Problem solved as follows:

jest test support to existing files should be always added using vue-cli

@mvolkmann

This comment has been minimized.

Copy link

mvolkmann commented Mar 4, 2019

@LinusBorg

This comment has been minimized.

Copy link
Member

LinusBorg commented Mar 4, 2019

No, you can't accidentally update to a new major version 24 when package.json has it defined as ^23.*. The ^ tells npm to only keep it inside of the 23.* version range.

That's what semver is for.

@mvolkmann

This comment has been minimized.

Copy link

mvolkmann commented Mar 4, 2019

@Akryum

This comment has been minimized.

Copy link
Member

Akryum commented Mar 4, 2019

Semantic versioning has a purpose 😸

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.