jest单元测试支持ts文件方案

jest配置

jest配置如下：

module.exports = {
    preset: 'ts-jest',

    testEnvironment: 'node',

    testMatch: [
        "**/__tests__/**/*.[jt]s?(x)",
        "**/?(*.)+(spec|test).[tj]s?(x)",
        "**/test/**/*.[jt]s?(x)",
    ],

    testPathIgnorePatterns: [
        '/node_modules/',
    ],

    collectCoverageFrom: [
        'src/**/*.{js,jsx,ts,tsx}',
        '!src/**/*.d.ts',
    ],

    moduleDirectories: [
        'node_modules'
    ],

    moduleFileExtensions: [
        'js',
        'jsx',
        'json',
        'node',
    ],


    transform: {
        "\\.[jt]sx?$": "babel-jest",
    },

    // babelrc: true
};

额外配置说明：

• 其中transform增加了jest的es6处理能力。默认情况下jest只能处理require文件，当配置tranform后可以对impoet文件进行处理
• prese和testEnvironment为jest增加ts处理能力
• 注意jest文件应当放在需要进行单元测试的目录，jest将按照其配置文件所子目录按照一定顺序进行文件解析

但即使增加了ts处理能力，仍然不能对引入文件的interface等作出正确解析。

tsconfig

鉴于以上问题，使用tsc将引入文件转化为js进行处理。为了不影响项目的ts处理，将该ts配置命名为tsconfig.test.json

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "outDir": "./test",
        "esModuleInterop": true
    },
    "include": ["pages/Board/Chart/chartUtils.ts"],
    "exclude": ["node_modules"]
}

并在测试命令当中指定该测试ts文件所在位置

"test": "tsc --project ./web/tsconfig.test.json && jest"

至此，当运行test命令的时候会先将引入文件转成js文件，并将该js文件输出到测试目录当中，避免对源文件的侵入性

然后在测试文件当中引入已经转换好的待测试文件即可

写在结尾

• 本文仅提供jest的ts支持思路中的某一种，并假定你已经具备：
  • 独立配置tsconfig的能力
  • 独立配置jest的能力
  • 如果你的代码涉及esnext可能需要独立配置babel的能力

暂时不太了解以上方案推荐去看一下官方文档就行了