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

注意：我通过将

src/nod_模块

文件夹中的所有代码直接移动到

src

文件夹中，并根据以下短线程删除

src/node_模块

来修复此问题：

---

我正在使用CreateReact应用程序，运行Jest时遇到问题

当我尝试将任何一个React组件导入到测试文件时，当我

纱线测试
时出现错误：

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

但是，如果我在src文件的根目录下导入index.js，则不会抛出错误。此时，index.js导入的第一个文件中会抛出错误。例如：

test.test.js

import index from './index'

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.

index.js

import index from './index'

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)

失败src/test.test.js
● 测试套件无法运行
/Users/hannahmccain/Desktop/DEV/expense report/fullstack expense report/client/src/node_modules/user/LoginContainer.js:1
（{“Object.”：函数（模块，导出，require，uu dirname，uu filename，global，jest）{import React，{Component}来自'React'
^^^^^^
SyntaxError:意外的令牌导入
在ScriptTransformer.\u transformAndBuildScript（节点\u模块/jest运行时/build/ScriptTransformer.js:289:17）
at对象。（src/index.js:11:164）
at对象。（src/test.test.js:3:14）

在Jest的上下文中，Babel似乎无法正确编译src/node_模块中的文件。我只是不知道如何纠正这一点！任何见解都将不胜感激

仅供参考，Jest应该在create react app中开箱即用，我不想弹出。如果不弹出，我无法进行其他地方推荐的某些更改，例如更新我的package.json中的Jest设置。
节点模块/user/LoginContainer.js中的代码不是生产版本（babelified版本）因为它仍然有那些导入语句

使用create react app预配置的Jest，在运行测试之前，将
节点模块
内的所有内容从巴贝尔转换中排除，假设
节点模块
内的代码将预巴贝尔化

而且，由于节点_模块中的模块没有被babelified，jest在遇到import语句时会抛出错误

解决方案

1。您必须为正在使用的node\u模块准备一个构建脚本。请尝试将模块的生产版本放在node\u模块中。这会起到作用，但也会产生进一步的问题（根据我的经验）

2.开始显式配置jest及其依赖项而不弹出。基本上是通过将测试脚本更改为
jest--env=jsdom
。您需要显式安装jest、react dom、babel transforms-*然后在package.json内使用jest配置进行配置

在这里，您需要关注两个主要的配置选项—
transformIgnorePatterns
和
transform

简言之，改变一切，忽略已经改变的一切

查看Jest部分以了解更多详细信息。
要继续使用@Himanshu Singh answer，请将其添加到我的包中。json帮助我解决了此错误

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

感谢您的回复！我只是简单地删除了
src/node_modules
文件夹，因为这是问题的根源，所以我无法测试您的解决方案。如果它最终对其他人有效，我会将其标记为可接受的答案！我不确定您的步骤是否会在不久的将来让您陷入困境。您的不同com的测试案例组件要求这些组件出现在node_模块中。您可以发布一个到您的存储库的链接，让我查看并向您建议确切的配置吗？谢谢！这使我避免了深入弹出和进行自定义配置，工作起来很有魅力