用业力/茉莉花写测试

Posted 2021-04-15

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

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

我开始使用karma / jasmine进行测试。我对配置感到困惑。我经历了几篇文章并取得了一些成功，但再次陷入了业力中的browserify的相对错误。 ERROR [framework.browserify]: Error: Cannot find module

如何用karma / jasmine编写测试。用什么？的WebPack / browserify？

我的应用程序结构是：app/js/**/*.js app/tests/**/*.js app/css/**.css app/index.html app/Gruntfile.js app/karma.conf.js app/package.json app/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"
  }
}

答案

我尝试使用您的配置运行项目，但由于您没有提供文件的示例，我勾勒出了可行的示例。我希望它会有用。

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

Karma开始命令："node_modules.binkarma" start --no-single-run