Vue-cli: Tests fails immediately after bootstrap

Created on 24 Aug 2018  ยท  9Comments  ยท  Source: vuejs/vue-cli

Version

3.0.1

Reproduction link

https://github.com/pomle/vue-test-fail-bug

Node and OS info

Node 10.2.1, Yarn 1.7.0

Steps to reproduce

  1. Run vue create [app].
  2. Run yarn run test:unit

Full cli output presented below.

โžœ Development vue create amuse-alfre6

Vue CLI v3.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, 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): SCSS/SASS
? Pick a linter / formatter config: TSLint
? Pick additional lint features: 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 package.json
? Save this as a preset for future projects? Yes
? Save preset as: pontus-first-vue-test

Vue CLI v3.0.1
โœจ Creating project in /Users/pom/Development/amuse-alfre6.
๐Ÿ—ƒ Initializing git repository...
โš™ Installing CLI plugins. This might take a while...

yarn install v1.7.0
info No lockfile found.
[1/4] ๐Ÿ” Resolving packages...
โ  (node:78925) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
[2/4] ๐Ÿšš Fetching packages...
[3/4] ๐Ÿ”— Linking dependencies...
[4/4] ๐Ÿ“ƒ Building fresh packages...
success Saved lockfile.
โœจ Done in 164.43s.
๐Ÿš€ Invoking generators...
๐Ÿ“ฆ Installing additional dependencies...

yarn install v1.7.0
[1/4] ๐Ÿ” Resolving packages...
โ  (node:78974) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
[2/4] ๐Ÿšš Fetching packages...
[3/4] ๐Ÿ”— Linking dependencies...
[4/4] ๐Ÿ“ƒ Building fresh packages...
success Saved lockfile.
โœจ Done in 25.88s.
โš“ Running completion hooks...

๐Ÿ“„ Generating README.md...

๐ŸŽ‰ Successfully created project amuse-alfre6.
๐Ÿ‘‰ Get started with the following commands:

$ cd amuse-alfre6
$ yarn serve

โžœ Development cd amuse-alfre6
โžœ amuse-alfre6 git:(master) yarn run test:unit
yarn run v1.7.0
$ vue-cli-service test:unit
FAIL tests/unit/HelloWorld.spec.ts
โ— Test suite failed to run

/Users/pom/Development/amuse-alfre6/tests/unit/HelloWorld.spec.ts:3
import "core-js/modules/es6.array.iterator";
       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

SyntaxError: Unexpected string

  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: 1.4s
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.

What is expected?

Test should succeed.

What is actually happening?

Tests fail.

unit-jest

Most helpful comment

Don't know if it's related but with the new cypress 3.1.0 I get this error 'import' and 'export' may appear only with 'sourceType: module' inside the cypress UI. Works again when I downgrade the resolution to be @3.0.3

All 9 comments

I have a related problem. I tried installing the standard ESLint config along with Cypress. During the installation the ESLinter tried to lint Cypress, causing a failure with exit code 1.

https://pastebin.com/3pK7uNsM

Using the latest Node and NPM version on Windows 10.

I have no problem here, and I chose similar configs to Typescript.
But I chose: Use class-style component syntax? No
After project bootstrap first thing I did was runing unit test and it works.

Don't know if it's related but with the new cypress 3.1.0 I get this error 'import' and 'export' may appear only with 'sourceType: module' inside the cypress UI. Works again when I downgrade the resolution to be @3.0.3

Got the same issue when running Jest on TypeScript tests (importing TypeScripts files).
Running jest with --no-cache seems to works.

Try to clear Jest cache. You can find the cache location by running jest --showConfig. Look for cacheDirectory key. Its value is the name of the folder you'll need to remove.

Deleted everything in my Jest cache folder (/tmp/jest_rs) as @Akryum suggested, it's now working perfectly :+1: (no need to manually pass --no-cache flag).

Maybe the cache was corrupted? :thinking:

I'm using a TypeScript + Babel + Jest Config. Unfortunately clearing the cache did not solve the problem for me:

$ node_modules/.bin/jest --showConfig | jq .configs[0].cacheDirectory                                   
"/var/folders/hw/j2k3lbr954bfvmh7dcngxdqh0000gn/T/jest_dx"
$ rm -r /var/folders/hw/j2k3lbr954bfvmh7dcngxdqh0000gn/T/jest_dx
$ yarn test:unit
 FAIL  tests/unit/HelloWorld.spec.ts
  โ— Test suite failed to run

    /Users/chris.grieger/Projects/unittest/tests/unit/HelloWorld.spec.ts:3
    import "core-js/modules/es6.array.iterator";
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    SyntaxError: Unexpected string

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

I had a similar problem with TypeSript + Jest when spec files were JS or spec files were TS and tested files were JS. Now I use configuration without TS support - as I assume for correctly work I should rewrite all related files to TypeScript.

Interesting fact is that before I updated babel-jest to 23.4.2 I also had similar symptoms with Babel + Jest.

I came across situation with newest Cypress described by @AlexandreBonaventure. Probably it's connected with Babel 7. The problem is when you trying to use import inside spec files:

/home/xxx/projects/yyy/node_modules/@babel/runtime/helpers/builtin/es6/interopRequireDefault.js:1
export default function _interopRequireDefault(obj) {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

As mentioned above, the simplest way to fix that is downgrade Cypress to 3.0.1.

Closing in favor of https://github.com/vuejs/vue-cli/issues/1879

If you are still experiencing this bug, try also to clear node_modules and remove package-lock.json and rerun npm install .

Was this page helpful?
0 / 5 - 0 ratings

Related issues

miyamoto-san picture miyamoto-san  ยท  3Comments

Gonzalo2683 picture Gonzalo2683  ยท  3Comments

JIANGYUJING1995 picture JIANGYUJING1995  ยท  3Comments

jgribonvald picture jgribonvald  ยท  3Comments

Benzenes picture Benzenes  ยท  3Comments