Jest 遇到意外令牌 [英] Jest encountered an unexpected token

问题描述

不知道为什么会在这条线上抱怨:

const wrapper = Shallow();

整个测试:

从'react'导入React；从酶"导入{浅}；从'enzyme-to-json'导入toJson；//本地组件从'./bitcoinWidget'导入BitcoinWidget；const 道具 = {标志:'foobar'，硬币: {价格:0},刷新: jest.fn()}描述('渲染时'，()=> {const wrapper = Shallow(<BitcoinWidget {...props}/>);it('应该渲染一个与快照匹配的组件', () => {const tree = toJson(wrapper);期望(树).toMatchSnapshot()；期望(包装器).toHaveLength(1)；});});

组件

从'react'导入React；const BitcoinWidget = ({ logo, coin : { price }, refresh }) =>{返回 (<div className="bitcoin-wrapper shadow"><标题><img src={logo} alt="比特币标志"/></标题><div className="价格">币库${价格}

<button className="btn striped-shadow white" onClick={refresh}><span>刷新</span>

);}导出默认的 BitcoinWidget；

还有我的 package.json

<代码>{"name": "比特币",版本":0.1.0"，私人":真的，依赖关系":{"axios": "^0.18.0",反应":^ 16.4.2"，"react-dom": "^16.4.2","react-redux": "^5.0.7",反应脚本":1.1.5"，"redux": "^4.0.0","redux-thunk": "^2.3.0"},脚本":{开始":反应脚本开始"，"build": "react-scripts build","eject": "react-scripts 弹出","test": "yarn run test-jest:update --verbose --maxWorkers=2","test-jest:update": "jest src --updateSnapshot","test-jest": "jest src"},现在": {"name": "比特币",引擎": {节点":8.11.3"},别名":leongaban.com"},开玩笑":{详细":真实，模块名称映射器":{"\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/客户端/资产Transformer.js"},模块文件扩展名":["js",jsx"],模块目录":[节点模块"]},开发依赖":{"酶": "^3.4.4","酶转json": "^3.3.4",开玩笑":^23.5.0"}}

解决方案

将此添加到您的 package.json jest 配置中.

转换":{"\.js$": "/node_modules/babel-jest"},

如果问题仍然存在，请告诉我.

Not sure why it's complaining on this line:

const wrapper = shallow(<BitcoinWidget {...props} />);

Entire test:

import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';

// Local components
import BitcoinWidget from './bitcoinWidget';

const props = {
  logo: 'foobar',
  coin: {
    price: 0
  },
  refresh: jest.fn()
}

describe('when rendering', () => {
  const wrapper = shallow(<BitcoinWidget {...props} />);

  it('should render a component matching the snapshot', () => {
    const tree = toJson(wrapper);
    expect(tree).toMatchSnapshot();
    expect(wrapper).toHaveLength(1);
  });
});

The component

import React from 'react';

const BitcoinWidget = ({ logo, coin : { price }, refresh }) => {
  return (
    <div className="bitcoin-wrapper shadow">
      <header>
        <img src={logo} alt="Bitcoin Logo"/>
      </header>
      <div className="price">
        Coinbase
        ${price}
      </div>
      <button className="btn striped-shadow white" onClick={refresh}>
        <span>Refresh</span>
      </button>
    </div>
  );
}

export default BitcoinWidget;

And my package.json

{
  "name": "bitcoin",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-redux": "^5.0.7",
    "react-scripts": "1.1.5",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject",
    "test": "yarn run test-jest:update --verbose --maxWorkers=2",
    "test-jest:update": "jest src --updateSnapshot",
    "test-jest": "jest src"
  },
  "now": {
    "name": "bitcoin",
    "engines": {
      "node": "8.11.3"
    },
    "alias": "leongaban.com"
  },
  "jest": {
    "verbose": true,
    "moduleNameMapper": {
      "\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/client/assetsTransformer.js"
    },
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules"
    ]
  },
  "devDependencies": {
    "enzyme": "^3.4.4",
    "enzyme-to-json": "^3.3.4",
    "jest": "^23.5.0"
  }
}

解决方案

Add this in your package.json jest config.

"transform": {
      "\.js$": "<rootDir>/node_modules/babel-jest"
    },

Let me know if the issue still persists.

这篇关于Jest 遇到意外令牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！