Vscode-jest: Test suite failed to run in VSCode 1.22.2

[karb0f0s]

Environment

1. node -v: 9.11.1
2. npm -v: 5.6.0
3. npm ls react-scripts (if you haven’t ejected):
   no
4. Operating system:
   Microsoft Windows [Version 10.0.14393]
5. VSCode: version 1.22.2

Steps to Reproduce

I was able to reproduce error with this repo https://github.com/karb0f0s/vscode-jest-test/ on Windows. Although this error doesn't appear on MacOS. I guess it is somehow related to the way VSCode spawns jest process.

package.json

{
  "name": "app",
  "private": true,
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch",
    "build": "webpack",
    "watch": "webpack --watch"
  },
  "devDependencies": {
    "@babel/cli": "^7.0.0-beta.46",
    "@babel/core": "^7.0.0-beta.46",
    "@babel/preset-env": "^7.0.0-beta.46",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^22.4.3",
    "babel-loader": "^8.0.0-beta.2",
    "jest": "^22.4.3",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15"
  },
  "jest": {
    "verbose": true,
    "bail": true,
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(js|ts)$",
    "transform": {
      "^.+\\.js?$": "babel-jest"
    }
  }
}

.babelrc

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions", "ie >= 10"]
      },
      "modules": false,
      "useBuiltIns": "usage",
      "debug": true
    }]
  ],
  "env": {
    "test": {
      "presets": ["@babel/preset-env"]
    }
  }
}

Expected Behavior

npm test works as expected, Debug under the test in source file works as expected, Debug configuration vscode-jest-tests works as expected, with transpilation and all

Actual Behavior

VSCode Jest plugin fails to run. Output contains:

FAIL test\countPrice.test.js

  ● Test suite failed to run

    .\app\test\countPrice.test.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { getBladeCount, calculateCpuPrice, calculateRamPrice } from "../src/countPrice";
                                                                                             ^^^^^^

    SyntaxError: Unexpected token import

      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:        0.23s
Ran all test suites related to changed files.

[karb0f0s]

jest --debug and "jest.pathToJest": "node_modules/.bin/jest --debug" option in VSCode config give almost identical output

[seanpoulter]

Thanks for taking the time to report your issue with the extension @karb0f0s. It looks like you're having a problem with one of your tests that isn't included in your steps to reproduce the problem. I'm happy to help troubleshoot this problem but I'd rather not spend my time filling in the blanks. Can you please share everything I need to do to recreate this problem? An example repo with a minimal amount of code to reproduce the problem will really help.

[stephtr]

With the supplied Git repo (https://github.com/karb0f0s/vscode-jest-test/) I can reproduce that bug. Interestingly directly running npm test or jest and debugging the test using the extension works...

[robowen5mac]

Is there any update on this issue? I am seeing what looks like the same behaviour for VSCode 1.23.1. Essentially, all of my tests fail to run with some variant of the error "Unexpected token ...". As noted above, I can successfully debug the tests and run them via the command line. I have noticed this in multiple project and the problem persists after uninstalling and reinstalling the VSCode extension. Happy to provide more information, but am not sure what is useful.

[eduludi]

I can report the same issues that @robowen5mac mentioned, also in VSCode 1.23.1.

[seanpoulter]

Based on the error, the code isn't being transpiled. Move your Jest configuration from package.json into jest.config.js and see if that works. The format is a bit different than the JSON, so have a look at the Jest configuration docs for the format.

[robowen5mac]

Thanks for the follow up. This is a CRA based application, so there is no specific jest configuration other than what CRA gives you by default. I will look into this, but did something change recently in either VSCode or the the extension as this was working a few days ago (I had not updated VSCode for a bit, so am not sure what version I had updated from). The project itself has not changed.

[kylehalleman]

I am having the same experience as @robowen5mac, using Create React App-based projects and just today or yesterday the plugin started throwing "unexpected token import" errors. Running npm test from command line works fine.

[NathanGloyn]

I'll third what @robowen5mac & @kylehalleman have said, using Create-React-App (not ejected) and updated to latest VSCode today only to find that jest runner now flagging lots of code as a problem and won't run the tests. Tests run if done via the command line

[orta]

Cool, would recommend having a dig around in dev mode and seeing if anything pops up as obvious

[seanpoulter]

Can you three please provide steps to reproduce your issue: @robowen5mac , @kylehalleman , or @NathanGloyn? The example repo from @karb0f0s does not use create-react-app.

[jorgegonzalez]

@seanpoulter to reproduce:

• Create a new app: create-react-app my_app
• Run npm test in a terminal and the tests will pass
• Navigate to the src/App.test.js file and VSCode will show the following error:

 FAIL  src/App.test.js

  ● Test suite failed to run

    /Users/jorge/Code/tester/src/App.test.js: Unexpected token (7:18)
         5 | it('renders without crashing', () => {
         6 |   const div = document.createElement('div');
      >  7 |   ReactDOM.render(<App />, div);
           |                   ^
         8 |   ReactDOM.unmountComponentAtNode(div);
         9 | });
        10 | 


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

[kylehalleman]

👆Yes. I am not on my work computer right now but just tried on my personal computer, updated to VSCode to 1.23.1 and got the latest Jest plugin. With a new CRA-based app with just the single test in App.test.js CRA provides, I ran into this issue.

[seanpoulter]

@karb0f0s, from my Windows box your example repo fails on the command line and generates the SyntaxError you've reported. This is not a problem with the extension. I've tried including reinstalling Babel and Jest based on the Getting Started docs without any luck.

Reducing your .babelrc down to does not work:

{ "presets": ["@babel/preset-env"] }

There are a few issues on Jest that might help like this one: https://github.com/facebook/jest/issues/5525. Can anyone else from our community help @karb0f0s?

[seanpoulter]

Any luck troubleshooting folks?

[robowen5mac]

So far no. I have tried to find a configuration that I can revert to that gets things working again, but downgrading VSCode or the version of CRA doesn't seem to have an effect.

[seanpoulter]

Based on the changes from #324 it looks like you can work around this issue by adding a "jest.pathToJest": "npm test --" setting in .vscode/settings.json. The PR closed a few issues that I haven't had time to digest so I'm not keen to revert the breaking change just yet. If anyone's got the bandwidth, I'd love some help with a fix or help building a list of what requirements were requested in those closed issues to guide some much-needed unit and integration tests.

[robowen5mac]

Thanks...I can confirm that fix works on two different projects including a fresh out of the box CRA app.

[toddmantell]

I can confirm this also fixes the issue for me. Thanks all!

[hotgazpacho]

Add another +1 for "jest.pathToJest": "npm test --" setting in the VSCode configuration

[jeff-kilbride]

In case it isn't obvious, this also works with yarn:

{
  "jest.pathToJest": "yarn test --"
}

🎉

[jeff-kilbride]

I don't know if this is related or deserves a new issue, but I'm getting errors each time I open VS Code on a CRA app, now. The extension works, given the pathToJest workaround above, but this error is displayed:

This extension relies on Jest 20+ features, it will continue to work, but some features may not work correctly.

[sebastianrogers]

I'm also getting:

This extension relies on Jest 20+ features, it will continue to work, but some features may not work correctly.

but this was happening before I used the "jest.pathToJest": "yarn test --" fix

[I-O-O-I]

I had JEST extension installed. After uninstalling problem gone)

[smhmayboudi]

There is another solution which you can add this line to scripts section of package.json

"jest": "test"

[connectdotz]

vscode-jest 2.9.0 has shipped, which should address this issue. Feel free to open a new issue otherwise.

[maciej-gurban]

The same issue persists for me in the latest version. Tried with "jest.pathToJest": "npm test --". Tests run correctly in the terminal though

[lhz516]

@maciej-gurban Same as your situation. The issue still exists.

[connectdotz]

@maciej-gurban @lhz516 please try the self-diagnosis, it might shed some light about what vscode-jest is actually doing... feel free to open a new issue with your explicit scenario if needed.

[MikeSouza]

@maciej-gurban and @lhz516

I was having the same issue with the latest version, and configuring the jest.pathToJest to npm test -- did not resolve the problem for me either. However, I did figure out a solution...

Are you by chance using Babel with a file-relative config (.babelrc) located at the root of your workspace/ project?

I solved the issue by converting my .babelrc (JSON5) to a babel.config.js (JS) project-wide configuration.

NOTE: I am using Babel 7, and when converting to a babel.config.js, I had to turn on caching to get builds and tests working again.

[maciej-gurban]

For me the solution was to (re)install a xcode tools and watchman and to extract my Jest config to a file instead of having it in package.json. Reinstalling might not be necessary but I've done it before trying out Jest in the editor again, so can't say for sure if it helps or does nothng. I've run in terminal (not in VSCode terminal):

xcode-select --install
npm r -g watchman
brew install watchman

Then extracted jest config to ./jest.config.js.

Here's my plugin config:

    "jest.pathToJest": "npm test --",
    "jest.pathToConfig": "./jest.config.js",
    "jest.rootPath": "./src",
    "jestRunner.glob": "**/*.spec.js",
    "jestRunner.enabled": true,
    "jest.autoEnable": true,
    "jest.enableCodeLens": false,
    "jest.runAllTestsFirst": false,

[JoshRosenstein]

@MikeSouza solution (changing babel config) worked for me.
Using babel 7 and babel-jest...

1. added {"jest.pathToJest": "yarn test --"} in .vscode/settings.json

{
  "jest.pathToJest": "yarn test --"
}

1. Converted .babelrc to babel.config.js with api.cache(true)

module.exports = function babelConfig(api){
  api.cache(true)
  return{
    'presets': [
      ['@babel/preset-env', {
        'modules': false
      }],
      '@babel/preset-react'
    ],
    'plugins': [
      '@babel/plugin-proposal-class-properties'
    ],
    'env': {
      'test': {
        'presets': [
          '@babel/preset-env',
          '@babel/preset-react'
        ]
      },

    }
  }}

[gijswijs]

1. Converted .babelrc to babel.config.js with api.cache(true)

This worked for me as well.
I didn't have to add "jest.pathToJest": "yarn test --" to .vscode/settings.json. The conversion was enough to fix the error.

[timcluyts]

@JoshRosenstein This worked for me too! Also, as @gijswijs says, without the settings.json file change. So it is the babel.config.js.

[bruno-vinicius]

Just for curiosity since i doesn't found it, what the double dashes -- stands for in this ("npm test --") case?

[seanpoulter]

From https://docs.npmjs.com/cli/run-script:

As of [email protected], you can use custom arguments when executing scripts. The special option -- is used by getopt to delimit the end of the options. npm will pass all the arguments after the -- directly to your script:

npm run test -- --grep="pattern"

[bruno-vinicius]

Thanks for that. And about the issues, i fixed using the "jest.pathToJest": "npm test --" mentioned above.