Cocos Creator用にJavaScriptのユニットテスト環境を構築する

Cocos Creatorでユニットテストの環境を構築したときのメモ。
※Cocos Creator用のComponentについてのテストコードは未記載

・環境
Windows 10
Cocos Creator 2.4.2
node.js 15.2.0
Jest 26.6

npmを使用するためにNode.jsをインストールする

Node.js

Cocos Creatorのプロジェクトを作成

ユニットテスト用のディレクトリを作成し
その中にCocos Creatorのプロジェクトを作成します。

UnitTestRoot
└ Sample (※Cocos Creatorのプロジェクト)
   └ assets

Babelのインストール

cd [省略]/UnitTestRoot
npm install --save-dev @babel/core @babel/preset-env

Babelの設定ファイルを作成する

UnitTestRootディレクトリにbabel.config.jsを作成

babel.config.js

module.exports = {
    presets: [
        [
            '@babel/preset-env',
            {
                'modules': 'false',
                'useBuiltIns': 'usage',
                'targets': '> 0.25%, not dead',
            }
        ]
    ],
    env: {
        test: {
            presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
        },
    },
};

Jestのインストール

　※UnitTestRoot内で実行します

npm install --save-dev jest babel-jest

package.jsonに以下を追記する

{
  "scripts": {
    "test": "jest",
    "test:coverage": "npm test -- --coverage"
  },
}

追加後のpackage.json

babel.config.jsにJest用の設定を追記する

テストのチェック

テスト用スクリプトのディレクトリを作成する

UnitTestRoot
└ Sample
└ test (※テスト用ディレクトリ）

テスト対象のスクリプト

UnitTestRoot/Sample/Scripts/sum.js

module.exports = function (a, b) {
  return a + b;
};

UnitTestRoot/Sample/assets/Scripts/Utility/StringUtil.js

export default class StringUtil {
  static zerPatting(number, digit) {
    var zero = "0";
    return (zero.repeat(digit) + number).slice(-digit);
  }
}

テストコード

UnitTestRoot/test/sum.test.js

const sum = require('../Sample/assets/Scripts/sum');

test('sum, () => {
  expect(sum(1, 2)).toBe(3);
});

UnitTestRoot/test/Utility/StringUtil.test.js

import { default as StringUtil } from "../../Sample/assets/Scripts/Utility/StringUtil";

describe("StringUtil", () => {
  test("zerPatting", () => {
    expect(StringUtil.zerPatting(1, 4)).toBe("0001");
    expect(StringUtil.zerPatting(9999, 4)).toBe("9999");
  });
});

テストの実行

※UnitTestRoot内で行う

npm test

実行結果

対象のみテストしたい場合は以下のような指定で実行できる

npm test StringUtil.test

参考サイト

www.wakuwakubank.com
qiita.com
tech.moyashidaisuke.com
slides.com