create-react-app & jest — SyntaxError: Unexpected token import

Posted 2023-03-13

【中文标题】create-react-app & jest — SyntaxError: Unexpected token import

【英文标题】：

【发布时间】：2018-09-11 23:03:43

【问题描述】：

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

---

我正在使用 create-react-app 并且在运行 Jest 时遇到问题。

当我尝试将我的任何一个 React 组件导入我的测试文件时，当我 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

这是我的测试文件的样子：

// 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 导入的第一个文件中引发。例如：

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 中的文件。我只是不知道如何纠正它！任何见解将不胜感激。

仅供参考，Jest 应该与 create-react-app 一起开箱即用，我不想弹出。如果不弹出，我将无法进行在其他地方推荐的某些更改，例如更新我的 package.json 中的 Jest 设置。

【参考方案1】：

为了跟进@Himanshu Singh 的回答，通过在我的 package.json 中添加这个帮助我解决了这个错误。

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

【讨论】：

谢谢！这让我免于深入弹出和进行自定义配置，就像一个魅力

【参考方案2】：

node_modules/user/LoginContainer.js 中的代码不是生产版本（babelified 版本），因为它仍然具有那些 import 语句。

预配置了 create-react-app 的 Jest，在运行测试之前从 babel-transformation 中排除 node_modules 中的所有内容，假设 node_modules 中的代码将被预先 babel 化。

而且由于你在 node_modules 中的模块没有被 babelified，jest 一遇到 import 语句就会抛出错误。

解决方案

1. 您必须为您的 node_module 使用构建脚本。尝试将模块的生产版本放在 node_modules 中。这样可以解决问题，但也会产生更多问题（根据我的经验）。

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

这里你需要关注两个主要的配置选项 - transformIgnorePatterns 和 transform。

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

查看 Jest configuration 部分了解更多详情。

【讨论】：

感谢您的回复！我最终只是删除了src/node_modules 文件夹，因为这是导致问题的原因，所以我无法测试您的解决方案。如果它最终为其他人工作，我会将其标记为已接受的答案！

我不确定你的步骤是否不会让你在不久的将来陷入困境。您针对不同组件的测试用例要求这些组件存在于 node_modules 中。您能否发布一个指向您的存储库的链接，以便我查看并向您提出确切的配置？