jest+enzyme针对 react16+ typescript UT代码的debug方法
在 Jest 单测中进行 debugger 目前有两种方法：
1. VSCode 提供的 Debugger 功能；
2. Chrome Node DevTools
针对第一种，直接上链接：https://github.com/microsoft/vscode-recipes/tree/master/debugging-jest-tests
其中：
- Add following Jest configuration to package.json:
"jest": {
"testEnvironment": "node"
}
Note for windows users : if node_modules/jest is not available in your project, but node_modules/jest-cli is installed (e.g. if you are using react-boilerplate) you can replace the windows attribute by this one for both launch configurations :
"windows": {
"program": "${workspaceFolder}/node_modules/jest-cli/bin/jest",
}这两处没有处理，处理后有报错，直接可以先忽略，调试有问题再增加。
然后，在VSCODE上面对应的代码出打上断点，运行 npm run test或者自己配置的测试脚本就OK了。
针对第二种，坑比较多，因为我用的是react脚手架搭建的，首先在浏览器执行：
- 在认为可能失败并输入的测试中插入一个
debugger。这将作为断点 - 打开 Chrome 并输入地址栏：
chrome://inspect， - 点击 Open dedicated DevTools for Node会弹出一个单独的 devtools 窗口，前端同学最熟悉不过了：
- 执行命令
node --inspect node_modules/jest/bin/jest --runInBand - 发现各种错误解决如下：
- 手动安装一下jest, npm install jest;
- 需要配置babel.config.js文件，相当于node在跑测试用例时需要用你这个babel去解析代码，详细配置如下：
module.exports = {
presets: [
[
"@babel/preset-env",
{
targets: {
node: "current"
}
}
],
"@babel/preset-react",
"@babel/typescript"
],
plugins: ["transform-es2015-modules-commonjs", "@babel/plugin-syntax-jsx",
"@babel/plugin-transform-runtime",
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-syntax-dynamic-import",
[
"module-resolver",
{
"alias": {
"@": "./src"
}
}
]
]
};
然后就是配置jest.config.js，详情内容如下：
module.exports = {
setupFiles: ['./src/setupTests.js'],
snapshotSerializers: ['enzyme-to-json/serializer'],
transformIgnorePatterns: [ // 转换时需要忽略的文件
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
],
moduleNameMapper: {
"\\.(css|less|scss)$": "identity-obj-proxy"
},
transform: {
'^.+\\.(ts|tsx)?$': 'ts-jest',
"^.+\\.js$": "babel-jest"
}
}
配置好后，会有很多需要安装的东东，废话不多说,package.json如下：
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
]
],
"dependencies": {
"@babel/cli": "^7.10.5",
"@babel/preset-stage-0": "^7.8.3",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"@types/react": "^16.9.38",
"@types/react-dom": "^16.9.8",
"antd": "^4.3.4",
"axios": "^0.19.2",
"babel-plugin-module-resolver": "^4.0.0",
"jest": "^26.1.0",
"jest-cli": "^26.1.0",
"jest-environment-jsdom": "^26.1.0",
"lodash": "^4.17.15",
"react": "^16.13.1",
"react-axios": "^2.0.3",
"react-dom": "^16.13.1",
"react-redux": "^7.2.0",
"react-scripts": "3.4.1",
"react-window": "^1.8.5",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"rx": "^4.1.0",
"typescript": "^3.9.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test1": "react-scripts test",
"test": "jest --notify --watchman=false",
"eject": "react-scripts eject",
"lint": "eslint --ext .js --ext .tsx src",
"lint-fix": "eslint --fix --ext .js --ext .tsx src"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/plugin-proposal-decorators": "^7.10.1",
"@testing-library/jest-dom": "^4.2.4",
"@types/classnames": "^2.2.10",
"@types/jest": "^26.0.5",
"@types/lodash": "^4.14.155",
"@types/react-redux": "^7.1.9",
"@types/react-window": "^1.8.2",
"@types/rx": "^4.1.2",
"@typescript-eslint/eslint-plugin": "^3.5.0",
"@typescript-eslint/parser": "^3.5.0",
"babel-eslint": "^10.1.0",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"enzyme-to-json": "^3.5.0",
"eslint": "^6.6.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.3",
"eslint-plugin-react-hooks": "^4.0.5",
"prettier": "^2.0.5",
"ts-jest": "^26.1.3"
}
}
推荐使用第一种，第二种看个人喜好
因为最近在做umi，补充一下umi-test的DEBUG方法：
基本使用第一种VSCODE自带的DEBUGGER，launch.js里面的window:program修改一下：
"windows": {
"program": "${workspaceFolder}/node_modules/umi/bin/umi test",
}