Vscode-jest: Failing to run Jest tests with Vue CLI 3 project

[RehanSaeed]

Environment

1. node -v: v9.4.0
2. npm -v: 6.3.0
3. npm ls jest or npm ls react-scripts (if you haven’t ejected):

[email protected] C:\Foo\Source
`-- @vue/[email protected]
  `-- [email protected]

1. your vscode-jest settings if customized:

   • jest.pathToJest? N/A
   • jest.pathToConfig? N/A
   • anything else that you think might be relevant? N/A

2. Operating system: Windows 10

Prerequisite

• are you able to run jest test from command line? Yes
• how do yo run your tests from command line? (for example: npm run test or node_modules/.bin/jest)
  vue-cli-service test:unit or npx jest

Steps to Reproduce

The VS Code Output window shows lots of errors that look like this:

FAIL src/framework/Guid.Test.ts

  ? 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://jestjs.io/docs/en/configuration.html

    Details:

    C:\Bitbucket\Bridge.Staffing\Source\Client\src\framework\Guid.Test.ts:3
    import "core-js/modules/es6.regexp.constructor";
    ^^^^^^

    SyntaxError: Unexpected token import

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

As indicated in the comment here, I tried setting jest.pathToJest to:

cross-env BABEL_ENV=test vue-cli-service test:unit

However, this doesn't work, the unexpected token import error continues.

[CatsOnFilm]

This isn't a specific issue to the plugin, it's a vue cli issue. Try running your test in the terminal and see if you get the same error.
vueJS/vue-cli Default unit tests are failing #1879

[RehanSaeed]

Thanks for that link. Adding this code at the top of jest.config.js fixes the problem:

process.env.VUE_CLI_BABEL_TARGET_NODE = true;
process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true;

[sebastianjung]

I had the same problem. Mine was caused by the fact, that i had to delete my jest.config.js in the root folder and copy its contents to the package.json file under the "jest" property.

I don't know why but even though i had ./jest.config.js as the config path in the jest settings of vscode it wouldn't work.

Hope it helps!

[sebastianjung]

Nevermind doesn't work again. Strangely if i have an error in my Code like "imports are wrong" or an expect statement is wrong then the unexpected token found: import error occurs otherwise not...

[JFGHT]

Thanks for that link. Adding this code at the top of jest.config.js fixes the problem:

process.env.VUE_CLI_BABEL_TARGET_NODE = true;
process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true;

This actually works. But why does vscode jest extension need these variables and launching jest by command not?