Jest Enzyme 测试抛出意外的令牌错误

Posted 2023-02-22

【中文标题】Jest Enzyme 测试抛出意外的令牌错误

【英文标题】：Jest Enzyme test throws unexpected token error

【发布时间】：2019-09-26 11:28:19

【问题描述】：

当我运行测试时，它会在代码中出现“意外的令牌错误：

const wrapper = shallow(<WelcomeMessage/>");

错误在“（

我写过笑话测试。这是我第一次使用酶和反应编写测试用例。所以我对设置不熟悉。我已经安装了：babel jest、react-dom、babel-plugin-transform-export-extensions、enzyme-adapter-react-16、react-test-renderer、@babel/preset-env 和 @babel/core

package.json:

  "private": true,
  "version": "0.0.0",
  "name": "example-jquery",
  "devDependencies": 
    "@babel/core": "*",
    "@babel/preset-env": "^7.4.4",
    "babel-jest": "^24.8.0",
    "babel-plugin-transform-export-extensions": "^6.22.0",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.12.1",
    "jest": "^24.8.0",
    "jest-dom": "^3.1.4",
    "jest-useragent-mock": "0.0.3"
  ,
  "dependencies": 
    "jest-puppeteer": "^4.1.1",
    "jquery": "^3.4.1",
    "jsdom": "^15.0.0",
    "puppeteer": "^1.15.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-test-renderer": "^16.8.6"
  ,
  "scripts": 
    "test": "jest --verbose"
  ,
  "jest": 
    "transform": 
      "^.+\\.jsx?$": "babel-jest"
    
  

jest.config.js：

module.exports = 
  preset: 'jest-puppeteer',
  "bail": 0,
  setupFiles: ['<rootDir>/enzyme.config.js'],
  moduleFileExtensions: ['js', 'json', 'jsx'],
  transformIgnorePatterns: ['<rootDir>/node_modules/']

enzyme.config.js：

const Enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');

Enzyme.configure( adapter: new Adapter() );

.babelrc:

  "presets": ["@babel/preset-env"],
  "plugins": ["transform-export-extensions"],
  "only": [
        "./**/*.js",
        "node_modules/jest-runtime"
      ]

WelcomeMessage.test.js：

import React from 'react';
import  shallow  from 'enzyme';

// Components
import WelcomeMessage from './WelcomeMessage';

function setup() 
  const props = 
    imgPath: 'some/image/path/to/a/mock/image',
  ;
  const wrapper = shallow(<WelcomeMessage />);
  return  wrapper, props ;


describe('WelcomeMessage Test Suite', () => 
  it('Should have an image', () => 
    const  wrapper  = setup();
    expect(wrapper.find('img').exists()).toBe(true);
  );
);

【问题讨论】：

查看此链接 - github.com/facebook/jest/issues/6933 我不是专业人士，但看起来此链接包含解决您问题的方法。

【参考方案1】：

这一行：

<WelcomeMessage />

是"just provides syntactic sugar for the React.createElement function"的JSX。

由于 JSX 实际上不是有效的 javascript 代码，因此必须将其编译为 React.createElement 调用。

这是由Babel 插件@babel/plugin-transform-react-jsx 完成的，该插件包含在@babel/preset-react 中。

将@babel/preset-react 添加到您的Babel 配置中，这应该可以解决问题。