简介
在前端开发中，使用测试框架对代码进行测试是必不可少的一环。而 Mocha 是一款十分受欢迎的 JavaScript 测试框架，相信很多前端工程师都已经有所接触。
但要使用 Mocha 进行测试，还需要使用 TypeScript 实现代码的静态类型检查。而 @northbrook/preset-ts-mocha 便是一个可以极大简化这个过程的 npm 包。
本文将为大家介绍如何使用 @northbrook/preset-ts-mocha 进行 TypeScript 与 Mocha 测试的配置与使用。在本篇文章中，我们将详细说明该 npm 包的特点，如何安装以及如何使用。
@northbrook/preset-ts-mocha 的特点
@northbrook/preset-ts-mocha 是一款基于 TypeScript 和 Mocha 的测试助手。它具有以下特点：
- 它能够通过自动完成来检测和跟踪所有测试。
- 具有配置简单、灵活和易于使用等特点，可以将其轻松地集成到你的测试框架中。
安装 @northbrook/preset-ts-mocha
你可以通过以下命令安装 @northbrook/preset-ts-mocha ：
npm install -D @northbrook/preset-ts-mocha
如何使用 @northbrook/preset-ts-mocha
接下来，我们将逐步引导您了解如何使用 @northbrook/preset-ts-mocha 进行 TypeScript 与 Mocha 测试的配置与使用。
配置
首先，你需要在根目录下新建一个 northbrook.config.ts 文件，然后将以下配置复制到文件中：
import * as path from 'path'
module.exports = {
preset: '@northbrook/ts-mocha',
testMatch: [path.join(process.cwd(), '**/*.test.ts')],
}这里我们使用了 @northbrook/ts-mocha 作为 preset 。接着，我们将检测所有匹配 *.test.ts 的文件以进行测试。
添加测试文件
接下来，我们需要添加测试文件。假设我们现在需要测试 ./src 文件夹下的代码，它的目录结构如下：
|- src |- utils |- helper.ts
我们需要在 ./src 下新建一个文件夹 __tests__ ，然后在其中新建以 *.test.ts 结尾的测试文件。
例如，我们要对 helper.ts 进行测试，则可以在 __tests__ 下新建一个文件 helper.test.ts 。
import { expect } from 'chai'
import { helper } from '../utils/helper'
describe('helper', () => {
it('multiply should work properly', () => {
expect(helper.multiply(3, 4)).to.equal(12)
})
})这里我们使用了 Chai 作为断言库，并使用 ES6 模块规范，需要注意的是我们在导入时使用了 ../ ，这是因为我们的测试文件和被测代码并不在同一个目录下。
接下来，我们可以在 package.json 文件的 scripts 中添加以下代码：
"scripts": {
"test": "tsc --build tsconfig.test.json && mocha --require ts-node/register tests/**/*.test.ts"
}这里 tsc 命令会转换 TypeScript 代码并生成 JavaScript 代码，其所需的 tsconfig.test.json 这个文件我们会在下一节中讲到。
注意，tests/**/*.test.ts 表示所有 test.ts 文件，当你修改了一个测试文件时，该测试文件就会被自动运行，这样可以提高开发效率。
添加 tsconfig.test.json
添加了 tsconfig.test.json 文件后，Webpack 会使用该文件来构建测试代码。在根目录中添加下列 JSON 代码：
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "dist",
"sourceMap": true
},
"include": ["./src/**/__tests__/**/*", "./tests/**/*"]
}tsconfig.json 是你项目的主要 TypeScript 配置文件，而 tsconfig.test.json 是创建测试的 TypeScript 配置文件。现在，tsc 命令就能够找到所有需要被转换的 TypeScript 文件了。
实际上，tsconfig.test.json 所完成的工作就是：
- 将所有源文件放入 src 目录下
- 执行的测试文件位于 tests 下
- 最终输出到目录 dist 下
如果你必须改变测试目录，将 ./src/**/__tests__/**/* 更改为适当的目录即可。
运行测试
最后，我们需要运行我们的测试。通过运行以下命令：
npm run test
它将执行 TypeScript 和 Mocha 测试，并在成功后将所有测试结果返回到控制台。
总结
@northbrook/preset-ts-mocha 帮助你快速、易于使用地将 TypeScript 与 Mocha 集成，如果你的项目中需要进行 TypeScript 和 Mocha 测试，那么 @northbrook/preset-ts-mocha 就是一款值得一试的 npm 包。
在使用时，你只需要在根目录下配置一个 .northbrook.config.js 文件，然后创建你需要的测试文件，配置好命令即可运行测试。
希望本文能够帮助到正在进行 TypeScript 和 Mocha 测试的前端工程师们，让大家能够顺利地完成测试工作，不断提高开发效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcd967216659e244a69