单元测试

测试

当代码每次进行修改时都需要重新测试

通过编写测试用例可以减少代码测试的成本

React测试

官方测试

测试依赖下载

npm i react-test-renderer

测试代码

import React,{ Component } from 'react'

export default class Test extends Component {
  iptRef = React.createRef()
  render() {
    return (
      <div>
        <input class='ipt' type="text" ref={this.iptRef} value='456'/>
        <button onClick={()=>this.iptRef.current.value='123'}>add</button>
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    )
  }
}

测试虚拟DOM

// 引入需要测试的组件
import Test from './test'

// 从依赖包的 /shallow 路径下引入ShallowRender 用于创建虚拟DOM
import ShallowRender from 'react-test-renderer/shallow'

// 描述一个测试 -> 会形成一个作用域 第一个参数是描述 第二个参数为回调
describe('react-test-render',function(){

  // it 为一个测试 -> 断言 第一个参数是测试的描述 第二个参数为回调 里面为测试逻辑
  it('test测试',function(){
  
  	// 使用ShallowRender类 创建虚拟DOM的渲染函数
    const render = new ShallowRender()
    
    // 创建出需要测试的组件的虚拟DOM
    render.render(<Test />)
	
	// expect 期望  
	// toBe() 等于
	// 如果expect(value1).toBe(value2) -> value1与value2不相同 则测试失败
    expect(render.getRenderOutput().props.children[0].type).toBe('input')
  })
})

测试真实DOM

import Test from './test'

// 从react-dom中的 /test-utils 路径下引入ReactTestUtil用于创建真实DOM 以及获取元素
import ReactTestUtil  from 'react-dom/test-utils'

describe('react-test-render',function(){
  it('修改值',function(){
  
    // 通过Test组件渲染真实DOM
    const view = ReactTestUtil.renderIntoDocument(<Test />)
    
    // 获取Test组件内的所有li标签 scryRenderedDOMComponentsWithTag 通过标签获取到所有元素组成的数组
    let items = ReactTestUtil.scryRenderedDOMComponentsWithTag(view,'li')
    
    // 输出li标签的个数
    console.log(items.length);
    
    // 通过标签选择到button按钮 findRenderedDOMComponentWithTag 通过标签获取到唯一元素
    let button = ReactTestUtil.findRenderedDOMComponentWithTag(view,'button')
    
    // 模拟点击事件
    ReactTestUtil.Simulate.click(button)
    
    // 通过类名获取到input标签 findRenderedDOMComponentWithClass 通过类名获取到唯一元素
    let ipt = ReactTestUtil.findRenderedDOMComponentWithClass(view,'ipt')
    
    // 判断点击后的值是否更新为123
    expect(ipt.value).toBe('123')
  })
})

enzyme测试

测试依赖下载

npm i enzyme 

测试虚拟DOM

import Test from "./test"
import Enzyme, { shallow } from 'enzyme' // 需要适配器
import adapter from '@wojtekmaj/enzyme-adapter-react-17'
// 原本需要 enzyme-adpater-react-17 社区没有更新react-17版本适配器
// @wojtekmaj/enzyme-adapter-react-17 为其他用户开发的适配器

// 为Enzyme配置适配器
Enzyme.configure({adapter:new adapter()})

// 语法与原先一致
describe('react-test-render',function(){
  it('test测试',function(){
  
  	// 创建虚拟DOM
    let app = shallow(<Test />)
    
    // 通过jquery的api进行元素获取  
    // toEqual() 等于
    expect(app.find('button').text()).toEqual('add')
  })
})

测试真实DOM

import Test from "./test"
import Enzyme, { mount } from 'enzyme' 
import adapter from '@wojtekmaj/enzyme-adapter-react-17'

Enzyme.configure({adapter:new adapter()})

describe('react-test-render',function(){
  it('修改值',function(){
  
  	// 创建真实DOM
    let app = mount(<Test />)
    
    // 通过jquery api进行操作
    let item = app.find('li')
    console.log(item.length)
    // 模拟点击事件
    app.find('button').simulate('click')
  })
})
  })
})