网站设计师是什么,网站备案 是域名还是空间,最干净在线代理,平台式网站模板下载使用Jest测试Cesium源码 介绍环境Cesium安装Jest安装Jest模块包安装babel安装Jest的VSC插件 测试例子小结 介绍
在使用Cesium时#xff0c;我们常常需要编写自己的业务代码#xff0c;其中需要引用Cesium的源码#xff0c;这样方便调试。此外#xff0c;目前代码中直接使用… 使用Jest测试Cesium源码 介绍环境Cesium安装Jest安装Jest模块包安装babel安装Jest的VSC插件 测试例子小结 介绍
在使用Cesium时我们常常需要编写自己的业务代码其中需要引用Cesium的源码这样方便调试。此外目前代码中直接使用ES6的模块(Import等语法)而不是之前的CommonJS方式。
本文介绍如何使用流行的前端测试工具jest来实现自动化测试。此处暂时使用nodejs来调试代码不涉及浏览器。
Cesium自身包含总多的测试代码(Spec文件夹下)并使用Jasmine来运行测试。不过它的测试都是所有文件打包好后再测试的不便于我们单独测试某一个类。因此本文使用Jest来单独进行测试。
环境
Cesium :110版本可直接从官方网站上下载。https://cesium.com/downloads/开发环境: Visual Studio Code下面简称VSCnodejs环境
Cesium安装
Cesium的安装和使用此处仅做简单介绍如果是初学者可以搜索相关的教程。
将压缩包解压缩后使用VSC可打开。安装相关包:
npm installnpm install命令则根据package.json中的依赖安装相应的包新创建node_modules目录。
修改package.json中的内容将scripts中的test:“gulp test --production修改为test2”:“gulp test --production”(仅作为备份test2名字无实际意义)。将原来的test内容修改为jest”以便后续使用jest进行测试。 Jest
Jest 是由 Facebook 推出的一个前端测试框架具有许多非常好的特性譬如执行速度快、API友好、自动监控、Snapshot、测试覆盖率、Mock等各种特性并且适用于Babel、TypeScript、Node、React、Angular、Vue等。
安装Jest模块包
在VSC终端运行命令
npm install --save-dev jest安装babel
Jest本身只支持commonjs模块不支持es6的模块因此当我们使用import引用别的模块时是不支持的。可以使用Babel包将es6模块转换为commonjs模块。
npm install --save-dev babel/core
npm install --save-dev babel/preset-env安装完babel后查看一下package.json文件下的devDependencies看看有没有babel的两个依赖包: 成功安装后还需要在项目文件夹下增加一个babel的配置文件.babelrc.json,内容如下:
{presets: [[babel/preset-env,{targets:{node:current}}]]
}安装Jest的VSC插件
在VSC的扩展里搜索Jest安装这个插件。这个插件可以让我们方便的管理和测试我们的测试算例。
测试例子
这里我们假设测试Cesium的源码里的Cartesian3类。100版本以后源码都放到packages文件夹内了。
在项目根目录下新建“mytest”目录新增Cartesian3.test.js“文件代码如下
import Cartesian3 from ../packages/engine/Source/Core/Cartesian3.js;// Cartesian3类测试
describe(Core/Cartesian3, function () {it(x分量, function () {var cartesian new Cartesian3(1.0, 2.0, 3.0);expect(cartesian.x).toBeCloseTo(1.0, 1e-10);});it(模大小, function () { var cartesian new Cartesian3(1.0, 2.0, 3.0);expect(Cartesian3.magnitude(cartesian)).toBeCloseTo(Math.sqrt(14.0), 1e-10);});
});代码里使用import命令直接引用Cesium源码文件Cartesian3.js运行时Babel自动帮我们将代码转换为commonjs代码。
describe函数和it函数都是Jest支持的。
**注意**由于我们引用的Cesium源码位于“packages/engine”文件夹内而“packages/engine”内本身有package.json文件这个文件影响Jest所以我们不需要这个文件将其改名为“package2.json”暂时保留即可
最终的代码界面如下
我们可以看到在测试代码的旁边出现了测试提示按钮使用绿色或者红色表示测试的成功与否。
打开VSC左侧的“测试”按钮即可打开“测试”页面显示各个测试文件。同时在代码的左侧右键可“运行测试”或者“调试测试”。
调试测试后生成测试结果。见下图。 小结
本文我们通过安装Jest相关包通过可视化的方式进行单个测试文件的测试测试文件中引用了Cesium的源码便于我们调试时查看源代码的运行。此处仅使用nodejs测试相关代码与浏览器无关。
