1.0.2 • Published 3 years ago
fch-tool v1.0.2
组件化 - 公用工具库搭建
技术列表
- typescript
- babel
- jest
书写案例
基本要求:使用typescript书写,不需使用any,不许出现任何报错的红线现象。严格执行eslint规范。
功能
- 每个功能使用单一的文件夹书写,按照功能进行分类保证能够快熟寻找 - 后期会上storyBook
import { useState } from 'react';
type Partial<T> = {
[P in keyof T]?: T[P];
};
export function useStateStore<T>(initialState: T) {
const [state, setState] = useState(initialState);
let newState = state;
const setStateWrap = (value: Partial<T>, callback?: Function) => {
setState(state => {
newState = { ...state, ...value };
callback && callback(newState);
return newState;
});
return newState;
};
const getState = () => newState;
return {
state,
setStateWrap,
getState
};
}
测试
- 使用jest,在使用hooks的情况下需要额外添加 @testing-library/react-hooks
- 要求: 覆盖率100%。
import { useStateStore } from '../../src/hooks/useStateStore';
import { act, renderHook } from '@testing-library/react-hooks';
const setUp = <T>(initialValue?: T) =>
renderHook(() => useStateStore(initialValue));
describe("测试 useStateStore", () => {
it("获取当前的state", () => {
const initialValue = {mount: 1};
const {result} = setUp(initialValue);
expect(result.current.state).toBe(initialValue);
})
it("设置state, 获取结果", () => {
const initialValue = {mount: 1};
const {result} = setUp(initialValue);
act(() => {
result.current.setStateWrap({mount:2});
})
expect(result.current.getState()).toStrictEqual({mount: 2});
})
it("设置callback, 获取最新state", () => {
const initialValue = {mount: 1};
const {result} = setUp(initialValue);
act(() => {
result.current.setStateWrap({mount:2}, () => {
expect(result.current.state).toBe({mount: 2});
});
})
})
})
调试
- 如果要测试当前的运行结果是否合理,请先书写测试文件 yarn test 比如:yarn test test/hooks/useStateStore.test.ts
- 如果要方便的debug,可以修改使用vscode自带的Debug的功能方便调试。
发布
制定中...
使用
制定中...