时间戳

首页 > 解决方案 > 为 React 组件编写单元测试

reactjs - 为 React 组件编写单元测试

问题描述

import * as React from "react";
import { useDispatch, useSelector } from "react-redux";
import "./trade.css";
import tradeActions from "./trade-actions/trade-actions";
import TradeDataSeries from "./TradeDataSeries/TradeDataSeries";
import TradeFilters from "./TradeFilters/TradeFilters";
import SelectedData from "../../components/SelectedData/SelectedData";
import appActions from "../app/actions/actions";
import { useLocation } from "react-router-dom";

export default function Trade() {
  const dispatch = useDispatch();
  // Store Selectors
  const dataseries = useSelector((state) => state.trade.dataseries);
  const facts = useSelector((state) => state.trade.facts);
  const location = useLocation();
  React.useEffect(() => {
    if (dataseries.length > 0) {
      return;
    }
    dispatch(tradeActions.fetchTradeDataseriesRequest());
    Promise.all([
      dispatch(tradeActions.fetchDatasourceDocumentsRequest()),
      dispatch(tradeActions.fetchCountriesRequest()),
      dispatch(tradeActions.fetchProductsRequest()),
      dispatch(tradeActions.fetchBorderPointsRequest()),
      dispatch(appActions.setDomain(location.pathname.substring(1))),
    ]);
  }, [dispatch, dataseries.length, location]);

  React.useEffect(() => {
    dispatch(tradeActions.setSelectedDataSeries([]));
  }, [dispatch]);
  // Render
  return (
    <>
      <TradeFilters />
      <TradeDataSeries dataSource={dataseries} />
      <SelectedData facts={facts} />
    </>
  );
}

我有上面的代码，我正在尝试编写单元测试。下面是我的测试代码：

import Trade from "./trade";

import renderer from "react-test-renderer";

describe("Trade Commponent Test", () => {
  it("Renders Trade", () => {
    const component = renderer.create(<Trade />);
    expect(component.toJSON()).toMatchSnapshot();
  });
});

但是当我运行这个测试覆盖npm test -- --coverage --watchAll=false时，它显示这个文件没有单元测试，如附图所示：

在此处输入图像描述

如果有人可以分享一个测试代码片段来测试我的代码，我将不胜感激，这样我就可以了解如何编写其他类似的测试。

其他脚本具有更好的覆盖率，尽管仍然不是 100% 在此处输入图像描述

标签： reactjsjestjscypressenzyme

解决方案

我希望你做得很好，在你的代码测试用例中看起来很好，但是你没有为测试用例文件提供适当的扩展名或者没有在 package.json 文件中定义测试脚本。您需要声明测试配置。

以下扩展名用于测试用例文件：

  1. 文件名.test.js
  2. 文件名.test.ts

否则您需要将测试用例文件放在测试文件夹中。

我希望您在阅读后能够理解。

推荐阅读