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:['<rootDir>/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的能力

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