README
build
创建react-app typescript 脚手架
- yarn create react-app my-test-app --template typescript
安装storybook
- npx -p @storybook/cli sb init
安装sass classnames
- yarn add sass-loader node-sass
- yarn add @types/classnames classnames
- 注意:
- 最新的create-react-app 已经在/node_modules/react-scripts/config文件夹中配置好了sass
typescript配置storybook 以及react-docgen-typescript-loader
yarn add ts-loader react-docgen-typescript-loader
npm package
test
工具
- 使用
Testing Library
和jest
- 使用
testing-library 断言测试(适用于react)
@testing-library/react 测试React Component的库
@testing-library/react-hooks 测试自己写的的React Hooks的库
@testing-library/jest-dom 提供更多利于dom测试的断言
storybook
@storybook/preset-create-react-app
@storybook/react 连接react和storybook
react-docgen-typescript-loader 获取typescript类型
yarn add --dev
- @storybook/addon-actions, // 组件操作事件,如click、change
- @storybook/addon-links, // 链接,如某个Story中单击按钮,链接到另一个Story中
- @storybook/addon-info, // 显示相关信息
- @storybook/addon-knobs, // 在页面上改变变量
- @storybook/addon-notes, // 添加文本或者markdown
遇到的问题?
npm run jest失败(不支持import和ES6语法)?
- 原因:其实在Jest里有一个babel-jest组件,我们在使用npm run test的时候,它先去检测开发环境中是否安装了babel,也就是查看有没有babel-core,如果有bable-core就会去查看.babelrc配置文件,根据配置文件进行转换,转换完成,再进行测试。
babel 兼容性问题?
- 解决: 根目录创建 .env 文件 => SKIP_PREFLIGHT_CHECK=true
jest 测试reactcomponent 的时候,组件中import的 scss,css,png中@import 等资源需要在 jest 配置中进行模拟。
- 解决: 添加
yarn add dev identity-obj-proxy
- jest配置
moduleNameMapper: { '\\.(css|scss|less)
- 解决: 添加