2024年2月24日

cocosCreator单元测试

作者 admin

一、是什么单元测试是针对一个小模块（函数、类）做的检查。检查模块在执行后，它的输出是否符合期望。简单来说，就是测试咱们写的小模块正确。

二、为什么那为什么需要单元测试呢？因为它会带来很多好处。

1、保证小模块的编写是正确的；
2、大模块、程序是由小模块组成的，这也保证了程序的质量；
3、易于重构。有了单元测试，我们可以大胆的重构代码；
4、使代码更加清晰、简洁。

很多大神已经总结过单元测试的好处了。其本质是能减轻咱们开发的工作量，使工作变得轻松。

三、代码分类我们需要在具体进行操作之前，先定义两个概念：

1、业务逻辑代码；
2、界面、用户交互代码；
3、原生代码。

在 CocosCreator 工程中，我们写的代码大致可以分为以上这几种。

3.1、业务逻辑代码业务逻辑代码主要是一些业务计算逻辑。比如：数据建模、算法、字符串或数组等API的扩展。这些代码不会涉及到任何 CocosCreator 中的 API。我们的测试重点也在于这些代码。

3.2、界面、用户交互代码凡是使用了 CocosCreator 中的 API，都可以归为此类代码。比如自定义的组件、cc.Label、cc.Sprite 等。这些代码用户展示界面、处理用户的交互行为。一般依赖于开发、专业的测试人员进行白盒测试；另外，这些代码依赖了引擎 API，所以运行这些代码时，需要引擎代码参与，这对于单元测试是一个比较大的限制。所以此类代码不在本文的讨论范围。

3.3、原生代码iOS、android 等原生代码。这些原生已经有成熟的测试工具，不在本文讨论范围。

3.4、小结经过上面的总结，可以发现，本文讨论的单元测试，由于各类限制，仅适用于业务逻辑代码部分。这会强迫你将业务代码和界面交互代码分离，这对于清洁的代码而言，也是一个好消息。接下来我们开始动手准备单元测试了。

四、测试

4.1、环境准备在单元测试前，我们需要搭建后测试的环境。主要是安装两个软件。

4.1.1、NodeJsNodeJs 是我们测试代码运行起来的环境。下载地址是：https://nodejs.org/en/download/。建议安装 14 LTS 版本。

4.1.2、npmnpm 是 js 的包管理器。上面有很多第三方的 js 库。一般而言在安装 NodeJs 时，会附带安装好 npm。

安装验证：node -v #

会输出如： v12.16.1 npm -v # 会输出如：6.14.5

4.2、开始4.2.1、CocosCreator 工程结构一个典型工程结构如下

（去掉无关的文件及目录）：

.我们写的代码一般都放到 ./assets/Script 目录下。

咱们的工程里，测试的环境有一个要求：不能对 CocosCreator 工程本身造成影响。这意味着测试代码、配置不能让 CocosCreator 感知到。

/**
 * 分割字符串
 * @param str   将会被分割的字符串 
 * @param charCount 每 `charCount` 个会被分割
 * @param divChar 分割字符。
 */
function division(str: string, charCount: number, divChar: string = ',') {
    const chars: string[] = [];
    let count = 0;
    for (let i = str.length - 1; i >= 0; --i) {
        chars.push(str[i]);

        count++;
        if (count % charCount == 0 && i !== 0) {
            chars.push(divChar);
        }
    }

    const result = chars.reverse().join('');
    return result;
}


/**
 * 使数字可读。如：1004213 -> '1,004,213'
 * @param number 
 * @param divChar 分割字条符
 */
export function readableNum(number: number, divChar = ',') {
    if (String(number).length <= 3) {
        return String(number);
    }

    if (number < 0) {
        return '-' + division(String(-1 * number), 3, divChar);
    }

    return division(String(number), 3, divChar);
}

现在来写针对该文件里的 readableNum 函数的单元测试。首页考虑的事：测试文件放到哪里呢？为了不对工程本身造成影响，不能放到 ./assets 目录下。可以在工程根目录下新建一个 test 目录，建完后，如下：

.
├── assets
│   ├── Scene
│   ├── Script
│   │   └── util
│   │       └── readableNum.ts
│   └── Texture
├── __tests__
├── creator.d.ts
├── jsconfig.json
├── project.json
└── tsconfig.json

咱们写的单元测试文件都会放到该目录下。
在 jest 中，测试文件名与被测试文件名相同，文件名中间加上 tests，比如 readableNum.ts 的测试文件名应该是：readableNum.test.ts；然后保持相同的目录结构。基于这样的规则，我们新建文件：./__tests__/util/readableNum.test.ts:
.
├── assets
│   ├── Scene
│   ├── Script
│   │   └── util
│   │       └── readableNum.ts
│   └── Texture
├── __tests__
│   └── util
│   │   └── readableNum.test.ts
├── creator.d.ts
├── jsconfig.json
├── project.json
└── tsconfig.json