2.0.0 • Published 1 year ago
btri-apps-fe-btriui v2.0.0
@btri-ui 基于 dumi + father-build + lerna 多包管理模版
feature
- ✅ 多包管理
- ✅ 单元测试
- ✅ 文档阅读
- ✅ eslint 规范
- ✅ cjs + esm 编译
- ✅ typescript
快速开始
依赖下载
$ npm i
$ npm run bootstrap
开发环境
$ npm start
文档打包
$ npm run docs:build
项目打包
$ npm run build
项目规范
packages
- hooks ---> @ife/hooks 通用 hooks,不涉及业务逻辑
- base ---> @btri-ui/base 通用基础组件,不涉及业务逻辑
- Table
- Form
- ......
lerna 的使用
为所有项目安装依赖,类似于 npm/yarn i
lerna bootstrap
使用 lerna 初始化项目
lerna init # 固定模式(Fixed mode)默认为固定模式,packages下的所有包共用一个版本号(version)
lerna init --independent # 独立模式(Independent mode),每一个包有一个独立的版本号
为 packages 文件夹下的 package 安装依赖
lerna add <package>[@version] [--dev] # 命令签名
# 例如
lerna add module-1 --scope=module-2 # 将 module-1 安装到 module-2
lerna add module-1 --scope=module-2 --dev # 将 module-1 安装到 module-2 的 devDependencies 下
lerna add module-1 # 将 module-1 安装到除 module-1 以外的所有模块
lerna add babel-core # 将 babel-core 安装到所有模块
卸载依赖
lerna exec -- <command> [..args] # 在所有包中运行该命令
# 例如
lerna exec --scope=npm-list yarn remove listr # 将 npm-list 包下的 listr 卸载
lerna exec -- yarn remove listr # 将所有包下的 listr 卸载
显示 packages 下的各个 package 的 version
lerna ls
清理 node_modules
lerna clean
lerna run
lerna run <script> -- [..args] # 在所有包下运行指定
# 例如
lerna run test # 运行所有包的 test 命令
lerna run build # 运行所有包的 build 命令
lerna run --parallel watch # 观看所有包并在更改时发报,流式处理前缀输出
lerna run --scope my-component test # 运行 my-component 模块下的 test
单元测试
测试框架
- @umijs/test,测试脚本,内置 jest 测试框架
- @testing-library/react,React 组件测试工具
- puppeteer,Headless 浏览器工具,用于 E2E 测试。
测试约定
目录规范
.
├── package.json
├── packages
│ ├── bs-components
│ │ └── src
│ │ └── YsHeader
│ │ └── __test__
│ │ └── index.test.tsx # 插件测试用例
├── tsconfig.json
├── .fatherrc.ts
└── yarn.lock
hooks 测试示例
import { renderHook, act } from '@testing-library/react-hooks';
import useTest from '../index';
const setUp = (defaultValue?: any) => renderHook(() => useTest(defaultValue));
describe('useTest', () => {
it('should be defined', () => {
expect(useTest).toBeDefined();
});
it('test on methods', async () => {
const { result } = setUp(false);
expect(result.current[0]).toBeFalsy();
act(() => {
result.current[1](true);
});
expect(result.current[0]).toBeTruthy();
});
});
组件测试示例
});
单元测试资料
2.0.0
1 year ago