注意:我通过将 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 回答
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配置进行配置 .在这里,您需要关注两个主要配置选项 -
transformIgnorePatterns
和transform
.简而言之,改变一切,并将所有已经转变的东西都包含在内 .
有关详细信息,请查看Jest configuration部分 .