Question

我正在尝试使用Jasmine和Karma测试运行程序为我的reactjs代码编写单元测试-使用gulp自动化。我遇到了一个问题，即我的测试规范中包含导入语句，这些语句随后没有被测试机构接收。

这是我的测试规格：

import React from 'react';
import Utils from 'react-dom/test-utils';
import {MyClass} from "../Path/MyCodeFile.jsx";

describe('MyClass', function () {

    it('can render without error', function () {
        var component;

        var element = React.createElement(
            MyClass,
            {} 
        );

        expect(function () {
            component = Utils.renderIntoDocument(element);
        }).not.toThrow();
    });
})

我的业力配置文件：

module.exports = function (config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine'],
        files: [
            'spec/*[Ss]pec.js',
            'wwwroot/js/site.js'
        ],
        exclude: [
        ],
        preprocessors: {
            'spec/*[Ss]pec.js': ['babel']
        },
        babelPreprocessor: {
            options: {
                presets: ['es2015', 'env'],
                plugins: ["transform-es2015-modules-umd"]
            }
        },
        reporters: ['progress', 'junit'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: false,
        browsers: ['Chrome'],
        plugins: [
            'karma-jasmine',
            'karma-junit-reporter',
            'karma-chrome-launcher',
            'karma-babel-preprocessor'
        ],
        singleRun: true,
        concurrency: Infinity
    });
}

我的大任务：

var gulp = require('gulp');
var Server = require('karma').Server;
gulp.task('unittest', function (done) {
    new Server({
        configFile: __dirname + '/karma.conf.js',
        singleRun: true
    }, function () {
        done();
    }).start();
});

这是我在运行任务时收到的消息：

[21:17:11] Starting 'unittest'...
02 08 2018 21:17:13.030:INFO [karma]: Karma v2.0.5 server started at http://0.0.0.0:9876/
02 08 2018 21:17:13.030:INFO [launcher]: Launching browser Chrome with unlimited concurrency
02 08 2018 21:17:13.046:INFO [launcher]: Starting browser Chrome
02 08 2018 21:17:14.969:INFO [Chrome 67.0.3396 (Windows 10 0.0.0)]: Connected on socket peUBczU20NB36DSvAAAA with id 73989234
Chrome 67.0.3396 (Windows 10 0.0.0): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
Chrome 67.0.3396 (Windows 10 0.0.0) MyClass can render without error FAILED
    TypeError: Cannot read property 'createElement' of undefined
        at <Jasmine>
        at UserContext.<anonymous> (spec/applicationSpec.js:31:43)
        at <Jasmine>
Chrome 67.0.3396 (Windows 10 0.0.0): Executed 1 of 1 (1 FAILED) (0 secs / 0.003 secs)
Chrome 67.0.3396 (Windows 10 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.02 secs / 0.003 secs)
[21:17:15] Finished 'unittest' after 3.6 s

好像导入语句不存在。

Answer 1

经过一番痛苦，我找到了一种成功运行测试的替代方法。我的新测试规格：

describe('MyClass', function () {
    var React;
    var Utils;
    var MyClasses;

    beforeAll(() => {
        React = require("react");
        Utils = require("react-dom/test-utils");
        MyClasses = require("../Path/MyClass.jsx");
    });

    it('can render without error', function () {
        var component;

        var element = React.createElement(
            MyClasses.MyClass,
            {} 
        );

        expect(function () {
            component = Utils.renderIntoDocument(element);
        }).not.toThrow();
    });
})

和我更新的业力配置：

module.exports = function (config) {
    config.set({

        basePath: '',
        frameworks: ['jasmine', 'browserify'],
        files: [
            'spec/*[Ss]pec.js',
            'wwwroot/js/site.js'
        ],
        exclude: [
        ],
        preprocessors: {
            'spec/*[Ss]pec.js':  ['browserify']
        },
        browserify: {
            debug: true,
            transform: [
                ['babelify', {
                    presets: [
                        "@babel/preset-env",
                        "@babel/preset-react"
                    ]
                }]
            ],
            extensions: ['.jsx']
        },
        reporters: ['progress', 'junit'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: false,
        browsers: ['Chrome'],    
        plugins: [
            'karma-jasmine',
            'karma-junit-reporter',
            'karma-chrome-launcher',
            'karma-babel-preprocessor',
            'karma-browserify'
        ],
        singleRun: true,
        concurrency: Infinity
    });
}

茉莉花测试规范未能提取React导入声明

1 个答案: