使用 TypeScript 的 Mocha/Chai（2023 年更新）

tsParticles - TypeScript 粒子效果器

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

我在 2020 年写了一篇文章，介绍如何在 TypeScript 项目中使用 Mocha/Chai，我在tsParticles中使用它（如果你喜欢，请点个赞🌟，它是免费的👀）。

tsparticles / tsparticles

tsParticles - 轻松创建高度可定制的 JavaScript 粒子特效、彩带爆炸和烟花动画，并将其用作网站的动画背景。提供适用于 React.js、Vue.js（2.x 和 3.x）、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 和 Web Components 的即用型组件。

tsParticles - TypeScript 粒子效果器

一个轻量级的 TypeScript 粒子系统库。它无依赖 (*)，支持浏览器，并兼容 React.js、Vue.js（2.x 和 3.x）、Angular、Svelte、jQuery、Preact、Inferno、Riot.js、Solid.js 和 Web Components。

新要求

之前的包裹内容如下：



npm install chai mocha ts-node @types/chai @types/mocha --save-dev

但我现在建议安装这些。



npm install chai mocha ts-node cross-env @types/chai @types/mocha --save-dev

如果你看不出区别，我添加cross-env了依赖项。

命令test也发生了变化，使用了在所有环境下都能正常工作的命令cross-env。env

旧命令是：



"test": "env TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\" }' mocha -r ts-node/register 'tests/**/*.ts'"

新的是：



"test": "cross-env TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\" }' mocha -r ts-node/register 'tests/**/*.ts'"

或者，您也可以使用此命令为测试创建自定义 tsconfig 文件。



"test": "env TS_NODE_PROJECT='./tsconfig.test.json' mocha -r ts-node/register 'tests/**/*.ts'"

如果想要更简洁的命令，可以创建一个.mocharc.json类似这样的文件：



{
  "extension": [
    "ts"
  ],
  "spec": "tests/**/*.ts",
  "require": [
    "jsdom-global/register",
    "ts-node/register",
    "source-map-support/register"
  ],
  "recursive": true
}

以及该命令



"test": "cross-env TS_NODE_PROJECT='./tsconfig.test.json' mocha"

覆盖范围

从那以后，我开始使用这个软件包nyc，它对于查看有多少代码被测试覆盖非常有用。

它使用起来非常方便，而且不会干扰mocha或chai。

安装方法如下：



npm install nyc --save-dev

你可以nyc直接nyc在前面加上mocha. 像这样：



"test": "cross-env TS_NODE_PROJECT='./tsconfig.test.json' nyc mocha"

现在运行测试时，您将看到一个表格，其中包含测试调用的每个文件，以及未覆盖的行和百分比。