使用 karma/jasmine 编写测试答案

【问题标题】：Writing tests with karma/jasmine使用 karma/jasmine 编写测试
【发布时间】：2017-09-03 03:16:11
【问题描述】：

我一直在使用 ember/angular 等框架构建普通的 js 应用程序。他们已经内置了用于编译和测试的所有内容。

我开始用 vanilla js 构建一个应用程序。我用es6写代码。

我开始使用 karma/jasmine 进行测试。我被配置卡住了。我浏览了几篇文章并取得了一些成功，但再次陷入了来自 karma 中的 browserify 的相对错误。 ERROR [framework.browserify]: Error: Cannot find module

如何使用 karma/jasmine 编写测试。用什么？ webpack/浏览器？

我的应用结构是： app/js/**/*.jsapp/tests/**/*.jsapp/css/**.cssapp/index.htmlapp/Gruntfile.jsapp/karma.conf.jsapp/package.jsonapp/server.js

这是我的 gruntfile.js

    module.exports = function(grunt) {
    grunt.initConfig({
        browserify: {
            development: {
                src: [
                    "./js/application.js",
                ],
                dest: './js/common.js',
                options: {
                    browserifyOptions: {
                        debug: true
                    },
                    transform: [
                        ["babelify", {
                            "presets": ["es2015"]
                        }]
                    ]
                }
            }
        },
        watch: {
            scripts: {
                files: ["./js/**/*.js"],
                tasks: ["browserify"]
            }
        }
    });
    grunt.loadNpmTasks('grunt-browserify');
    grunt.loadNpmTasks('grunt-contrib-watch');
};

这是 karma.conf.js

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

        basePath: '',
        frameworks: ['browserify', 'jasmine'],
        browsers: ['Chrome'],
        files: [
            'js/**/*.js',
            'tests/**/*.js'
        ],

        exclude: [],

        preprocessors: {
            'js/**/*.js': ['browserify'],
            'tests/**/*.js': ['browserify']
        },

        browserify: {
            debug: true,
            transform: ['babelify']
        },
        reporters: ['progress', 'html'],

        // the default configuration
        htmlReporter: {
            outputDir: 'karma_html', // where to put the reports
            templatePath: null, // set if you moved jasmine_template.html
            focusOnFailures: true, // reports show failures on start
            namedFiles: false, // name files instead of creating sub-directories
            pageTitle: null, // page title for reports; browser info by default
            urlFriendlyName: false, // simply replaces spaces with _ for files/dirs
            reportName: 'report-summary-filename', // report summary filename; browser info by default


            // experimental
            preserveDescribeNesting: false, // folded suites stay folded
            foldAll: false, // reports start folded (only with preserveDescribeNesting)
        }
    });
};

这是我的 package.json

{
  "author": "Yomn",
  "name": "myapp",
  "version": "0.0.0",
  "scripts": {
    "start": "node server.js",
    "tests": "karma start"
  },
  "devDependencies": {
    "babel-core": "^5.0.0",
    "babel-loader": "^5.0.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babelify": "^7.3.0",
    "browserify": "^14.4.0",
    "grunt": "^1.0.1",
    "grunt-browserify": "^5.1.0",
    "grunt-contrib-watch": "^1.0.0",
    "jasmine": "^2.2.1",
    "jasmine-core": "^2.2.0",
    "karma": "^0.13.2",
    "karma-browserify": "~3.0.2",
    "karma-chrome-launcher": "^2.2.0",
    "karma-html-reporter": "^0.2.7",
    "karma-jasmine": "^0.3.5",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-webpack": "^1.6.0",
    "phantomjs-prebuilt": "^2.1.15",
    "webpack": "^1.8.4"
  }
}

【问题讨论】：

SO 不是教程或持续问题的平台。 SO是您针对可以回答的特定问题提出特定问题的地方。你的问题太笼统了。

标签： javascript gruntjs karma-jasmine babeljs browserify

【解决方案1】：

我尝试使用您的配置运行项目，但由于您没有提供文件示例，因此我草拟了可行的示例。希望对你有用。

js\Circle.js:

class Circle {
    constructor(x, y, radius) {
        this.x = x;
        this.y = y;
        this.radius = radius;
    }
}

exports.Circle = Circle;

测试\Circle.js：

var Circle = require('../js/Circle');

describe('Circle', () => {
    describe(`constructor`, () => {
        it(`should initialize properties correctly`, () => {
            const circle = new Circle.Circle(1, 2, 3);
            expect(circle.x).toBe(1);
        });
    });
});

业力启动命令："node_modules\.bin\karma" start --no-single-run

【讨论】：