使用jest测试typescript

在react项目中使用jest，测试typescript代码时遇到问题，已经解决，现做记录。经供参考，实际情况可能有出入。

安装相关的插件

1.首先要先安装jest
2.安装typescript
3.安装 "ts-jest": "^26.5.3"(我装的是这个版本)

添加配置文件

在根目录下添加tsconfig.json 文件
配置如下

{
  "compilerOptions": {
    "outDir": "./app/dist/",
    "module": "commonjs",
    "target": "es2015",
    "sourceMap": true,
    "jsx": "react",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowJs": false,
    "lib": ["es2015", "es2017", "es2016", "dom"]
  },
  "include": ["app/**/*.ts", "app/**/*.tsx", "./**/*.ts", "app/main.dev.ts"],
  "exclude": ["node_modules", "dist", "test"]
}

package.json文件的配置

"jest": {
    "preset":"ts-jest",
    "testURL": "http://localhost/",
    "timers": "1000",
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/internals/mocks/fileMock.js",
      "\\.(css|less|sass|scss)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "js",
      "jsx",
      "json",
      "ts",
      "tsx"
    ],
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    },
    "transformIgnorePatterns": [
      "./node_modules/(?!(lodash-es))"
    ],
    "setupFiles": [
      "./internals/scripts/CheckBuiltsExist.js"
    ]
  },

添加测试文件

在test目录下面添加一个test.ts文件 （文件名自己顺便写的）

import {isAuthorized} from '../../app/modules/util';



describe('isAuthorized', () => {
  
  const user = [];
  const def = ['****','***'];
  test('第一种情况', () => {
    expect(isAuthorized(def, user)).toEqual(true);
  });
  test('第二种情况', () => {
    expect(isAuthorized(false, user)).toEqual(false);
  });
});

运行

有的项目直接运行可能会提示你需要先build
那就先运行yarn build
然后运行jest的脚本
在WebStorm 里面直接点击这个地方就可以运行

可能会遇到的问题

如果jest无法运行起来可能是因为不支持import *** from *** 这种导入方式
需要对babel进行配置
一个简单的解决方法是在根目录添加一个.babelrc的文件
添加下面的代码就行了

{
    "presets":[
        [
            "@babel/preset-env",{
                "targets":{
                    "node":"current"
                }
            }
        ]
    ]
}