javascript - 在 React JS 中运行测试用例时出现意外 token

Question

我使用 jest 在 React js 中运行我的测试用例 我在运行测试用例时遇到错误，我的 App.test.js 在下面

const { React } = require('react');
const { shallow } = require('enzyme');
const { Iconshow } = require('../../src/Component/Icon');

describe('Iconshow component', ()=>{
    let wrapper;
    beforeEach(()=>{
        wrapper = shallow(<Iconshow />); //i am getting error on this line
    })
    it('+++ render the DUMB component', () => {
        expect(wrapper).toBeTruthy();
    });
});

package.json 文件。

    {
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "homepage": "./",
  "dependencies": {
    "chart.js": "^2.7.1",
    "enzyme-adapter-react-15": "^1.0.5",
    "husky": "^0.14.3",
    "lint-staged": "^6.1.0",
    "node-sass-chokidar": "^0.0.3",
    "normalize.css": "^7.0.0",
    "npm-run-all": "^4.1.2",
    "prettier": "^1.10.2",
    "react": "^16.2.0",
    "react-chartjs-2": "^2.7.0",
    "react-scripts": "1.1.0"
  },
  "lint-staged": {
    "src/**/*.{js,jsx,json,css}": [
      "prettier --single-quote --write",
      "git add"
    ]
  },
  "scripts": {
    "precommit": "prettier",
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build-js": "react-scripts build",
    "build": "npm-run-all build-css build-js",
    "eject": "react-scripts eject",
    "test": "jest",
    "test:watch": "jest -c --watch",
    "test:coverage": "jest -c --coverage"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-jest": "^22.2.2",
    "babel-preset-es2015": "^6.24.1",
    "enzyme": "^3.3.0",
    "enzyme-to-json": "^3.3.1",
    "jest": "^22.2.2",
    "jest-serializer-enzyme": "^1.0.0",
    "react-dom": "^16.2.0",
    "react-test-renderer": "^16.2.0"
  },
  "jest": {
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    },
    "setupFiles": [
      "./test/jestsetup.js"
    ],
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ],
    "moduleNameMapper": {
      ".*\\.(css|scss|sass)$": "<rootDir>/tools/jest/styleMock.js",
      ".*\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tools/jest/assetMock.js"
    },
    "moduleFileExtensions": [
      "js",
      "jsx"
    ]
  }
}

我只分享了 Jest 配置，我尝试使用 create-react-app 没有构建配置设置，refer the screen shot

    import React from 'react';

    const Iconshow = props => {
        let icon;
        switch(props.icon) {
            case "Clouds":
                icon = "wi wi-day-cloudy";
                break;
            case "Rain":
                icon = "wi wi-day-rain";
                break;
            default:
                icon = "wi wi-day-sunny";
        }
        return <div className="iconWeath"><i className={icon}></i></div>;
    }

    export default Iconshow;

test/jestsetup.js:

    import { shallow, render, mount } from 'enzyme';
    //const {shallow, render, mount} = require('enzyme');
    global.shallow = shallow;
    global.render = render;
    global.mount = mount;
    //Fail tests on any warning
    console.error = message => {
       throw new Error(message);
    };

我的 iconshow 组件看起来像这样，我已经更新了我的 package.json 和 jestsetup 文件可以请检查我的 package.json 文件和 jestsetup 告诉我一些解决方案，我正在尝试解决这个问题发布两天，但我不能，

Answer 1

你的代码有几个问题，

• 语法错误:意外的 token 导入

确保您已将名为 .babelrc 的文件添加到项目的根文件夹中。没有它，babel transpiling 将无法工作。更多 here ，但是 .babelrc 的内容是这样的:

{ “预设”:[“环境”，“ react ”] }

• 修复您的导入。

因为 Iconshow 是您的默认命名导出。请注意，这同样适用于 React 导入。像这样更改测试中的导入:

从“ react ”导入 react ； 从“ enzyme ”导入{浅}； 从 '../src/Components/Iconshow' 导入 Iconshow；

• 配置 enzyme 适配器。

Enzyme 现在需要为特定版本的 React 配置适配器。由于您使用的是 React 16，因此请运行 npm i enzyme-adapter-react-16 --save-dev。然后用这个更新你的 jestSetup.js:

从“enzyme-adapter-react-16”导入适配器； 从 'enzyme' 导入 { shallow, render, mount, configure }; ... 配置({适配器:新适配器()})；

按照上面的步骤，我成功地运行了测试:

编辑

test 和 jestSetup 的完整代码已修复:

https://gist.github.com/danielcondemarin/ec8180c4c37a4d1f99be28e01c4804a6 https://gist.github.com/danielcondemarin/e7af16f59e062977bded3252140a46d4