out-of-the-box unexpected token with create-react-app #125

afontcu · 2017-07-02T07:43:16Z

Hi there,

Environment

node -v: v6.10.3
npm -v: 4.6.1
npm ls react-scripts (if you haven’t ejected): 1.0.10
Operating system: MacOS

Steps to Reproduce

install create-react-app
install jest extension for Visual Studio Code (the recommended one)
reload it and try to debug

Expected Behavior

Pass the tests (as it does in CLI)

Actual Behavior

 FAIL  src/App.test.js

  ● Test suite failed to run

    .../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 | });
        9 |

Thanks!

The text was updated successfully, but these errors were encountered:

orta · 2017-07-02T11:06:25Z

This is working for me on my default create-react-app example, https://github.com/orta/vscode-jest/tree/master/integrations/create-react-example - which I just updated now to the latest version 52610d0

Any chance you can run the extension in debug mode and have a look at what causing it?

afontcu · 2017-07-03T06:41:27Z

Hi there,

I'm sorry, it worked flawlessly when I tried it in another project. Then I downloaded CRA again and it worked as well, so I'm assuming there was something weird in my previous installation/configuration, because it is still not working there.

Thanks for your time.

Cerberus · 2017-09-16T19:43:31Z

I got the same error. In my case, the cause was after I installed jest, I've updated package.json from
"test": "react-scripts test --env=jsdom",
to this
"test": "jest"
ref: react-scripts v. 1.0.7

seanpoulter · 2017-10-26T22:53:30Z

@orta, can I help get this one fixed? Any tips on what I'm looking for if I get the extension running in debug mode?

It's failing from a clean create-react-app project with [email protected], [email protected], vscode-jest v2.4.2.

orta · 2017-10-27T02:28:36Z

Honestly, I'm not that sure, maybe that the Jest config isn't being respected somehow?

seanpoulter · 2017-10-30T01:57:44Z

You're right @orta. The defaultCreateReactPathWindows isn't valid for the current version of react-scripts. While I get VS Code loading the cloned extension to start debugging:

Did you have a strategy in mind for supporting different versions of react-scripts?
Would you like me to go through the issues to help indicate which ones are trying to get create-react-app working?

orta · 2017-10-30T11:51:08Z

For Jest, the extension aims to support major version - 1- and doesn't strive to break backwards compatibility unless forced to (as we have the jest-extension-support lib _inside jest, so sometimes it does).

I'm happy to have a similar aim with CRA, I think it's probably a bit easier to handle as it could be a matter of checking for the right files in the right places.

I'm happy for you to do that yep - I generally run projects like this so I'll give you access rights to handle issues however you like

djErock · 2018-02-27T16:07:14Z

So what is the fix here?

seanpoulter · 2018-02-27T16:58:51Z

Have you reproduced the issue today @djErock?

seanpoulter · 2018-02-28T02:04:35Z

If you're having problems @djErock could you please create a new issue with lots of detail so we can investigate. I've just confirmed create-react-app has worked OK on OS X, Linux, and Windows systems.

If you're asking to summarize the issue, updating the extension should resolve it. There are a couple fixes at play that improved detection of create-react-app, and spawning the runner in a shell on Windows.

nhooey · 2018-03-14T03:58:32Z

I'm getting the same issue with failing tests after creating a project with create-react-app and running tests with jest:

Environment

node -v: v9.8.0
npm -v: 5.6.0
npm ls react-scripts:

[email protected] /private/tmp/react/react-test
└── [email protected]

Expected Behaviour

Pass the tests

Actual Behaviour

I am currently getting Unexpected token when running npm test after installing jest and replacing the package.json test line with jest.

Steps to Reproduce

Here's what happens when I start from scratch:

Install and set up nodeenv:

$ mkdir /tmp/react
$ cd /tmp/react
$ brew install nodeenv
    (installs nodeenv)
$ nodeenv .venv
 * Install prebuilt node (9.8.0) ..... done.
$ source .venv/bin/activate

Create react app:

(.venv) $ npx create-react-app react-test
npx: installed 67 in 5.669s
[...snipped...]
> [email protected] install /private/tmp/react/react-test/node_modules/fsevents
> node install
[fsevents] Success: "/private/tmp/react/react-test/node_modules/fsevents/lib/binding/Release/node-v59-darwin-x64/fse.node" is installed via remote
> [email protected] postinstall /private/tmp/react/react-test/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js
+ [email protected]
+ [email protected]
+ [email protected]
added 1440 packages in 59.115s
[...snipped...]

Run vanilla react tests:

(.venv) $ cd react-test
(.venv) $ npm test
> [email protected] test /private/tmp/react/react-test
> react-scripts test --env=jsdom
 PASS  src/App.test.js
  ✓ renders without crashing (17ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.925s
Ran all test suites related to changed files.

Install jest:

(.venv) $ npm install --save jest
npm WARN [email protected] requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
+ [email protected]
added 112 packages, removed 1 package, updated 35 packages and moved 9 packages in 18.697s

Run tests after installing jest:

(.venv) $ npm test
 FAIL  src/App.test.js
  ● Test suite failed to run

    TypeError: environment.dispose is not a function

      at Promise.resolve.then (node_modules/react-scripts/node_modules/jest/node_modules/jest-cli/build/runTest.js:102:17)
          at <anonymous>

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.791s, estimated 1s
Ran all test suites related to changed files.

packge.json before updated with jest test directive:

{
  "name": "react-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "jest": "^22.4.2",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Replace test directive with jest:

(.venv) $ sed -i -e 's/"test": .*/"test": "jest",/' package.json
(.venv) $ grep '"test":' package.json
    "test": "jest",

Run npm test with jest:

(.venv) $ npm test

> [email protected] test /private/tmp/react/react-test
> jest

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

    /private/tmp/react/react-test/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:        1.509s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

nhooey · 2018-03-15T17:58:16Z

@orta @seanpoulter: This issue still persists as of today with the latest versions.

orta · 2018-03-15T18:49:50Z

I'm a little confused, I don't think this has anything to do with the vscode-jest extension?

seanpoulter · 2018-03-16T04:14:14Z

This comment says it all: jestjs/jest#5119 (comment)

It is not supported to update Jest manually in a CRA project. If you have both jest and react-scripts in your package.json you should delete anything with jest in package.json and wait until we update react-scripts ourselves 😉

Your error isn't good but it's expected. Installing jest doesn't ensure that the dependencies for react-scripts are also updated. It seems like different versions of jest-environment-node cause this:

$ yarn jest
yarn run v1.5.1
$ /vscode-jest/issues/125/app/node_modules/.bin/jest
 FAIL  src/App.test.js
  ● Test suite failed to run

    TypeError: environment.setup is not a function
      
      at node_modules/jest-runner/build/run_test.js:71:23

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

seanpoulter · 2018-03-16T04:17:55Z

If you continue to experience problems please create a new issue and reference #125. I've locked the conversation for this issue since we've resolved the original and subsequent issues. 🔒

When a project is bootstrapped with create-react-app using the latest versions of node/npm, the react-scripts executable is installed in the top level node_modules/.bin directory. This has been added as the first path to check. This fixes jest-community#161, closes jest-community#39, closes jest-community#113 and resolves facebook/create-react-app#2709, and closes jest-community#125.

seanpoulter self-assigned this Nov 3, 2017

This was referenced Nov 4, 2017

Fix support for create-react-app and react-scripts #161

Closed

Add detection for the react-scripts executable #162

Merged

orta closed this as completed in #162 Nov 4, 2017

justinlevi mentioned this issue Jan 30, 2018

Debug w/ Create React App does not seem to work. #239

Closed

jest-community locked as resolved and limited conversation to collaborators Mar 16, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

out-of-the-box unexpected token with create-react-app #125

out-of-the-box unexpected token with create-react-app #125

afontcu commented Jul 2, 2017

orta commented Jul 2, 2017 •

edited

Loading

afontcu commented Jul 3, 2017

Cerberus commented Sep 16, 2017

seanpoulter commented Oct 26, 2017

orta commented Oct 27, 2017

seanpoulter commented Oct 30, 2017 •

edited

Loading

orta commented Oct 30, 2017

djErock commented Feb 27, 2018

seanpoulter commented Feb 27, 2018 •

edited

Loading

seanpoulter commented Feb 28, 2018

nhooey commented Mar 14, 2018 •

edited

Loading

nhooey commented Mar 15, 2018

orta commented Mar 15, 2018

seanpoulter commented Mar 16, 2018 •

edited

Loading

seanpoulter commented Mar 16, 2018 •

edited

Loading

out-of-the-box unexpected token with create-react-app #125

out-of-the-box unexpected token with create-react-app #125

Comments

afontcu commented Jul 2, 2017

Environment

Steps to Reproduce

Expected Behavior

Actual Behavior

orta commented Jul 2, 2017 • edited Loading

afontcu commented Jul 3, 2017

Cerberus commented Sep 16, 2017

seanpoulter commented Oct 26, 2017

orta commented Oct 27, 2017

seanpoulter commented Oct 30, 2017 • edited Loading

orta commented Oct 30, 2017

djErock commented Feb 27, 2018

seanpoulter commented Feb 27, 2018 • edited Loading

seanpoulter commented Feb 28, 2018

nhooey commented Mar 14, 2018 • edited Loading

Environment

Expected Behaviour

Actual Behaviour

Steps to Reproduce

nhooey commented Mar 15, 2018

orta commented Mar 15, 2018

seanpoulter commented Mar 16, 2018 • edited Loading

seanpoulter commented Mar 16, 2018 • edited Loading

orta commented Jul 2, 2017 •

edited

Loading

seanpoulter commented Oct 30, 2017 •

edited

Loading

seanpoulter commented Feb 27, 2018 •

edited

Loading

nhooey commented Mar 14, 2018 •

edited

Loading

seanpoulter commented Mar 16, 2018 •

edited

Loading

seanpoulter commented Mar 16, 2018 •

edited

Loading