Create-react-app: `SyntaxError: Unexpected token import` when running Jest and importing a React component from nested directory

[hjmccain]

I am using create-react-app and having trouble running Jest.

When I attempt to import a React component into my test file, I get an error when I yarn test:

Test suite failed to run

.../src/node_modules/common/ErrorMessage.js:1
({"Object.<anonymous>":function(
module,exports,require,__dirname,__filename,global,jest)
{import React from 'react'
^^^^^^

SyntaxError: Unexpected token import

This is what my test file looks like:

// test.test.js

// attempting to import
import ErrorMessage from '../node_modules/common/ErrorMessage.js'

// dummy test
test('adds 1 + 2 to equal 3', () => {
     expect(1 + 2).toBe(3)
})

However, the error does _not_ get thrown if I'm at the root of the src file, importing my index.js. At that point, the error gets thrown in the first file that index.js imports. For example:

test.test.js

import index from './index'

index.js

import React from 'react'
import { render } from 'react-dom'
import './style/index.css'
import LoginContainer from './node_modules/user/LoginContainer'
import NewUser from './node_modules/user/NewUser'
// etc.

terminal output

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

    /Users/hannahmccain/Desktop/DEV/expense-report/fullstack-expense-report/client/src/node_modules/user/LoginContainer.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React, { Component } from 'react'
                                                                                             ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
      at Object.<anonymous> (src/index.js:11:164)
      at Object.<anonymous> (src/test.test.js:3:14)

It seems like, in the context of Jest, Babel isn't able to compile the files in src/node_modules properly. I'm just at a loss as to how to correct that! Any insights would be appreciated.

Please let me know if you need more code, context, or info! I'm new at this :)

[gaearon]

I don't think using src/node_modules for source code is currently supported. In 2.x alpha releases we support using Lerna or Yarn Workspaces for monorepos so maybe that would help you?

[hjmccain]

Great — that was the issue. Removed src/node_modules and moved the contents directly into src and the tests ran perfectly. And I will look into using Lerna or Yarn Workspaces. Thanks for your help!

[Noitidart]

I created a brand new create-react-app. I didn't change anything. I open terminal and run jest and get error "SyntaxError: Unexpected token import" - nay ideas?

[Noitidart]

So I cd'ed into src dir then ran jest again and now its giving a problem with JSX:

[JulianeAlbuquerque]

I'm having de same problem

[bugzpodder]

@Noitidart @JulianeAlbuquerque
Please run yarn test or npm run test instead of jest

[Noitidart]

Oh wow thank you so much @bugzpodder!! It works!!

[Noitidart]

@bugzpodder Im getting another error after installing some packages. It seems its running tests in the 3rd party libs. Shouldnt node_modules be ignored? Am I doing something wrong?

I intsalled redux-persist.

Writing objects: 100% (7/7), 638 bytes | 0 byt FAIL  src\App\index.test.js
  ● Test suite failed to run
    C:\Users\Mercurius\Documents\GitHub\boiler\node_modules\redux-persist\es\storage\index.js:1    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import createWebStorage from './createWebStorage';                                                                                             ^^^^^^
    SyntaxError: Unexpected token import
      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)      at Object.<anonymous> (src/App/store/index.js:5:16)      at Object.<anonymous> (src/App/index.js:9:14)

Test Suites: 1 failed, 1 total
Tests:       0 total

[bugzpodder]

Hi @Noitidart please file a new issue with appropriate repo steps.
If you do yarn test or npm run test it should just work. If not then there must be something that doesn't work and I would have no idea without seeing more information.

[Noitidart]

Thanks @bugzpodder I'll definitely do that and share link. Really appreicate your attention!

[brunomacedo]

Hey guys...
Are there another issue for that? What am I doing wrong?
It was working well yesterday, but I tried it again now and I got this >>

FAIL specs/Login.spec.js
● Test suite failed to run

C:\App\projects\contabilidade\fe-contabilidade-client\specs\jest.setup.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';

             ^^^^^

SyntaxError: Unexpected identifier

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

[zxydaisy]

i don't know what is the meaning of this problem

 FAIL  xxx/__tests__/list.spec.js
  ● Test suite failed to run

    /xxxx/__tests__/list.spec.js:2
    import * as React from "react";
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
      at handle (node_modules/worker-farm/lib/child/index.js:44:8)
      at process.<anonymous> (node_modules/worker-farm/lib/child/index.js:51:3)
      at emitTwo (events.js:126:13)