使用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));
  });
});