创建反应应用程序&开玩笑— SyntaxError:意外的令牌导入

问题描述:

注意:我通过将 src/nod_modules 文件夹中的所有代码直接移到 src 文件夹中并删除 src/node_modules ,来解决此问题>按照此短线程进行操作: https://github.com/facebook/create-react-app/issues/4241

NOTE: I fixed this by moving all of the code inside my src/nod_modules folder into the src folder directly and deleting src/node_modules as per this short thread: https://github.com/facebook/create-react-app/issues/4241

我正在使用create-react-app,无法运行Jest.

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

当我尝试将我的任何React组件中的任何一个导入到我的测试文件中时,当我 yarn test 时,都会出现错误:

When I attempt to import any one of my React components 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)
})

但是,如果我在src文件的根目录下导入我的index.js,则不会引发该错误.此时,该错误将引发到index.js导入的第一个文件中.例如:

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.

终端输出

 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)

在Jest的上下文中,Babel似乎无法正确编译src/node_modules中的文件.我只是不知如何纠正它!任何见解将不胜感激.

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.

仅供参考,Jest应该使用create-react-app开箱即用,而我不想退出.如果不弹出,则无法进行其他地方推荐的某些更改,例如更新package.json中的Jest设置.

FYI, Jest is supposed to work out-of-the-box with create-react-app, and I don't want to eject. Without ejecting, I'm unable to make certain changes I've seen recommended elsewhere, such as updating the Jest settings in my package.json.

通过在我的package.json中添加@Himanshu Singh答案来跟进@Himanshu Singh的答案.

To follow up with @Himanshu Singh answer, by adding this in my package.json helped me resolved this error.

{
  test: react-scripts test --transformIgnorePatterns \"node_modules/(?!ui-core)/\" --env=jsdom
}