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

Question

这是我第一次测试 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，因为它现在在浏览器中工作得非常好。

Answer 1

对于任何遭受配置困扰的人

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。参考

• https://github.com/mochajs/mocha-examples/tree/master/packages/babel

Answer 2

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

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"]
      }
    }
  },

使用控制台输出和没有控制台输出的两种环境。
它会导致 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

中