create-react-app&jest - SyntaxError:意外的令牌导入

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版本），因为它仍然有那些导入语句。

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

由于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配置部分了解更多详细信息。