如何使用mocha测试ES6模块（包含import）？

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，因为它现在在浏览器中运行得非常好。

- George

---

你的测试也需要通过Babel运行。 - Dave Newton

但是在通过Babel进行翻译之前，我想先测试一下这个类。 - George

好的，我猜我对这一堆JS工具一无所知。 - George

欢迎加入俱乐部。这还取决于您是在浏览器中运行测试还是从命令行运行 - 但底线是测试也需要经过Babel处理。 - Dave Newton

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文件并找到"scripts"块。

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

创建一个名为"test"的属性，其值为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

- chmin.seo

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

我在使用自己的模块时，转而使用了import。

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 文件中。

- George