使用mocha测试TypeScript文件

如何在mocha中测试TypeScript文件

mocha 是我比较喜欢的一款的单元测试框架。使用mocha直接测试TypeScript文件,需要结合babel,preset-env,preset-typescript以及babel-register。

// linked-list.ts
export default class LinkedList(){

}
// ./test/linked-list.js
require('@babel/register')({
    presets: [
        ['@babel/preset-env', { modules: 'commonjs'}],
        ['@babel/preset-typescript']
    ],
    extensions: ['.ts']
})

const LinkedList = require('./src/linked-list.ts')

describe('#test', function(){
    it('#1', function(){
        let linkedList = new LinkedList()
        ...
    })
})

需要注意的是

  • babel-register 会将参数中的配置和bablerc中的配置共同起作用
  • preset-typescript 不使用tsconfig.json中的编译选项
  • 使用preset-typescript的时候,大多数的编译选项可以通过 babel 来实现

然后在命令行中执行

mocha ./test/linked-list.js

发现报如下错误

LinkedList is not a constructor

排查之后发现,在测试文件./test/linked-list.js 中

const LinkedList = require('./src/linked-list.ts')

导入的LinkedList真实为

{ default: function LinkedList(){}, __esModule: true }

所以我应该在测试文件中加上

const LinkedList = require('./src/linked-list.ts').default

才能正确执行。

但是上面的写法很麻烦,而且很蠢。很显然babel将我的ts文件从ES module 转换为 commonjs的时候,是将export default 的内容挂载module.exports.default上面,而不是我一开始期望的 export default === module.exports =

babel v6之后ES module TO commonjs

在babel v6之后, export default 导出的内容不再使用module.exports = 导出。

// es6.js
export default function sum(){}

// commonjs
exports.__module = true
exports['default'] = function sum(){}

exports.__module 用来告诉打包工具(基本上这是所有打包工具的事实标准)当前模块是从ES module 转换过来的,完全兼容ES module。所以当使用import 导入这样一个commonjs模块的时候,应该使用__importDefault helper来加载

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
}
exports.__esModule = true;
var bar_1 = __importDefault(require("bar"));

这也是我们前面必须加上.default的原因。

但是这样子很麻烦,而且很蠢。如果我们还想保持es5 之前的模块交互逻辑,也就是export default导出的内容使用commonjs module.exports = 默认导出。我们可以使用 babel-plugin-add-module-exports

require('@babel/register')({
    presets: [
        ['@babel/preset-env', { modules: 'commonjs'}],
        ['@babel/preset-typescript']
    ],
    plugins: ['add-module-exports'],
    extensions: ['.ts']
})

该插件会在当你的模块 只有export default 默认导出 的时候,转换为commonjs的默认导出。

// es6.js
export default function sum(){}

// commonjs
exports.__module = true
exports['default'] = function sum(){}
modules.exports = exports['default']

这样子我们就不需要加上麻烦的.default了。

是否使用默认导出

对于是否使用默认导出( export default / module.exports = ),好像越来越多的人开始持否定态度。就连javascript 的创造者Nicholas C. Zakas也表示不会 再使用默认导出 了。要知道npm上大多数的包或者模块都是使用module.exports默认导出的。

那么默认导出到底有什么弊端呢?根据尼古拉斯的说法,默认导出最重要的一个弊端是 会悄无声息地转移到其他变量,无法通过搜索代码的方式来跟踪 。这给代码阅读,排查错误造成了很大的干扰。导出的最佳实践应该是**只使用具名导出

举个例子

// linked-list.js
export default class LinkedList{}

// a.js
import list from './linked-list'

在一开始,我们知道list就是LinkedList类。但是随着项目的迭代,我们可能在多处使用了这个LinkedList类,但是我们都想a.js一样改变了这个类名,当我们想通过LinkedList全局搜索何处引用的时候,我们就已经无法得到正确的结果了。每次阅读代码的时候,我们都需要拉到头部看下这个list是从何处导入的,导入的是什么,这会严重中断我们的开发进程。

PS: export default 也是一种具名导出(named export),只不过这个名字是default.

// a.js
export default function LinkedList(){}

// b.js
import { default } from './a.js'
import LinkedList from './a.js'

// default === LinkedList
我来评几句
登录后评论

已发表评论数()

相关站点

热门文章