kentcdodds / testing-workshop

A workshop for learning how to test JavaScript applications
http://git.io/testing-workshop
1.36k stars 710 forks source link

SyntaxError: Unexpected token import #80

Closed nathanBrenner closed 6 years ago

nathanBrenner commented 6 years ago

Environment info:

Problem description:

Unable to write any unit tests because: npm run setup --silent npm run test:react In other/simple-react/__tests__/item-list.todo.js, I added import React from 'react' output from jest:

/testing-workshop/other/simple-react/__tests__/item-list.todo.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';

SyntaxError: Unexpected token import

This error is also thrown during npm run setup --silent along with

/testing-workshop/client/test/setup-test-framework.js: Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` environment variables. Valid values are "development", "test", and "production". Instead, received: "staging". (While processing: "/testing-workshop/client/node_modules/babel-preset-react-app/index.js")

I tried running NODE_ENV=development and NODE_ENV=production. Output from those commands were differnent, butnpm run test:react` fails with the same error.

Suggested solution:

nathanBrenner commented 6 years ago

I also ran through each of the of the steps that make up npm run setup and npm run test:coverage fails because it's not defined in package.json

nathanBrenner commented 6 years ago

npm run validate fails

kentcdodds commented 6 years ago

Hmmm... I'm not sure what's up there. It doesn't seem to have the same issue for me.

I did notice something broke the validate script and I fixed that, but everything's working on a clean clone for me :-/

nathanBrenner commented 6 years ago

Another dev I work with confirmed that it works as expected, so it must be something on my computer, maybe a global npm package. I removed webpack and babel-cli from global installed, and made a new clone but the bug persisted. Not sure what's happening, but it seems to be with babel.

Jongerr commented 6 years ago

git version: 2.15.0 node version: 8.11.3 npm version: 5.6.0 OSX version: 10.13.5

I'm getting the same error when I try to run any of the tests. Running npm run validate also gives me this error for every client test file:

[test:run]   ● Test suite failed to run
[test:run] 
    Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` environment variables. Valid values are "development", "test", and "production". Instead, received: "". (While processing preset: "/Users/travis/Documents/Code/testing-workshop/client/node_modules/babel-preset-react-app/index.js")

      at create (node_modules/babel-preset-react-app/create.js:11:11)
      at Object.<anonymous> (node_modules/babel-preset-react-app/index.js:19:18)
      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:296:17

So it may be a problem with create-react-app. Looking at this create-react-app issue, this problem should be fixed for react-scripts versions 1.0.7 and greater. The client/package.json file shows react-scripts version 1.1.4, so I'm not sure why it's not working.

kevinegstorf commented 6 years ago

@Jongerr

I had the same problem. I added

# Node babel exports
export NODE_ENV=development
export BABEL_ENV=$NODE_ENV

to my .zshrc and it went away

kevinegstorf commented 6 years ago

i do have the same import issue though. i removed the same global installs as @nathanBrenner did. but no luck there. i also added nvm to specify a different version of node because i am running version 10 by default. also didn't solve it. i did noticed that the .babelrc in the simpel-react folder is set as a string like so.

{
  "presets": "../configuration/calculator.solution/.babelrc.js"
}

which should be an array but when i change it to an array it doenst work.

kevinegstorf commented 6 years ago

i managed to go around it by adding my own babelrc file in the client folder and updating the babelrc in the simpel react folder