首页 文章

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

提问于
浏览
5

注意:我通过将 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.

terminal output

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 回答

  • 0

    node_modules/user/LoginContainer.js 中的代码不是 生产环境 版本(babelified版本),因为它仍然具有那些import语句 .

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

    并且由于node_modules中的模块未被识别,因此一旦遇到import语句,jest就会抛出错误 .

    Solution

    1. 您必须拥有正在使用的node_module的构建脚本 . 尝试将模块的 生产环境 版本放在node_modules中 . 这样做可以解决问题,但也会产生更多问题(根据我的经验) .

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

    在这里,您需要关注两个主要配置选项 - transformIgnorePatternstransform .

    简而言之,改变一切,并将所有已经转变的东西都包含在内 .

    有关详细信息,请查看Jest configuration部分 .

相关问题