高端娱乐网站建设,外贸网站seo优化,温州网站建设最新报价,网站建设:化工文章目录 一、项目起航#xff1a;项目初始化与配置二、React 与 Hook 应用#xff1a;实现项目列表三、TS 应用#xff1a;JS神助攻 - 强类型四、JWT、用户认证与异步请求五、CSS 其实很简单 - 用 CSS-in-JS 添加样式六、用户体验优化 - 加载中和错误状态处理七、Hook… 文章目录 一、项目起航项目初始化与配置二、React 与 Hook 应用实现项目列表三、TS 应用JS神助攻 - 强类型四、JWT、用户认证与异步请求五、CSS 其实很简单 - 用 CSS-in-JS 添加样式六、用户体验优化 - 加载中和错误状态处理七、Hook路由与 URL 状态管理八、用户选择器与项目编辑功能九、深入React 状态管理与Redux机制十、用 react-query 获取数据管理缓存十一、看板页面及任务组页面开发十二、自动化测试1.简介2.传统单元测试3.自动化测试 hook4.自动化测试组件 学习内容来源React React Hook TS 最佳实践-慕课网 相对原教程我在学习开始时2023.03采用的是当前最新版本
项版本react react-dom^18.2.0react-router react-router-dom^6.11.2antd^4.24.8commitlint/cli commitlint/config-conventional^17.4.4eslint-config-prettier^8.6.0husky^8.0.3lint-staged^13.1.2prettier2.8.4json-server0.17.2craco-less^2.0.0craco/craco^7.1.0qs^6.11.0dayjs^1.11.7react-helmet^6.1.0types/react-helmet^6.1.6react-query^6.1.0welldone-software/why-did-you-render^7.0.1emotion/react emotion/styled^11.10.6
具体配置、操作和内容会有差异“坑”也会有所不同。。。 一、项目起航项目初始化与配置 一、项目起航项目初始化与配置 二、React 与 Hook 应用实现项目列表 二、React 与 Hook 应用实现项目列表 三、TS 应用JS神助攻 - 强类型 三、 TS 应用JS神助攻 - 强类型 四、JWT、用户认证与异步请求 四、 JWT、用户认证与异步请求(上) 四、 JWT、用户认证与异步请求(下) 五、CSS 其实很简单 - 用 CSS-in-JS 添加样式 五、CSS 其实很简单 - 用 CSS-in-JS 添加样式(上) 五、CSS 其实很简单 - 用 CSS-in-JS 添加样式(下) 六、用户体验优化 - 加载中和错误状态处理 六、用户体验优化 - 加载中和错误状态处理(上) 六、用户体验优化 - 加载中和错误状态处理(中) 六、用户体验优化 - 加载中和错误状态处理(下) 七、Hook路由与 URL 状态管理 七、Hook路由与 URL 状态管理(上) 七、Hook路由与 URL 状态管理(中) 七、Hook路由与 URL 状态管理(下) 八、用户选择器与项目编辑功能 八、用户选择器与项目编辑功能(上) 八、用户选择器与项目编辑功能(下) 九、深入React 状态管理与Redux机制 九、深入React 状态管理与Redux机制(一) 九、深入React 状态管理与Redux机制(二) 九、深入React 状态管理与Redux机制(三) 九、深入React 状态管理与Redux机制(四) 九、深入React 状态管理与Redux机制(五) 十、用 react-query 获取数据管理缓存 十、用 react-query 获取数据管理缓存上 十、用 react-query 获取数据管理缓存下 十一、看板页面及任务组页面开发 十一、看板页面及任务组页面开发一 十一、看板页面及任务组页面开发二 十一、看板页面及任务组页面开发三 十一、看板页面及任务组页面开发四 十一、看板页面及任务组页面开发五 十一、看板页面及任务组页面开发六 十二、自动化测试
1.简介
目的
防止出现“新代码破坏旧代码”的无限循环让开发过程不再战战兢兢。
分类
单元测试传统单元测试、组件测试、hook测试 集成测试模块级别 e2e测试end页面级别
2.传统单元测试
之前初始化项目的时候默认安装了几个相关依赖
testing-library/jest-dom: ^5.16.5,
testing-library/react: ^13.4.0,
testing-library/user-event: ^13.5.0,再补充几个
npm i testing-library/react-hooks msw -D # --force单元测试需要隔离环境因此需要使用 msw 做 mock 使用 接下来写一个单元测试
新建 src\__tests__\http.ts用来测试 src\utils\http.ts
import { setupServer } from msw/node;
import { rest } from msw;
import { http } from utils/http;const apiUrl process.env.REACT_APP_API_URL;const server setupServer();// jest 是对react最友好的一个测试库
// beforeAll 代表执行所有的测试之前先来执行一下回调函数
beforeAll(() server.listen());// 每一个测试跑完以后都重置mock路由
afterEach(() server.resetHandlers());// 所有的测试跑完后关闭mock路由
afterAll(() server.close());test(http方法发送异步请求, async () {const endpoint test-endpoint;const mockResult { mockValue: mock };server.use(rest.get(${apiUrl}/${endpoint}, (req, res, ctx) res(ctx.json(mockResult))));const result await http(endpoint);expect(result).toEqual(mockResult);
});test(http请求时会在header里带上token, async () {const token FAKE_TOKEN;const endpoint test-endpoint;const mockResult { mockValue: mock };let request: any;server.use(rest.get(${apiUrl}/${endpoint}, async (req, res, ctx) {request req;return res(ctx.json(mockResult));}));await http(endpoint, { token });expect(request.headers.get(Authorization)).toBe(Bearer ${token});
});执行 npm run test, 启动单元测试, 执行结果如下 PASS src/__tests__/http.ts (5.495 s)√ http方法发送异步请求 (57 ms)√ http请求时会在header里带上token (7 ms)Test Suites: 1 passed, 1 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 7.61 s
Ran all test suites related to changed files.Watch Usage: Press w to show more.3.自动化测试 hook
新建 src\__tests__\use-async.ts
import { useAsync } from utils/use-async;
import { act, renderHook } from testing-library/react-hooks;const defaultState: ReturnTypetypeof useAsync {stat: idle,data: null,error: null,isIdle: true,isLoading: false,isError: false,isSuccess: false,run: expect.any(Function),setData: expect.any(Function),setError: expect.any(Function),retry: expect.any(Function),
};const loadingState: ReturnTypetypeof useAsync {...defaultState,stat: loading,isIdle: false,isLoading: true,
};const successState: ReturnTypetypeof useAsync {...defaultState,stat: success,isIdle: false,isSuccess: true,
};test(useAsync 可以异步处理, async () {let resolve: any, reject;const promise new Promise((res, rej) {resolve res;reject rej;});const { result } renderHook(() useAsync());expect(result.current).toEqual(defaultState);let p: Promiseany;act(() {p result.current.run(promise);});expect(result.current).toEqual(loadingState);const resolvedValue { mockedValue: resolved };await act(async () {resolve(resolvedValue);await p;});expect(result.current).toEqual({...successState,data: resolvedValue,});
});4.自动化测试组件
新建 src\__tests__\mark.tsx:
import React from react;
import { render, screen } from testing-library/react;
import { Mark } from components/mark;test(Mark 组件正确高亮关键词, () {const name 物料管理;const keyword 管理;render(Mark name{name} keyword{keyword} /);expect(screen.getByText(keyword)).toBeInTheDocument();expect(screen.getByText(keyword)).toHaveStyle(color: #257AFD);expect(screen.getByText(物料)).not.toHaveStyle(color: #257AFD);
});部分引用笔记还在草稿阶段敬请期待。。。
