标签： mocha

解决 mocha 测试时 `cannot use import statement outside a module` 错误，以及配置 travis
前些天同事突然发现一个库项目的测试无法运行，报错的内容大概是：cannot use import statement outside a module "should"，即无法在模块外使用 import 导入内容。这个错误比较奇怪，简单 Google 之，基本上大家的解决方案都是使用 <script type="module"> 即在浏览器里用 ESM 加载 JS，这明显和我们的环境不同。

Node.js 当然也支持 ESM，不过这应该也不是问题症结。大体上我可以判断，因为测试集（JS 文件）用到 import 语法，而且用 mocha --require @babel/register 启动测试，所以应该是 Babel 没有正确转译导致的问题。

检查 Babel 的相关配置，发现同事为了能同时编译现代浏览器和 IE 两个版本的库，.babelrc 大概是这样的：
```
{
  "env": {
    "default": {
      "presets": [],
    },
    "withie": {
      "presets": [],
    }
  }
}
```
猜测 mocha 走了 default 分支，然后没有转译，所以出错。解决方案就是添加 node 分支，以当前 node 版本为 target，这样该转译就转译，不转译就用原生，性能更好，修改好的配置大概是这样的：
```
{
  "env": {
    "default": {"presets": []},
    "withie": {"presets": []},
    "node": {
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": {
              "node": "current"
            },
            "useBuiltIns": false
          }
        ]
      ]
    }
  }
}
```
使用时，需要增加环境变量用来切换配置：BABEL_ENV=node mocha --require @babel/register。比较奇怪的是，其他脚本使用 BROWSERSLIST_ENV 切换，这里只能使用 BABEL_ENV，我暂时不知道为什么。

修改之后的脚本就可以正常测试了。接下来我打算给它加上 Travis，这样就能自动 lint + 测试，比较方便控制质量。加 Travis 很简单，拷过来一个 .travis.yml 改吧改吧就行了，但是第一次运行失败了，而且是超时。经过研究，原来 mocha 从 v4 开始，完成测试后不会自动退出，除非手动指定，方法是增加 --exit 参数。

所以最终的测试脚本是（其它配置略去）：
```
{
  "scripts": {
    "test": "BABEL_ENV=node mocha --require @babel/register --exit",
  }
}
```
最终 Travis 配置是：
```
sudo: required
  dist: trusty
 

  language: node_js
  node_js:
    - 14
 

  branches:
    only:
      - master
 

  cache:
    directories:
      - ~/.npm # cache npm's cache
      - ~/npm # cache latest npm
 

  install:
    - npm ci
 

  script:
    - npm run lint
    - npm run test
```
2020年11月30日

使用 Webpack + Mocha 进行单元测试（二）

作为一名远程工作者，我并不能保证100%的电源供应，就目前的经验来看，我大约有30%的时间靠电池工作。所以我对能耗也比较敏感，把 eslint 和单元测试（mocha）放在 webpack 里做热加载，我觉得实在没什么必要，还是单独写单独跑吧。

查看 mocha-webpack 的 README，它对自己的介绍是：mocha-webpack 基本上等效于 $ webpack test.js output.js && mocha output.js 命令的封装，但是更高效、更强大。

让我们忽略后半句，先不去研究它高效和强大在什么地方，只看前半句。如果本质如此的话，那就不复杂，我只要写一个 webpack 配置文件生成所有的测试，然后跑这些测试就行了。最终方案：

一个入口文件，import 所有测试文件
用 webpack 打包入口文件，忽略掉不需要测试的内容（比如 CSS）
跑这个测试
平时写测试随便改下 import 路径就行了

测试文件多而杂，一个一个 import 太麻烦，可以写一个脚本帮我们：

const context = require.context('.', true, /.+\.test\.js?$/);
context.keys().forEach(context);
module.exports = context;

然后配合这样的配置文件即可：

const path = require('path');
const nodeExternals = require('webpack-node-externals');
const {resolve} = require('./webpack.base.config');

resolve.alias.test = path.resolve(__dirname, '../test');

const config = {
  target: 'node',
  entry: 'test/index.js',
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'test.build.js',
  },
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
            },
          },
        ],
      },
      {
        test: /\.ya?ml$/,
        use: [
          'json-loader',
          'yaml-loader',
        ],
        exclude: /node_modules/
      },
      {
        test: /\.(css|styl)$/,
        loader: 'null-loader',
      },
      {
        test: /\.(png|jpg|gif|svg|woff2|eot|woff|ttf|ico)$/,
        loader: 'null-loader',
      },
      {
        test: /\.pug$/,
        loader: 'pug-plain-loader',
      },
    ],
  },
  mode: 'none',
  resolve,
};

module.exports = config;

执行的时候，直接用 shell 脚本来跑就行。

2019年7月6日

使用 Webpack + Mocha 进行单元测试（一）
我厂产品经过两年的打磨，目前功能基本稳定了，接下来的工作重点是用测试保证质量。除了继续丰富 E2E 测试，我还计划添加一些单元测试，用来确保一些重要函数和类正常工作。

所以就要选择框架。开始想试试近期比较热门的 Jest，找了些文章看了看，发现也没啥吸引我的特色，E2E 和 UI 我厂的 Navlang 目前独步江湖，无出其右者，考虑到以前用 Mocha 写过一些单元测试，所以决定继续用 Mocha。

但是已经很长时间没写了，所以想先研究下工具链。如果只是单文件的话，直接 mocha test.js 就好；如果测试文件用了 ESM，那么加上 @babel/register 也就够了，mocha —require @babel/register test.js。

但是我们项目用到了 Vue，还用 Webpack 里的 resolve 定义了很多目录，所以为了能够兼容项目代码，我必须要 Mocha 结合 Webpack，用这个关键词一搜索，得到两个结论：mocha-webpack 和 mocha-loader。

前者已经一年多没更新了，而且要求 mocha@5，所以我就不想用了。转过头研究 mocha-loader，经过反复试验，加上阅读源码，我得出结论：

mocha-loader 的目标是在 Webpack 里集成测试，比如边开发边测试，并不是我想要的。我想要的是：打包测试内容，整合测试框架，方便用户在 CI 系统里集中进行测试。

所以我真正需要的，其实是：
1. 创建一个独立的 webpack 配置文件，用来打包单元测试
2. 打包后执行测试，返回测试结果
基本上，今天大半天的工作是白费了。mocha-loader 的作者应该把目的写在 README 里的……
2019年6月25日

标签： mocha

解决 mocha 测试时 `cannot use import statement outside a module` 错误，以及配置 travis

使用 Webpack + Mocha 进行单元测试（二）

使用 Webpack + Mocha 进行单元测试（一）