gpt4 book ai didi

javascript - 尝试使用 mocha、babel 和 es6 模块设置测试

转载 作者:塔克拉玛干 更新时间:2023-11-02 20:59:10 26 4
gpt4 key购买 nike

我正在尝试利用 grunt 和 babel 加载我的 es6 源代码作为给定测试的依赖项。所以我一直在运行实际的 src 并通过 browserify 编译应用程序:

module.exports = function (grunt) {

// Import dependencies
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-browserify');

grunt.initConfig({
browserify: {
dist: {
files: {
'www/js/bundle.js': ['src/app.js'],
},
options: {
transform: [['babelify', { optional: ['runtime'] }]],
browserifyOptions: {
debug: true
}
}
}
},
jshint : {
options : {
jshintrc : ".jshintrc",
},

dist: {
files: {
src: ["src/**/*.js"]
}
}
},
watch: {
scripts: {
files: ['src/**/*.js'],
tasks: ['jshint', 'browserify'],
options: {
atBegin: true,
spawn: true
},
},
}
});

grunt.registerTask("default", ['watch']);

};

它编译单个 bundle.js 文件,我将其包含在我的 index.html 文件中。太棒了!

所以我想从测试中做的是导入我正在测试的文件。所以我有一个名为 InteractionStore 的简单存储对象,位于 src/stores/interaction_store.js 中。然后我在以下位置创建了一个规范文件:test/stores/interaction_store_spec.js

import expect from "expect.js";
import InteractionStore from '../../../src/stores/interaction_store.js';

describe("InteractionStore", () => {
beforeEach(() => {
InteractionStore.data = [];
});
describe("#start()", () => {
it ("should apped multiple", function () {
InteractionStore.start();
InteractionStore.start();
InteractionStore.start();
expect(InteractionStore.data.length).toEqual(3);
});
});
});

所以我直接导入商店。我在测试过程的 grunt 文件中添加了几个部分:

module.exports = function (grunt) {

// Import dependencies
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-browserify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-mocha-test');
grunt.loadNpmTasks('grunt-babel');

grunt.initConfig({
babel: {
options: {
sourceMap: true,
modules: "common"
},
test: {
files: [{
expand: true,
cwd: 'test',
src: ['**/*.js'],
dest: 'test/compiled_specs',
ext:'.js'
}]
}
},
browserify: {
dist: {
files: {
'www/js/bundle.js': ['src/app.js'],
},
options: {
transform: [['babelify', { optional: ['runtime'] }]],
browserifyOptions: {
debug: true
}
}
}
},
clean: ["test/compiled_specs"],
jshint : {
options : {
jshintrc : ".jshintrc",
},

dist: {
files: {
src: ["src/**/*.js"]
}
}
},
watch: {
scripts: {
files: ['src/**/*.js'],
tasks: ['jshint', 'browserify:dist'],
options: {
atBegin: true,
spawn: true
},
},
},

mochaTest: {
test: {
src: ['test/compiled_specs/**/*_spec.js']
}
}
});

grunt.registerTask("default", ['watch']);
grunt.registerTask("test", ['clean', 'babel', 'mochaTest']);

};

Babel 编译测试没有问题,但是当我运行它时,它会加载 src 文件夹中的 .js 文件,这些文件仍然在 es6 中,并且自然地爆炸。

最佳答案

我在 reddit 上的帮助下设法解决了最初的问题。我不使用 mocha 测试,而是直接运行 mocha 命令:

mocha --ui tdd --compilers js:babel/register test/**/*.js

可以轻松地将其添加为 npm 脚本。

此外,因为我正在测试一个 cordova 项目,所以我需要 phantom js。这也需要一些思考,这里的要点提供了很多帮助:https://gist.github.com/nmabhinandan/6c63463d9f0987020c6f .但这是我的最终设置,以防有人感兴趣:

文件夹结构:

src/
-- app code
test/
spec/
stores/
interaction_store_spec
SpecRunner.js
tests.html

module.exports = function (grunt) {

// Import dependencies
grunt.loadNpmTasks('grunt-contrib-watch')
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-browserify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-babel');
grunt.loadNpmTasks('grunt-exec');
grunt.loadNpmTasks('grunt-contrib-clean');

grunt.initConfig({
babel: {
options: {
sourceMap: true,
modules: "amd"
},
test: {
files: [{
expand: true,
src: ["test/**/*.js"],
dest: "dist",
ext: ".js"
}, {
expand: true,
src: ["src/**/*.js"],
dest: "dist",
ext: ".js"
}]
}
},
browserify: {
dist: {
files: {
'www/js/bundle.js': ['src/app.js'],
},
options: {
transform: [['babelify', { optional: ['runtime'] }]],
browserifyOptions: {
debug: true
}
}
}
},
clean: {
test: ["dist/test"]
},
eslint : {
target: ["src/**/*.js"]
},
exec: {
run_tests: "node_modules/.bin/mocha-phantomjs -p $(which phantomjs) tests.html"
},
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'www/css/styles.css': 'www/css/sass/styles.scss'
}
}
},
watch: {
css: {
files: ['www/css/sass/*.scss'],
tasks: ['sass']
},
scripts: {
files: ['src/**/*.js'],
tasks: ['eslint', 'browserify:dist'],
options: {
atBegin: true,
spawn: true
},
},
}
});

grunt.registerTask("default", ['sass','watch']);
grunt.registerTask("test", ["clean", "babel:test", "exec:run_tests"]);
};

gruntfile 中需要注意的重要一点是使用 babel 本身而不是 browserify。我还添加了 mocha-phantom 和 requirejs 来支持测试。 watch、sass 和 eslint 仅用于构建运行应用程序的源代码。 babel 将源代码和测试编译为 AMD 模块。使用 requirejs 时,您必须在导入字符串中删除扩展名。它适用于 browserify,但如果它有扩展名,requirejs 将不会使用 SpecRunner 中的 baseUrl。

SpecRunner.js:

// RequireJS configuration
require.config({
baseUrl: 'dist/test',
urlArgs: 'cb=' + Math.random(),
paths: {
spec: 'spec', // lives in the test directory
},
hbs: {
disableI18n: true
}
});

let testSuite = {
specs: [
'spec/stores/interaction_store_spec'
]
};

// run mocha
(function() {
require(testSuite.specs, function() {

if (window.mochaPhantomJS) {
mochaPhantomJS.run();
} else {
mocha.run();
}

});
})();

测试.html:

<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Mocha Spec Runner</title>
<link rel="stylesheet" href="node_modules/mocha/mocha.css">
</head>
<body>
<div id="mocha"></div>

<script src="node_modules/mocha/mocha.js"></script>
<script src="node_modules/expect.js/index.js"></script>

<script>
mocha.ui('bdd');
mocha.reporter('html');
</script>
<script src="node_modules/requirejs/require.js" data-main="dist/test/SpecRunner"></script>
</body>
</html>

打包json:

{
"name": "test",
"version": "0.0.1",
"devDependencies": {
"babel": "^5.8.12",
"babel-runtime": "^5.8.12",
"babelify": "^6.1.3",
"eslint": "^0.24.1",
"expect.js": "^0.3.1",
"grunt": "^0.4.5",
"grunt-babel": "^5.0.1",
"grunt-browserify": "^3.8.0",
"grunt-contrib-clean": "^0.6.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-eslint": "^16.0.0",
"grunt-exec": "^0.4.6",
"mocha": "^2.2.5",
"mocha-phantomjs": "^3.6.0",
"requirejs": "^2.1.20"
}
}

所以当我运行 grunt testgrunt babel 更具体地说,我在我的应用程序的根目录中得到一个 dist 文件夹:

 dist/
test/
-- compiled specs
src/
-- compiled source

然后 phantom 运行规范就好了。请注意,您需要通过自制软件或类似软件安装 phantomjs 才能使其正常工作。我用的是1.9.2

关于javascript - 尝试使用 mocha、babel 和 es6 模块设置测试,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31547004/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com