javascript - Grunt、Jasmine、Phantom、React 单元测试 : React throws on ReactElementValidator

Question

我正在使用 Grunt 与 Phantom 一起运行 Jasmine 单元测试。

Grunfile.js
module.exports = function (grunt)
{
    "use strict";

    grunt.loadNpmTasks('grunt-browserify');
    grunt.loadNpmTasks('grunt-karma');

    grunt.initConfig(
        {
            pkg: grunt.file.readJSON('package.json'),
            browserify: {
                dev: {
                    files: {
                        'test-output.js':['src/methods.js']
                    },
                    options: {
                        browserifyOptions: {
                            debug: true
                        }
                    }
                }
            },
            karma:
            {
                unit:{
                    configFile:"karma.conf.js"
                }
            }
        });
};

使用这个 Karma 配置文件

module.exports = function(config)
{
    config.set({
        basePath: '',
        frameworks: ['browserify', 'jasmine'],
        files: [
            'myDir/*.js'
        ],
        exclude: [
        ],
        preprocessors: {
            'myDir/*.js':['browserify','reactify']
        },
        reporters: ['progress'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: false,
        browsers: ['PhantomJS'],
        browserify: {
            debug: true,
            transform: []
        },
        plugins: [
            'karma-phantomjs-launcher',
            'karma-jasmine','karma-bro'],
        singleRun: true
    });
};

React 作为包安装在本地 node_modules 文件夹中。我可以 grunt browserify 并且一切都按预期捆绑到 test-ouput.js 中，但是当我执行 grunt karma 时，我得到错误:

TypeError: 'undefined' is not a function (evaluating 'ReactElementValidator.createElement.bind

如果我检查 test-ouput.js 文件，我可以看到 ReactElementValidator.createElement.bind 函数在包内。知道是什么原因造成的吗？

Answer 1

这是 phantomJS < 2.0 的已知问题。要解决此问题，只需像这样安装 phantomjs polyfill:

npm install --save-dev phantomjs-polyfill

然后像这样将它添加到配置中。

files: [
    'node_modules/phantomjs-polyfill/bind-polyfill.js',
    'myDir/*.js'
]

希望对您有所帮助。