使用官方推荐的库来测react hook组件

最近写单元测试的时候遇见了一些问题，当我使用使用jest测React. useRef,  React. useEffect时，总是测不到，

然后我去查阅了一下官方文档，它推荐了使用下面这个库

@testing-library/react

我来试了哈，还是不得行，于是根据这个库我在npm里头找到了相关的库，就是下面这个，专门用来测Hook的   @testing-library/react-hooks

 

下面开始示范我的用法，如有不对请稍加修改

这是我的组件BarChart

注意： handleSortByReject 是一个处理函数，我没有把代码贴出来，可以忽略掉这个方法

（ 节省时间小tips ，主要关注63-75行的内容，目的是测React.useRef和React.useEffect ）

 

import * as React from "react";
import {Chart} from "react-chartjs-2";
import {Chart as ChartJS, Title, Tooltip, Legend, CategoryScale, BarController, BarElement} from "chart.js";
import {IChartDataList} from "./IChartDataList";
import {ILinkPosition} from "./common";
import {ILink} from "./ILink";
import {IDatasetWithDetectionId} from "./IDatasetWithDetectionId";
import {ItemWithLoading} from "./ItemWithLoading";

// Register the elements to display ChartJs. Enables tree-shaking reducing bundle size.
// See https://www.chartjs.org/docs/latest/getting-started/integration.html#bundlers-webpack-rollup-etc
ChartJS.register(Title, Tooltip, Legend, CategoryScale, BarController, BarElement);

export interface ISum {
  subscript: number;
  totalReject: number[];
  label: string;
  sumOfTotalReject?: number;
}

export interface IBarChartProps {
  /** The state of showing loading icon while sending request */
  showLoading: boolean;
  /** height of chart */
  chartHeight: number;
  /** current bar data */
  itemData: IChartDataList;
  /** sort data by label or total reject, if true, sort by total reject */
  sortByReject: boolean;
}

export const BarChart: React.FC<IBarChartProps> = (props: IBarChartProps) => {
  const chartRef = React.useRef<ChartJS>(null);

  /**
   * @returns options property or bar chart
   */
  const getOptionBarChart = (titleKey?: string) => {
    return {
      maintainAspectRatio: false,
      scales: {
        x: {
          stacked: true,
        },
        y: {
          stacked: true,
        },
      },
      plugins: {
        title: {
          display: true,
          text: titleKey,
        },
      },
    };
  };

  /**
   * use official function to update chart, more detail you can see
   * 1. [update.html](https://www.chartjs.org/docs/latest/developers/updates.html)
   * 2. [chartRef-demo](https://react-chartjs-2.netlify.app/examples/chart-ref/)
   */
  const updateChartData = (chart) => {
    if (chart.data !== null && chart.data !== undefined) {
      chart = handleSortByReject(chart);
      chart.update();
    }
  };

  React.useEffect(() => {
    const chart = chartRef.current;
    if (chart !== null) {
      updateChartData(chart);
    }
  }, [props.sortByReject, props.itemData.chartData.labels, props.showLoading, props.chartHeight]);

  return (
    <>
      {/* * before get response of backend, show loading
       * if backend return empty list, show 'no data'
       * otherwise, render bar chart */}
      <ItemWithLoading
        height={props.chartHeight}
        showLoading={props.showLoading}
        ele={
          props.itemData.chartData !== undefined &&
          props.itemData.chartData.labels &&
          props.itemData.chartData.labels.length !== 0 &&
          props.itemData.chartData.datasets.length !== 0 && (
            /** about ref of bar chart, more detail you can see
             * [chartRef-demo](https://react-chartjs-2.netlify.app/examples/chart-ref/)
             */
            <Chart
              type="bar"
              ref={chartRef}
              height={props.chartHeight}
              data={props.itemData.chartData}
              options={getOptionBarChart(props.itemData.titleKey)}
            />
          )
        }
      />
    </>
  );
};

这是我的组件ItemWithLoading

注意：（节省时间小tips， 可以不关注这个组件）

import * as React from "react";
import {AppContext} from "../app/IAppContext";
import {Loading} from "../app/Loading";
import "../public/style/datalight/ItemWithLoading.scss";

export interface IItemWithLoadingProps {
  height: number;
  /** if true, show loading icon */
  showLoading: boolean;
  ele?: JSX.Element | boolean;
}

/** render no data */
export const ItemWithLoading: React.FC<IItemWithLoadingProps> = (props: IItemWithLoadingProps) => (
  // before render element, show loading
  <AppContext.Consumer>
    {(ctx) =>
      props.showLoading ? (
        <Loading />
      ) : props.ele ? (
        props.ele
      ) : (
        //  if ele not available, show 'no data'
        <div className="tes-datalight-noData" style={{height: props.height}}>
          {ctx.translator.translate("tes_fe_gallery_filter_nodata")}
        </div>
      )
    }
  </AppContext.Consumer>
);

 

这是测试

注意： 前面三个测试采用了react-test-renderer库的create方法来测渲染

第四个测试采用了renderHook方法来测update方法有没有被调用，配合jest.spyOn和jest.fn方法

（节省时间小tips， 主要关注第四个测试 )

 

 

import * as React from "react";
import * as TypeMoq from "typemoq";
import {describe, expect, it, jest} from "@jest/globals";
import {ActiveElement, ChartEvent} from "chart.js";
import {hotChartData, hotData, mcalMultiChartData, mxChartData, mxData} from "./panel2MockData";
import {create} from "react-test-renderer";
import {IChartDataList} from "../../datalight/IChartDataList";
import {ILinkPosition} from "../../datalight/common";
import {ILink} from "../../datalight/ILink";
import {BarChart, IBarChartProps} from "../../datalight/BarChart";
import {ItemWithLoading} from "../../datalight/ItemWithLoading";
import {Chart} from "react-chartjs-2";
import {renderHook} from "@testing-library/react-hooks";

// define props of bar chart
const barChartProps: IBarChartProps = {
  showLoading: true,
  chartHeight: 300,
  itemData: mxData,
  sortByReject: true,
};

/**
 *
 * @param height height of chart
 * @param sortByReject true means sort by total reject. false means sort by label
 * @returns render component with given property
 */
const renderFrame = (height?: number, sortByReject = false, chartData?: IChartDataList, showLoading = false) => (
  <BarChart
    showLoading={showLoading ? showLoading : false}
    chartHeight={height ? height : 320}
    itemData={chartData ? chartData : hotData}
    sortByReject={sortByReject}
  />
);

describe("render bar chart", () => {
  it("bar height depend on props 'chartHeight'", () => {
    const chartHeight = 200;
    const wrappers = create(renderFrame(chartHeight, false));
    expect(wrappers.root.findByType(ItemWithLoading).props.height).toBe(chartHeight);
    wrappers.unmount();
  });

  it("bar showLoading depend on props 'showLoading'", () => {
    // render component with property 'showLoading' as true
    const wrapper = create(renderFrame(undefined, undefined, undefined, true));
    expect(wrapper.root.findByType(ItemWithLoading).props.showLoading).toBeTruthy();
    wrapper.unmount();
  });

  it("when props data is empty", () => {
    const emptyData: IChartDataList = {
      titleKey: "empty list",
      detectionArr: [],
      chartData: {labels: [], datasets: []},
    };
    // render component with empty data
    const frame = create(renderFrame(undefined, undefined, emptyData));
    expect(frame.root.findByType(ItemWithLoading).props.ele).toBeFalsy();
    frame.unmount();
  });


  it("when props 'sortByReject' is false, test render hot chart", () => {
    const newRef = {
      current: {
        update: jest.fn(),
        // hot data has one items
        data: hotChartData,
      },
    };
    jest.spyOn(React, "useRef").mockReturnValueOnce(newRef);
    /** render hooks
     * more detail you can see [react-hooks-testing](https://react-hooks-testing-library.com/)
     */
    renderHook(() => BarChart(barChartProps));
    expect(newRef.current.update).toHaveBeenCalledTimes(1);
  });
});