react测试 （2） Test Renderer

Test Renderer主要用于将 React 组件渲染成纯 JavaScript 对象，它可以配合jest的快照测试对ui组件进行测试，简单来说就是比较当前组件的快照是否和上次测试的快照相同，以避免开发人员无意的对ui组件的修改而导致问题。

由于我没有写单纯的ui组件，我就用一个图片切换的组件进行演示

组件

import React, {useReducer} from 'react';

interface cardState {
    urlPre: string;
    url: string;
    urlNext: string;
}
interface cardAction {
    type:string;
    [key:string]:any;
}
const reducer: React.Reducer<cardState,cardAction> = (state, action) => {
    switch (action.type){
        case "PRE": {
            return {
                urlPre: state.urlNext,
                url: state.urlPre,
                urlNext: state.url
            };
        }
        case "NEXT": {
            return {
                urlPre: state.url,
                url: state.urlNext,
                urlNext: state.urlPre
            };
        }
        default: return state;
    }
}
const Card: React.FC<cardState> = (props: cardState) => {

    const initData:cardState = props

    const [state, dispatch] = useReducer(reducer, initData);

    function handlerChange(type){
        dispatch({type: type})
    }
    return <div className={"imgView"}>
        <button onClick={()=>handlerChange("PRE")}>pre</button>
        <img src={state.url} className={"myImg"}></img>
        <button onClick={()=>handlerChange("NEXT")}>next</button>
    </div>
}

export default Card;

测试代码

import React from "react"
import Card from "./card"
import render from "react-test-renderer"

test("测试card",()=>{

    let instance;
    render.act(()=>{
        instance = render.create(<Card  url={"./now.jpg"} urlNext={"./next.jpg"} urlPre={"./pre.jpg"}/>)
    })
    //测试当前的快照是否与上次相同，如果第一次运行会在目录下生成一个__snapshots__目录用于存储我们的快照，如果快照和上次
    //的不同，就会测试失败，但是可以按“u”，将快照更新，测试就会通过了
    expect(instance.toJSON()).toMatchSnapshot();
})

Test Renderer对特定节点断言

Test Renderer除开进行快照测试外，我们也可以对某些节点进行断言

import React from "react"
import Card from "./card"
import render from "react-test-renderer"

test("测试card",()=>{
    let instance;
    render.act(()=>{
        instance = render.create(<Card  url={"./now.jpg"} urlNext={"./next.jpg"} urlPre={"./pre.jpg"}/>)
    })
    //希望className: "myImg"的元素的src为'./now.jpg'，也就是当前的图片url为'./now.jpg'
    expect(instance.root.findByProps({className: "myImg"}).props.src).toBe('./now.jpg');

    //希望快照和上次的快照相同
    expect(instance.toJSON()).toMatchSnapshot();
})

除开用上述的findByProps({className: “myImg”})查找到节点进行断言外，你还可以使用findByType(‘img’).props.src找到节点，甚至于你可以直接将React 组件渲染成纯 JavaScript 对象在进行对象的属性的判断

   let obj = instance.toJSON()
   expect(obj.children[1].props.src).toBe('./now.jpg');

除此之外Test Renderer还支持很多其他的方法，如果需要的话可以到react官网api查看