Question

我在使用jest的反应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 no build configuration setup 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

您的代码中有几个问题，

SyntaxError：意外的令牌导入

确保已将名为.babelrc的文件添加到项目的根文件夹中。没有它，babel转换将无法正常工作。更多this，但.babelrc内容将是：

{ "presets": ["env", "react"] }

修复导入。

由于Iconshow是您的default named export。请注意，同样适用于React导入。像这样更改测试中的导入：

import React from 'react'; import { shallow } from 'enzyme'; import Iconshow from '../src/Components/Iconshow';

配置酶适配器。

Enzyme现在需要为特定版本的React配置适配器。由于您使用的是React 16，请运行npm i enzyme-adapter-react-16 --save-dev。然后使用以下内容更新jestSetup.js：

import Adapter from 'enzyme-adapter-react-16'; import { shallow, render, mount, configure } from 'enzyme'; ... configure({ adapter: new Adapter() });

按照上述步骤操作后，我成功运行了测试：

here

修改

您的test和jestSetup的完整代码已修复：

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

在反应js中运行测试用例时出现意外的令牌

1 个答案: