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脚手架搭建的，首先在浏览器执行：

1. 在认为可能失败并输入的测试中插入一个 debugger。这将作为断点
2. 打开 Chrome 并输入地址栏：chrome://inspect，
3. 点击 Open dedicated DevTools for Node会弹出一个单独的 devtools 窗口，前端同学最熟悉不过了：

1. 执行命令 node --inspect node_modules/jest/bin/jest --runInBand
2. 发现各种错误解决如下：
   1.  手动安装一下jest, npm install jest;
   2. 需要配置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",

        }