Vscode-jest: create-react-app: Unexpected token in App.test.js

[AaronLlanos]

Environment

1. node -v: v8.11.1
2. npm -v: 5.6.0

3. npm ls react-scripts (if you haven’t ejected): [email protected]

4. Operating system: [MacOS 10.13.5]

Steps to Reproduce

$ create-react-app test

open up workspace with extension installed
In the output for the test (next to terminal/debug console/problems) see output:

 FAIL  src/App/App.test.js
  ● Test suite failed to run

    /path/to/project/App/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.157s
Ran all test suites related to changed files.

Expected Behavior

Jest test passes when run by extension

Actual Behavior

Jest tests fail when run by extension

[MFry]

Same issue on windows 7.
Issue behaves similarly with enzyme.

[naholyr]

Same issue on Ubuntu 18.04 with a freshly created React app. No specific configuration.

I found various old issues about the same issues, all concluding by an optimistic "it's fixed now" ;) so I tried the various fixes which was advised at those times:

• setting "jest.pathToJest": "npm test --" fixes the syntax error but now everything else is broken :(
  
  
  
  • warning appears saying "This extension relies on Jest 20+ features, it will continue to work, but some features may not work correctly" (should be related to #121 #132 #211)
  
  
  • tests are not run anymore, console showing errors "Exception raised: Process failed: spawn npm ENOENT" (should be related to #113 however using "npm.cmd" is obviously not the fix for Linux)
  
  
  • fun fact (related, I guess), if I set "jest.pathToJest": "whatever" it still stops with "Process failed: spawn npm ENOENT", but why the hell does it still want to run npm when I say him to run "whatever"??
  
  

I'm out of ideas now, and I just disabled the extension.

Note: it's working if you eject and set package.json's jest.testEnvironment = "jsdom", but that's not a valid fix obviously.

[naholyr]

I think I found a temporary workaround:

• copy relevant configuration from ejected package.json (keys "jest" and "babel")
• edit paths by replacing "/config" to "/node_modules/react-scripts/config"
• edit "testEnvironment" to "jsdom" to fix undefined documents

Now it's running properly for me. Here is what I finally added to my package.json:

{
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,mjs}"
    ],
    "setupFiles": [
      "<rootDir>/node_modules/react-scripts/config/polyfills.js"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
    ],
    "testEnvironment": "jsdom",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/node_modules/react-scripts/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/node_modules/react-scripts/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "json",
      "web.jsx",
      "jsx",
      "node",
      "mjs"
    ]
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  }
}

I'm not sure everything is required, but it's juste copy-pasta from ejected project, I didn't want to bother fine-tuning.

[connectdotz]

vscode-jest 2.9.0 has shipped, which should address this issue. Please give it a try and let us know if it works for you.

[AaronLlanos]

Confirmed, this is fixed. Thank you @connectdotz

[connectdotz]

great, thx for confirming.

[garyking]

Still broken for me, unfortunately. Using latest VSC and Jest ext, when tested on a new CRA project. Should I open a new ticket?

[connectdotz]

@garyking if after following the self diagnosis you still can't figure out, then yes you are better off to file a new ticket for your specific use case.

[PhyllisWong]

This is still an issue, but @naholyr's work around fixed it.

[Ziv-Barber]

It's still broken.
Right now the only way to use CRA and jest is outside of vs code.

Just add to the .vscode/settings.json file:

"jest.runAllTestsFirst": false,
"jest.autoEnable": false,
"jest.showCoverageOnLoad": false

And then open a terminal and type:

yarn test

A solution will be to patch the vscode.jest plugin to detect using of react-scripts or resecripts and then to patch the react-scripts side to support vscode.jest extra flags.

Another solution: to use yarn test + the extra flags instead of trying to run jest directly.

[connectdotz]

it should work, please open a new issue with more detail and sample repo so we can help you better...

[Ziv-Barber]

1. create-react-app testProject
2. open in vscode
3. you'll see the error above

And BTW, setting "jest.pathToJest": "yarn test" gave me the same error.

[Royal-Crown-Cola]

This issue still exists as of 9/21/19

[palcisto]

Yes as stated by a few other folks this year, this issue still works even with a newly initialized app using the 'current' (at the time of posting this) versions of create-react-app, vscode-jest, and VS Code itself.

I'll open a new issue.