react依赖讲解

目录

• 依赖文件
• @testing-library/jest-dom
  • 背景：
  • 解决方案 @testing-library/jest-dom
    • api
• @testing-library/react
  • 背景
  • 解决方案 @testing-library/react
  • 安装

依赖文件

dependencies:{
    "@date-io/date-fns":"",//日期格式化工具
    "@material-ui/core":"",//ui组件核心包
    "@material-ui/icons":"",//ui图标
    "@material-ui/pickers":"",//ui日期组件
    "@reduxjs/toolkit":"",//状态管理
    "@testing-library/jest-dom":"",//测试工具库
    "@testing-library/react":"",//测试相关,提高测试效率
    "@testing-library/user-event":"",//测试时，模拟事件动作的
    "axios":"",//异步请求的
    "clsx":"",//组件分配类名，与样式相关
    "date-fns":"",//日期组件
    "date-fns-tz":"",//日期，时间控件
    "decimal.js":"",//js数值计算相关
    "event-source-polyfill":"",//协议请求相关
    "file-saver":"",//文件保存相关
    "final-form":"",//React Final Form是一个高性能的基于订阅的表单状态管理工具，用于Final Form的精简React包装器，是使用Observer模式的基于订阅的表单状态管理库。当表单状态更改时，React Final Form能重新渲染仅需要更新的组件
    "final-form-calculate":"",//配合final-form使用，定义和描述表单字段以及其更新方式。
    "final-form-set-field-data":"",//表单字段设置数据相关
    "i18next":"",//国际化
    "jest-junit":"",//可以创建jest xml的生成器
    "jest-sonar":"",// a sonar reporter for jest
    "js-big-decimal":"",//较大数据，高精度计算插件
    "loadsh":"",//是一个一致性、模块化、高性能的 JavaScript 实用工具库
    "material-table":"",//A simple and powerful Datatable for React based on Material-UI Table with some additional features
    "memoize-one":"",//A memoization library that only caches the result of the most recent arguments.
    "miragejs":"",//Mirage 是一个可让前端开发人员模拟后端 API 的 JavaScript 库
    "mocker-data-generator":"",//数据库模拟数据生成
    "mocksse":"",//mock接口测试相关
    "moment":"",//JavaScript 日期处理类库
    "moment-timezone":"",//JavaScript 日期处理类库
    "nanoid":"",//nanoid库和uuid库一样都可以生成uuid,但是nanoid相比uuid要更轻量级
    "prop-types":"",//Runtime type checking for React props and similar objects
    "qs":"",//一个查询字符串解析和字符串化库
    "rc-pagination":"",//pagination ui component for react
    "react":"",
    "react-app-polyfill":"",//浏览器兼容配置相关
    "react-beautiful-dnd":"",//组件拖拽
    "react-csv":"",//从给定数据生成 CSV 文件。此数据可以是数组数组、文字对象数组或字符串
    "react-day-picker":"",//日期组件
    "react-dom":"",
    "react-dropzone":"",//简单的 React 钩子为文件创建一个符合 HTML5 的拖放区。
    "react-final-form":"",//React Final Form 是 Final Form 的一个瘦 React 包装器，它是一个基于订阅的表单状态管理库，使用观察者模式，因此只有需要更新的组件会随着表单状态的变化而重新渲染。
    "react-helmet":"",//React Helmet是一个HTML文档head管理工具,管理对文档头的所有更改
    "react-i18next":"",//国际化相关
    "react-lottie":"",//将动画添加到react中
    "react-placeholder":"",//React占位符 一个React组件,可以在内容加载时轻松地用漂亮的占位符复制页面
    "react-redux":"",//官方绑定库，使得react可以从store中读取状态值
    "react-router-dom":"",//您访问路由器的状态并从组件内部执行导航
    "react-scripts":"",//react命令相关的插件
    "react-textarea-autosize":"",//textarea 组件的插入式替换，它会随着内容的变化自动调整 textarea 的大小
    "react-toastify":"",//提示框相关的
    "recharts":"",//react构建D3图标相关
    "redux":"",
    "url-parse":"",//从 Node.js 中了解的 url 接口和最新浏览器中可用的新 URL 接口
    "uuid":"",//uuid生成器
    "web-vitals":""//提高和检测页面加载性能相关的
}，
devDependencies:{
    "@testing-library/react-hooks":"",//简单而完整的 React 挂钩测试实用程序，鼓励良好的测试实践
    "cross-env":"",//通过js在平台设置不同的环境变量的工具
    "env-cmd":"",//一个简单的节点程序，用于使用 env 文件中的环境执行命令
    "eslint":"",//前端编程规范
    "eslint-config-airbnb":"",//airbnb编码规则
    "eslint-config-prettier":"",//关闭所有不必要或可能与 [Prettier] 冲突的规则.请注意，此配置仅关闭规则，因此仅将其与其他配置一起使用才有意义.
    "eslint-plugin-import":"",//该插件旨在支持ES2015 +（ES6 +）导入/导出语法的检查，并防止文件路径和导入名称拼写错误的问题
    "eslint-plugin-jsx-a11y":"",
    "eslint-plugin-prettier":"",//将 Prettier 作为 ESLint 规则运行，并将差异报告为单个 ESLint 问题
    "eslint-plugin-react":"",//为 eslint 反应特定的 linting 规则
    "eslint-plugin-react-hooks":"",//这个 ESLint 插件强制执行 Hooks 规则
    "http-proxy-middleware":"",//前端跨域调试工具
    "jest-canvas-mock":"",//模拟测试画布
    "jest-sonar-reporter":"",
    "prettier":"",//是一个可配置化的代码美化（格式化）工具，往往用于统一项目中的代码风格
    "run-script-os":"",//您将能够在 npm 脚本中使用特定于操作系统的操作
}

@testing-library/jest-dom

背景：

您想使用 jest 编写测试来断言关于 DOM 状态的各种事情。 作为该目标的一部分，您希望避免这样做时出现的所有重复模式。 检查一个元素的属性、它的文本内容、它的 css 类，你可以命名它

解决方案 @testing-library/jest-dom

@testing-library/jest-dom 库提供了一组自定义的 jest 匹配器，您可以使用它们来扩展 jest。 这些将使您的测试更具声明性，更易于阅读和维护

api

• toBeDisabled
• toBeEnabled
• toBeEmptyDOMElement
• toBeInTheDocument
• toBeInvalid
• toBeRequired
• toBeValid
• toBeVisible
• toContainElement
• toContainHTML
• toHaveAccessibleDescription
• toHaveAccessibleName
• toHaveAttribute
• toHaveClass
• toHaveFocus
• toHaveFormValues
• toHaveStyle
• toHaveTextContent
• toHaveValue
• toHaveDisplayValue
• toBeChecked
• toBePartiallyChecked
• toHaveErrorMessage

@testing-library/react

简单而完整的 React DOM 测试实用程序

背景

你想为你的 React 组件编写可维护的测试。 作为此目标的一部分，您希望您的测试避免包含组件的实现细节，而是专注于让您的测试为您提供预期的信心。 作为其中的一部分，您希望您的测试库从长远来看是可维护的，因此组件的重构（对实现的更改但不是功能的更改）不会破坏您的测试并减慢您和您的团队的速度

解决方案 @testing-library/react

React 测试库是一个用于测试 React 组件的非常轻量级的解决方案。 它在 react-dom 和 react-dom/test-utils 之上提供了轻量级的实用功能，以鼓励更好的测试实践。 其主要指导原则是 ：
你的测试与你的软件使用方式越相似，它们能给你的信心就越大。

安装

安装到devDependencies下：

npm install --save-dev @testing-library/react

这个库需要依赖安装 react 和 react-dom
这个库可以被enzyme替换。