给 react 添加测试

发表于 分类于

记录给react hook添加测试过程中踩过的坑

项目基于react+ts

jest

首先参考官方安装以下依赖（项目不是使用CRA创建）
https://www.jestjs.cn/docs/tutorial-react

yarn add --dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer

jest – 测试框架
babel-jest – 测试时对代码进行预处理
@babel/preset-env – babel插件，根据环境（目标平台）转换js代码
@babel/preset-react – babel插件，转换jsx
react-test-renderer – 将react组件转成js对象，描述dom

为了顺利完成测试，还有几个库需要安装。。。

yarn add --dev @testing-library/react @testing-library/react-hooks @types/jest

@testing-library/react – 封装了一些操作，方便测试，例如查找元素、清除
@testing-library/react-hooks – 测试hook用，避免需要写一个组件来测试(react hook要求在函数组件中使用)
@types/jest – jest的类型说明，避免eslint报错

添加配置

在package.json的script中添加test: jest
在eslint的配置文件中添加

{
  "env": {
    "jest": true
  }
}

若使用了webpack的resolve.modules或者resolve.alias，在测试时会报找不到文件，根据实际情况在package中添加如下配置

{
  "jest": {
    "moduleDirectories": [
      "node_modules",
      "src"
    ]
  }
}

webpack中若使用了环境变量，jest也需要配置

{
  "jest": {
    "globals": {
      "__SERVER_ENV__": "dev"
    }
  }
}

typedoc

地狱难用，文档没有示例不清晰，真的难用。暂时没有必要生成文档，此处暂缓。
推荐使用v0.19版本，勉强能用。

typedoc-plugin-sourcefile-url
typedoc-plugin-external-module-name 将同一文件夹下的不同模块合为一个模块