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

Question

注意：我通过将我的 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 设置。

Answer 1

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

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

Answer 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 部分了解更多详情。