使用 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: 转换必须导出 process 函数。

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

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

我还将constructor 添加到Demo 组件中。

Answer 1

Jest 使用 babel 转译 JS 代码。您需要在 .babelrc 文件中添加对 ES7 功能的支持。

步骤如下：

1. 做npm install --save-dev babel-preset-stage-0 babel-jest
2. 在您的 package.json 中，添加 babel-jest 用于转换所有 js 文件。
3. 在您的 .babelrc 文件中，添加 "stage-0" 预设。

这是我的 package.json 的样子：

...
"jest": {
    "transform": {
      "^.+\\.js$": "babel-jest"
    }
}
...

这是我的 .babelrc 文件的样子：

{
  "presets": [
    "es2015",
    "react",
    "stage-0"
  ]
}

Answer 2

我相信如果您尝试添加 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 扩展时，它是React.Component 的一部分。那或者你可能需要声明constructor，然后调用super(props);