Jest SyntaxError: Unexpected token <

Posted

技术标签:

【中文标题】Jest SyntaxError: Unexpected token <【英文标题】: 【发布时间】:2019-11-10 08:53:12 【问题描述】:

我想使用带有打字稿的 jest 酶来测试反应应用程序中的一个组件,我按照jest 中的说明进行操作,但由于某种原因我得到:SyntaxError: Unexpected token &lt;

我可以测试测试一些功能没有问题,但是当我使用组件时出现错误,

这是package.json中的笑话配置

"jest": 
    "transform": 
      "^.+\\.tsx?$": "ts-jest"
    ,
    "testMatch": ["**/__tests__/*.(ts|tsx)"],
    "snapshotSerializers": ["enzyme-to-json/serializer"],
    "setupFilesAfterEnv": ["<rootDir>/src/setupEnzyme.ts"],
    "unmockedModulePathPatterns": ["node_modules/react/", "node_modules/enzyme/"]
  

酶配置

import  configure  from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure( adapter: new Adapter() );
export default class TesComponent extends Component  
    render()
        return (
            <div>test</div>
        )
    

import  shallow  from 'enzyme'
import TestCompoenent from '../TestComponent'

test('component testing', () => 
    const component = shallow(<TestCompoenent />)
    expect(component.contains(<div>test</div>)).toBeTruthy()
)

这是错误

Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain javascript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /home/user/Documents/local-platform/frontend/src/pages/__tests__/settigs.test.tsx:9
        var component = enzyme_1.shallow(<TestComponent_1.default />);
                                         ^

    SyntaxError: Unexpected token <

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)

我希望测试通过,因为测试组件确实包含 &lt;div&gt;test&lt;/div&gt;

【问题讨论】:

也发布您的TestCompoenent 我已经编辑过帖子 试试jest --clearCache 得到同样的错误:( NextJs 有什么解决方案吗? 【参考方案1】:

尝试更改tsconfig.json

"jsx": "preserve"-&gt;"jsx": "react"

【讨论】:

此选项指定应如何生成输出(即 JSX 语法转换为,类型检查)。详情typescriptlang.org/docs/handbook/jsx.html#basic-usage 终于!!以防万一,将其更改为“反应”解决了我的主要问题。但是,它会引发其他一些错误。正如 Dan Barclay (***.com/a/65539274/1883199) 所提到的,将其替换为 react-jsx 即可解决【参考方案2】:

您的配置似乎没有正确处理 TSX。 这是我的工作配置的一部分

"jest": 
    "transform": 
       "^.+\\.tsx?$": "ts-jest",
    ,
    "moduleFileExtensions": [
       "ts",
       "tsx",
       "js",
       "json"
    ],
    "setupTestFrameworkScriptFile": "<rootDir>/src/setupSpecs.ts"

我使用了setupTestFrameworkScriptFile 而不是setupFilesAfterEnv

【讨论】:

我收到消息说Option "setupTestFrameworkScriptFile" was replaced by configuration "setupFilesAfterEnv", which supports multiple paths,当我按回车键继续时,我收到同样的错误 添加“moduleFileExtension”怎么样? 请提供test repo,带有miniam l package json,jest config,以及这2个简单的tsx文件 请看我的回答。 ***.com/a/70270290/7387345

以上是关于Jest SyntaxError: Unexpected token <的主要内容,如果未能解决你的问题,请参考以下文章

Jest 给出错误:“SyntaxError: Unexpected token export”

Jest SyntaxError: Unexpected token <

Jest + Vue - SyntaxError: Unexpected token <

Vue Jest 测试套件无法运行:SyntaxError: Unexpected identifier

SyntaxError:无法在模块外使用 import 语句:运行 Jest-expo 测试时

使用 jest 和 vue 抛出 SyntaxError: Unexpected identifier error for import