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

Question

我正在尝试利用 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 中，自然会爆炸。

Answer 1

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

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

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

更进一步，因为我正在测试一个cordova项目，我需要幻像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();
    }

  });
})();

Tests.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 test 或 grunt babel 时，我会在我的应用程序的根目录中获得一个 dist 文件夹：

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

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