使用react-test-renderer/shallow写测试

我的项目是采用react + ts来写的，项目中要写单元测试，于是采用了Jest库，  主要用的package有

react-test-renderer

react-test-renderer/shallow

@jest/globals

这里展示shallow的用法，主要用来测导航栏组件

import {createRenderer} from "react-test-renderer/shallow";
import {afterEach, beforeEach, describe, expect, it} from "@jest/globals";
import * as React from "react";
 
 
describe("render element", () => {
 //创建renderer
  const wrapper = createRenderer();
  let elements: JSX.Element;
  let leftEle: JSX.Element;
  let linkContainerEle: JSX.Element;
  beforeEach(() => {
    //浅渲染组件
    wrapper.render(renderFrame());

    //获取到最外层的某个元素
    elements = wrapper.getRenderOutput();



    //get element
    leftEle = elements.props.children[0];



    //get element
    linkContainerEle = elements.props.children[1];
  });



  afterEach(() => {
    wrapper.unmount();
  });


　　//这里是测渲染，（Link的to属性）
  it("the link of logo icon connect to 'testNav'", () => {
    //get element
    const logoIconEle = leftEle.props.children[0];
    expect(logoIconEle.props.to).toBe("testNav");
  });
 
  // 这里测事件---这个方法可行，但是原理我不是很明白
  it("when click 'icon', hidden/display box", () => {
    // mock event
    const event: {nativeEvent: {stopImmediatePropagation: () => void}} = {
      nativeEvent: {
        stopImmediatePropagation: () => {
          // do nothing
        },
      },
    };
    // simulate user action, click icon
　　//不直接找到icon元素，调用它的点击事件，而是找到点击事件对应的函数，直接调这个函数
    wrapper.getMountedInstance()["changeShowBox"](event);



    // so state showBox become true
    expect(wrapper.getMountedInstance()["state"]["showBox"]).toBeTruthy;
  });




 });

 

上述两个方法只能说可行，具体的用法可能不太正确

 

 

下面展示react-test-renderer测导航栏组件的用法（个人比较推荐）

describe("TopNavigationBar - lineFilter", () => {
  //渲染导航栏父组件
  const renderFrames = (lineFilterArr?: string[]) => (
    <HashRouter>
      <TopNavigationBar
        routePath={routePath}
        history={history}
        location={location}
        match={match}
        lineFilters={lineFilterArr ? lineFilterArr : ["line1", "line2"]}
      />
    </HashRouter>
  );

  let newFrame: ReactTestRenderer;
  let topNavComponent: ReactTestInstance;
  beforeEach(() => {
    //调用渲染方法
    newFrame = create(renderFrames());
    // 找到导航栏组件
    topNavComponent = newFrame.root.findByType(TopNavigationBar);
  });
  afterEach(() => {
    newFrame.unmount();
  });

  it("render state 'lineFilter'", () => {
//找到state中对应的值
    const stateLineFilters = topNavComponent.instance.state.lineFilters;
    const received: ILineFilter[] = [
      {
        text: "line1",
        selected: false,
      },
      {
        text: "line2",
        selected: false,
      },
    ];
    // render state lineFilter
    expect(JSON.stringify(stateLineFilters)).toEqual(JSON.stringify(received));
  });

  it("when select on item, change state 'lineFilter'", () => {
    // simulate select one item
    const selectedLine: ILineFilter = {
      text: "line1",
      selected: false,
    };
//找到该元素，调用元素绑定的onClick方法
    topNavComponent.findAllByProps({className: "tes-topNavBar-line"})[0].props.onClick(selectedLine);

    const lineFilterArr: ILineFilter[] = topNavComponent.instance.state.lineFilters;
    lineFilterArr.forEach((e) => {
      // so this item 'selected' property changed
      if (e.text === selectedLine.text) expect(e.selected).toBeTruthy;
    });
  });

  it("when props 'lineFilters' changed, change state 'lineFilters'", () => {
    // 修改父级传入的API lineFilters
    newFrame.update(renderFrames(["11", "22"]));
    const topNav = newFrame.root.findByType(TopNavigationBar);
    const stateLineFilters = topNav.instance.state.lineFilters;
    const receivedArr: ILineFilter[] = [
      {
        text: "11",
        selected: false,
      },
      {
        text: "22",
        selected: false,
      },
    ];
    //测试state,渲染对应的值
    expect(JSON.stringify(stateLineFilters)).toEqual(JSON.stringify(receivedArr));
  });
});