尝试用摩卡，巴别塔和amp设置测试;es6模块

Trying to setup tests with mocha, babel & es6 modules

本文关键字：设置 amp 测试 模块 es6 别塔 摩卡      更新时间：2023-09-26

我想利用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编译测试没有问题，但是当我运行它时，它会加载es6中src文件夹中的.js文件，然后它自然会爆炸。

我在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和需求来支持测试。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

然后幻影运行规格很好。注意，您需要通过自制或类似的东西安装phantomjs才能使其工作。我用了1.9.2

相关文章：