javascript - 使用 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: Jest: a transform must export a process function.

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

TypeError: Cannot read property 'props' of null

我还在 Demo 组件中添加了 constructor。

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);