如何使用Mocha测试ES6模块(带有导入功能)?

乔治

这是我第一次测试JS前端,因此我选择了mocha。
我有一门课,可以说它Market使用了我制作的其他课。
我使用import ... from ...条款,export default Market最后。

所以Market类看起来像这样:

import { math, AnotherClass, MyOtherClass } from '../index.js'
class Market {
  constructor () {
    // code here
  }
  methodToTest(input) {
    // some code here ...
    return output
  }
}
export default Market

然后是我的test.js

var assert = require('assert')
// import { Market } from '../public/mm/ai/Market.js'
var Market = require('../public/mm/ai/Market')

describe('Market', function() {
    describe('#methodToTest()', function() {
        it('should return 0 input is greater than mean + 4 * sigma', function() {
           var market = new Market()
           assert.equal(market.methodToTest(45), 0)
        })
    })
})

在运行测试后,我得到了错误:

import { math, AnotherClass, MyOtherClass } from '../index.js'
^^^^^^

SyntaxError: Cannot use import statement outside a module

和错误堆栈。

问题是:如何通过这些导入使Mocha测试我的模块?
如您所见,我也尝试直接在test.js中使用import,它也失败了。但是我不想重写我的整个项目以使用require因为它在浏览器中的运行状况非常好。

乔治

所以我自己找到了解决方案。

  1. Babel&Mocha-最好,不会造成中间文件

首先,.mocharc.js文件将mocha配置为使用babel和chai:

module.exports = {
    require: ['chai', '@babel/register'],
    ui: 'bdd',
    // ui: 'tdd',
    reporter: 'spec',
    growl: false,
};

我选择的用户界面:“BDD”因为我用的是描述在test.js:describe('Market class:', function() {

其次,我package.json中添加了babel配置

"babel": {
    "env": {
      "test-console": {
        "presets": ["@babel/preset-env"],
        "plugins": ["@babel/plugin-proposal-class-properties"]
      }
    ,
      "test": {
        "presets": ["@babel/preset-env"],
        "plugins": ["@babel/plugin-proposal-class-properties", "transform-remove-console"]
      }
    }
  },

与控制台输出一起使用的两种环境。
它导致package.json脚本部分执行其中之一:

 "scripts": {
    "test": "BABEL_ENV=test mocha || TRUE",
    "test-console-log": "BABEL_ENV=test-console mocha || TRUE"
  },

现在我已经准备好执行test.js并在模块中进行导入了。
这是test.js的负责人

var assert = require('chai').assert
import Market from '../public/mm/ai/Market.js'
...

考虑自己的模块时,我切换为导入。

  1. Webpack,Babel和Mocha

webpack配置中的所有内容:

var path = require('path');
const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
  mode: 'none',
  entry: './test/test.js',
  output: {
      path: path.resolve(__dirname, 'test/'),
      filename: 'exec_test.js'
  },
  module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env'],
                    plugins: ['@babel/plugin-proposal-class-properties']
                }
            }
        }
    ]
  },
  optimization: {
      minimize: true,
      minimizer: [new TerserPlugin({
          terserOptions: {
              compress: 
              {
                  drop_console: true
                }
            }
        })]
    }
};

然后您可以通过以下方式构建和运行它:

"scripts": {
   "build-tests-webpack": "webpack --config webpack.config.test.js",
   "exec test": "mocha --ui bdd test/exec_test.js"
}

package.json中

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何测试使用jsdom导入jQuery的ES6模块

来自分类Dev

导入类并使用带有Babel Transpiler的es6模块调用静态方法

来自分类Dev

在Mocha测试中使用es6

来自分类Dev

在Mocha测试中使用es6

来自分类Dev

使用JavaScript ES6模块导入现有库

来自分类Dev

在ES6模块中导入同名功能的最佳方法

来自分类Dev

带有ES6模块的角度测试用例中的未知提供程序

来自分类Dev

带有ES6模块的角度测试用例中的未知提供程序

来自分类Dev

使用重接线测试节点ES6模块-功能未定义

来自分类Dev

如何使用Mocha测试嵌套的ES6生成器?

来自分类Dev

如何模拟使用在节点模块中导出的导入(ES6打字稿)的外部注入库进行单元测试

来自分类Dev

如何导入香草JS ES6模块打字稿?

来自分类Dev

使用ES6语法动态导入JavaScript模块?

来自分类Dev

使用ES6语法和动态路径导入模块

来自分类Dev

使用ES6模块导出/导入单类方法?

来自分类Dev

如何在TypeScript中使用ES6模块语法导入angular.IInjectorService

来自分类Dev

如何发布带有commonjs和es6版本的NPM模块?

来自分类Dev

如何使用ES6模块模拟单元测试的依赖关系

来自分类Dev

带有箭头功能es6的setTimeout ReactJS

来自分类Dev

在带有Foo.prototype的节点0.11中使用ES6箭头功能

来自分类Dev

ES6解构和模块导入

来自分类Dev

ES6:从URL导入模块

来自分类Dev

ES6模块与HTML导入

来自分类Dev

ES6模块与HTML导入

来自分类Dev

如何在es6中导入本身需要在导入之前调用/初始化其功能/类的模块

来自分类Dev

ES6如何将模块“导入”另一个模块

来自分类Dev

通过导入ES6模块来加载和使用旧版JS模块(例如IIFE)

来自分类Dev

是否可以使用ES6模块通过ArcGIS API导入模块

来自分类Dev

如何为ES6类React组件创建Chai / Mocha单元测试?

Related 相关文章

  1. 1

    如何测试使用jsdom导入jQuery的ES6模块

  2. 2

    导入类并使用带有Babel Transpiler的es6模块调用静态方法

  3. 3

    在Mocha测试中使用es6

  4. 4

    在Mocha测试中使用es6

  5. 5

    使用JavaScript ES6模块导入现有库

  6. 6

    在ES6模块中导入同名功能的最佳方法

  7. 7

    带有ES6模块的角度测试用例中的未知提供程序

  8. 8

    带有ES6模块的角度测试用例中的未知提供程序

  9. 9

    使用重接线测试节点ES6模块-功能未定义

  10. 10

    如何使用Mocha测试嵌套的ES6生成器?

  11. 11

    如何模拟使用在节点模块中导出的导入(ES6打字稿)的外部注入库进行单元测试

  12. 12

    如何导入香草JS ES6模块打字稿?

  13. 13

    使用ES6语法动态导入JavaScript模块?

  14. 14

    使用ES6语法和动态路径导入模块

  15. 15

    使用ES6模块导出/导入单类方法?

  16. 16

    如何在TypeScript中使用ES6模块语法导入angular.IInjectorService

  17. 17

    如何发布带有commonjs和es6版本的NPM模块?

  18. 18

    如何使用ES6模块模拟单元测试的依赖关系

  19. 19

    带有箭头功能es6的setTimeout ReactJS

  20. 20

    在带有Foo.prototype的节点0.11中使用ES6箭头功能

  21. 21

    ES6解构和模块导入

  22. 22

    ES6:从URL导入模块

  23. 23

    ES6模块与HTML导入

  24. 24

    ES6模块与HTML导入

  25. 25

    如何在es6中导入本身需要在导入之前调用/初始化其功能/类的模块

  26. 26

    ES6如何将模块“导入”另一个模块

  27. 27

    通过导入ES6模块来加载和使用旧版JS模块(例如IIFE)

  28. 28

    是否可以使用ES6模块通过ArcGIS API导入模块

  29. 29

    如何为ES6类React组件创建Chai / Mocha单元测试?

热门标签

归档