如何使用 mocha 测试 ES6 模块（这些模块带有导入）？

How to test ES6 modules (these with import) with mocha?

这是我第一次测试 JS 前端，因此我选择了 mocha。
我有一个 class 让我们说 Market 它使用了我制作的其他 classes。
我在最后使用 import ... from ... 子句和 export default Market。

所以 Market class 看起来像这样：

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 中直接使用导入，但也失败了。 但是我不想重写我的整个项目以使用 require 因为它在浏览器中工作得很好，就像现在一样。

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

  1. Babel & mocha - 最好的，因为没有中间文件

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

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

我选择了ui:'bdd'因为我在test.js中使用了describe : 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"]
      }
    }
  },

两种环境，用于控制台输出和 wituhout。
它导致 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'
...

关于自己的模块，我改用import了。

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

然后你可以通过以下方式 uild 和 运行 它：

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

在package.json

For anyone who suffer from configuration

1。安装

您需要安装 mocha 和@babel/XXX 插件

npm install mocha --save-dev

npm install @babel/cli @babel/core @babel/preset-env @babel/register --save-dev

勾选package.json。可能是这样

{
  "scripts": { ... }
  "devDependencies": {
    "@babel/cli": "^7.15.7",
    "@babel/core": "^7.15.5",
    "@babel/preset-env": "^7.15.6",
    "@babel/register": "^7.15.3",
    ...
    "mocha": "^9.1.2",
    ...
  },
  ...
}
  • 版本可以不同

2。 babel 配置

在[PROJECT-ROOT]

下创建babel配置文件.babelrc 
[PROJECT-ROOT]
 +- src
 +- test
 +- package.json
 +- .babelrc (+)

然后像这样填写内容

{
  "presets": ["@babel/preset-env"]
}

3。测试脚本运行程序

打开 package.json 并找到“脚本”块

{
  "name": "...",
  ...
  "scripts": {
     "build": ...,
     "start": ...,
  },
}

创建“测试”属性，值为 mocha --require @babel/register

{
  "name": "...",
  ...
  "scripts": {
     "build": ...,
     "start": ...,
     "test": "mocha --require @babel/register"
  },
}

4。样品

创建要测试的文件(calc.js)，并测试文件(calc.spec.js)

[PROJECT-ROOT]
 +- src
     +- calc.js      (+)
 +- test
     +- calc.spec.js (+)
 +- package.json
 +- .babelrc

// calc.js
const add = (a, b) => a + b
const mul = (a, b) => a * b

export default {
  add,
  mul
}

和测试文件calc.spec.js

// calc.spec.js
const assert = require('assert')
import calc from '../src/calc'

describe('testing calc.add, cal.mul', () => {
  it('should be seven', () => {
    const seven = calc.add(3, 4)
    assert.equal(7, seven)
  })
})

5。 运行 测试

在控制台输入npm run test

$ npm run test

  testing calc.add, cal.mul
    ✔ should be seven


  1 passing (7ms)

6。参考