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
时,它显示这个文件没有单元测试,如附图所示:
如果有人可以分享一个测试代码片段来测试我的代码,我将不胜感激,这样我就可以了解如何编写其他类似的测试。
解决方案
我希望你做得很好,在你的代码测试用例中看起来很好,但是你没有为测试用例文件提供适当的扩展名或者没有在 package.json 文件中定义测试脚本。您需要声明测试配置。
以下扩展名用于测试用例文件:
- 文件名.test.js
- 文件名.test.ts
否则您需要将测试用例文件放在测试文件夹中。
我希望您在阅读后能够理解。
推荐阅读
- python - discord.py:如何获取提到的频道的频道 ID?
- delphi - 如何处理 Delphi 中两个不同公寓之间的 COM 回调
- snowflake-cloud-data-platform - DB 类型 449900 无效
- python - Plotly 不会从枢轴绘制条形图
- c# - Unity - 无法在 C# 中访问主播放器的子组件
- javascript - 使用 browserify 捆绑 js 代码时找不到预设 @babel/react
- bash - Bash 算术错误:“let: =+: 语法错误:预期操作数(错误标记为“=+”)+ 等于”
- django - 如何在 Django 的 ArrayList 中按值排序?
- python - 如何滚动到 QTableView 中的特定行?
- r - R group_by:具有 3 个 A、B、C 类的列。将任何等于 A 的元素转换为 B 或 C 以最大化 B 或 C 的最小频率