组件化 - 公用工具库搭建

技术列表

• 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的功能方便调试。

发布

制定中...

使用

制定中...