React16源码构建和单元测试

293 阅读1分钟

下载源码:
git clone https://github.com/facebook/react.git

  • 删除electron的依赖
    • packages/react-devtools/package.json
    • yarn.lock
  • 安装依赖,使用yarn,不要使用npm/cnpm
   yarn install # 安装依赖
   yarn build  # 进行构建,构建后生成build/dist目录
  • jest进行单元测试/调试,切换到react目录

浏览器测试

npx cross-env NODE_ENV=development \
 jest --config ./scripts/jest/config.source.js \
./packages/react/src/__tests__/ReactElementClone-test.js

浏览器调试

# 再浏览器调试,现在命令行执行一次,执行之后会挂起,找打文件,加入断点,第二次就可以调试
 npx cross-env NODE_ENV=development \
 node --inspect-brk node_modules/jest/bin/jest.js \
 --config ./scripts/jest/config.source.js --runInBand \
 ./packages/react/src/__tests__/ReactES6Class-test.js

vscode里调试

配置launch.json

{
   "version": "0.2.0",
   "configurations": [


       {
           "name": "Debug Jest Tests",
           "type": "node",
           "request": "launch",
           "runtimeArgs": [
               "--inspect-brk",
               "${workspaceRoot}/node_modules/.bin/jest",
               "--runInBand",
               "--config",
               "./scripts/jest/config.source.js",
               "./packages/react/src/__tests__/ReactElementClone-test.js"
           ],
           "env":{
               "NODE_ENV":"development"
           },
           "port": 9229
       }
   ]
}

浏览器测试

浏览器调试

vscode测试