用Jest单元测试ES7 React组件

Question

您如何使Jest与ES7初始化程序配合使用？我在这里和其他来源进行了广泛的搜索，但没有发现任何结论性的信息。

.babelrc.js

{
    "env": {
        "development": {
            "presets": [["es2015", { "modules": false }], "react", "react-hmre"],
            "plugins": [
                "transform-class-properties",
                "react-hot-loader/babel"
            ]
        },
        "test": {
            "presets": ["env", "react"],
            "plugins": ["transform-class-properties"]
        },
        "production": {
            "presets": [["es2015", { "modules": false }], "react"],
            "plugins": ["transform-class-properties"]
        }
    }
}

package.json

    {
    "name": "demo",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT",
    "private": true,
    "dependencies": {
        "react": "^15.5.4",
        "react-dom": "^15.5.4",
    },
    "devDependencies": {
        "babel-cli": "^6.24.1",
        "babel-core": "^6.24.1",
        "babel-jest": "^20.0.3",
        "babel-plugin-transform-class-properties": "^6.24.1",
        "babel-polyfill": "^6.23.0",
        "babel-preset-env": "^1.5.2",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "babel-preset-react-hmre": "^1.1.1",
        "enzyme": "^2.8.2",
        "react-hot-loader": "next",
        "babel-plugin-import": "^1.2.1",
        "enzyme": "^2.9.1",
        "enzyme-to-json": "^1.5.1"
    },
    "scripts": {
        "test": "export NODE_ENV=test && ./node_modules/.bin/jest --no-cache"
    },
    "engines": {
        "node": ">= 7.8.0"
    },
    "jest": {
        "verbose": true,
        "collectCoverage": true,
        "coverageDirectory": "__coverage__",
        "mapCoverage": true,
        "setupFiles": [
            "./tests/setup.js"
        ],
        "testPathIgnorePatterns": [
            "/node_modules/"
        ],
        "transform": {
            "\\.js$": "../node_modules/babel-jest"
        },
        "testRegex": ".*\\.test\\.js$",
        "snapshotSerializers": [
            "enzyme-to-json/serializer"
        ]
    }
}

Demo.jsx

import React from 'react';
import PropTypes from 'prop-types';

export class Demo extends React.Component {

    static props = { name: PropTypes.string.isRequired };

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className='demo'>{this.props.name}</div>
        );
    }

}

Demo.test.js

import React from 'react';
import { Demo } from '..';
import { render } from 'enzyme';


describe('Demo', () => {
    it('renders correctly', () => {
        const wrapper = render(<Demo name="foo" />);
        expect(wrapper).toMatchSnapshot();
    });
});

运行yarn test或后export NODE_ENV=test && ../node_modules/.bin/jest --no-cache，Jest会抱怨看到一个意外字符

 8 |     props = {
   |           ^
 9 |         name: PropTypes.string.isRequired

据我了解，在运行测试时设置的环境变量应自动将初始化程序转换为Jest可以使用的某种形式，但这似乎没有发生。

我也在使用webpack 2.x，但是要使其正常工作的配置开销似乎令人生畏。还有另一种方法吗？

更新1

我修改了Jest设置，如下所示：

 "transform": {
      "\\.js$": "./node_modules/babel-plugin-transform-class-properties"
 }

立即失败，原因是：

TypeError：开玩笑：转换必须导出process函数。

transform完全删除会产生一个稍微不同的问题：

TypeError：无法读取null的属性“ props”

我还添加了constructor到Demo组件。

Answer 1

我相信如果您尝试propTypes使用 ES7 初始化器添加 , 并使用transform-class-properties您需要做的

static propTypes = {
    name: PropTypes.string.isRequired
};

所以它会是

import React from 'react';
import PropTypes from 'prop-types';

export class Demo extends React.Component {

    static propTypes = {
        name: PropTypes.string.isRequired
    };

    render() {
        return (
            <div className='demo'>{this.props.name}</div>
        );
    }

} 

很确定您不必显式定义，props因为它是您从它扩展时的一部分React.Component。或者您可能需要声明 constructor 然后致电super(props);