"npm start" app works, "npm test" fails test with syntax error on export

[JoeCodeswell]

Is this a bug report?

yes

Did you try recovering your dependencies?

yes
(Write your answer here.)

Which terms did you search for in User Guide?

(Write your answer here if relevant.)

Environment

PS ../gold-line-sac > npx create-react-app --info

Environment:
OS: Windows 10
Node: 10.9.0
Yarn: 1.9.4
npm: 6.2.0
Watchman: Not Found
Xcode: N/A
Android Studio: Version 3.1.0.0 AI-173.4819257

Packages: (wanted => installed)
react: ^16.4.2 => 16.4.2
react-dom: ^16.4.2 => 16.4.2
react-scripts: 1.1.5 => 1.1.5

PS ../gold-line-sac >
(paste the output of the command here)

Steps to Reproduce

(Write your steps here:)

1. cd to my-app

2. npm start

3. notice app works importing testobj successfully. Browser displays:
   'testob: '+JSON.stringify(testob)
   testob: {"k1":"v1","k2":"v2","k3":"v3"}

4. npm test
   FAIL src\App.test.js
   ● Test suite failed to run

   PATH\gold-line-sac\src\m\gold-line-data.mjs:48
   export const testobj = {"k1":"v1", "k2":"v2", "k3":"v3"};
   ^^^^^^

   SyntaxError: Unexpected token export

   at new Script (vm.js:73:7)
   at Object. (src/App.js:9:194)

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

Expected Behavior

I thought the test would pass

Actual Behavior

the test failed saying it encountered a syntax error:

4. npm test
   FAIL src\App.test.js
   ● Test suite failed to run

   PATH\gold-line-sac\src\m\gold-line-data.mjs:48
   export const testobj = {"k1":"v1", "k2":"v2", "k3":"v3"};
   ^^^^^^

   SyntaxError: Unexpected token export

   at new Script (vm.js:73:7)
   at Object. (src/App.js:9:194)

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

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.)
Here is the Reproducible Demo Link
https://github.com/JoeCodeswell/react-test-prob-demo

Instructions to reproduce:

1. install the demo code
2. run npm start
3. NOTICE app works importing testobj, etc successfully. Browser displays:
   'testob: '+JSON.stringify(testob)
   testob: {"k1":"v1","k2":"v2","k3":"v3"}
4. run npm test
5. NOTICE test FAILS saying "SyntaxError: Unexpected token export.." When this WORKED in the npm start command:

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

    PATH\gold-line-sac\src\m\gold-line-data.mjs:48
    export const testobj =  {"k1":"v1", "k2":"v2", "k3":"v3"};
    ^^^^^^

    SyntaxError: Unexpected token export

      at new Script (vm.js:73:7)
      at Object.<anonymous> (src/App.js:9:194)

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

[rrs94]

Hi! Why are you using ReactDOM to test? Take a look at Shallow Rendering, it's the recommended way to test components in React. I would recommend using Jest together with Enzyme

[JoeCodeswell]

Hi, Ricardo.

I am not "using" ReactDOM . This is the way create-react-app comes out of the box.

I am reporting a create-react-app bug.

I expect, if i do nothing to cause a problem, that running npm test on an almost out of the box create-react-app, will not display a failure message.

I know i have not caused a problem because when i run npm start, the app works. It imports testobj successfully. the browser displays:
'testob: '+JSON.stringify(testob)
testob: {"k1":"v1","k2":"v2","k3":"v3"}

Thanks for your comment, Ricardo.
Love and peace,
Joe

[rrs94]

Hi Joe!

Sorry, I think my comment came out a bit wrong, thanks for taking your time to submit the issue, I've been searching a bit and tested your repo, was able to reproduce the issue. Take a look at this this Jest issue, it seems babel-jest is not correctly transpiling ES6 features inside .mjs files. You can confirm that by changing the extension of your data file from .mjs to .js, and the test will pass. I see some workarounds are discussed in the comments, maybe you can comment there to see if you can something working out, not sure if it's an issue that it's being worked on. Good day Joe!

[negarineh]

Hi,
I'm not quite sure but hopefully, these links will help you.

SyntaxError: Unexpected token import

“Unexpected token export” when running tests that use ES6 modules in node_modules directory #1294

[vinay72]

You can View the Documentation of npm by viewing this link : https://docs.npmjs.com/all

[JoeCodeswell]

Dear Vinay, Nafis and Ricardo,

Thanks to all of you. I have come around to testing again in my dev cycle.
I am hopeful all of your input will help me.
Also I really hope create-react-app will run & pass its example test out of the box.
Thanks again.
Love and peace,
Joe

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.