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

Question

这是我第一次测试 JS 前端，为此我选择了 mocha。
我有一个 class 让我们说使用我制作的其他课程的Market 。
我最后使用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 ，因为它在浏览器中工作得很好，就像现在一样。

Answer 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('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'
...

关于我自己的模块，我切换到导入。

2. 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 中