又一个月了,写点东西吧, 感觉要累死了
1.写一个自定义的hook useDebounce
上面就实现了一个简单的的debounce操作
2.写一个自定义的hook useForm
大概也看出来是要做什么操作了吧, 传一个初始state的schema去做验证
3.下面是关键代码
使用方法很简单,传入3各参数 1: state初始值 2:schema验证 3: submit操作函数
- 使用jest对react测试 直接上代码了12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849import ShallowRenderer from 'react-test-renderer/shallow';import React from 'react';import TestRenderer from 'react-test-renderer';import _ from 'lodash';// 注意在这里可以使用import的lodash jest会自动读取console.log(_.add(3, 4));const Link = ({to, children}) => (<a className="my-link" href={to} target="_blank" rel="noopener noreferrer">{children}</a>);const Header = () => (<div><span className="brand">Hello world</span><Link to="https://jd.com">JD</Link><Link to="http://butler.jd.com">Butler</Link><Link to="http://lrc.jd.com">lrc</Link></div>);describe('Header', () => {it('should render a top level div', () => {const renderer = new ShallowRenderer();renderer.render(<Header />);const result = renderer.getRenderOutput();expect(result.type).toBe('div');});it('should render 3 Link', () => {const renderer = new ShallowRenderer();renderer.render(<Header />);const result = renderer.getRenderOutput();const childrenLink = result.props.children.filter(c => c.type === Link);expect(childrenLink.length).toBe(3);});it('should render 3 a tag with className "my-link"', () => {const testRenderer = TestRenderer.create(<Header />);console.log(testRenderer.toJSON());const testInstance = testRenderer.root;expect(testInstance.findAll(node => node.type === 'a' && node.props.className === 'my-link')).toHaveLength(3);});});// 别忘记了.babelrc{"presets": ["@babel/env","@babel/react"]}
好了 今天的就到这里啦 下次可能是下个月 或者是明年。。。 不得而知了