对组件的 fetchdata 进行 React 测试返回“无法读取未定义的属性‘catch’”

问题描述

我有一个组件 fetchData 使用 Promise.all 并在 fetchBloomreachData 上有一个捕获，因此即使 fetchBloomreachData 失败，另一个 Promise 也可以继续。

如果 fetchBloomreachData 拒绝，它仍应等待 newSearch 解析。但基本上如果 newSearch 失败 fetchBloomreachData 是无关紧要的。因此，即使 fetchBloomreachData 失败，newSearch 仍应继续。如果 newSearch 失败，则不应该。

我是不是忽略了什么？我第一次看到这个错误发生在我身上。

ProductListing.fetchData = ({ dispatch },rawParams,location,clubId) => {
  const nextQuery = getListingParams(rawParams,location.query);
  return Promise.all([
    dispatch(newSearch(nextQuery,clubId,location)),dispatch(fetchBloomreachData(nextQuery,location.pathname)).catch(() => {})
  ]);
};

添加 catch 后，此测试失败并且测试显示 cannot read property 'catch' of undefined

it("should fetchBloomreachData",() => {
  const ProductListing = require("src/components/product-listing").ProductListing;
  const bloomreachStub = sinon.stub(listingActions,"fetchBloomreachData").resolves();
  const dispatchStub = sinon.stub();
  ProductListing.fetchData(
    { dispatch: dispatchStub },{ searchTerm: "" },{ pathname: "/b/1234" },{}
  );
  expect(bloomreachStub).to.have.been.calledWith({ searchTerm: "" },"/b/1234");
});

解决方法

你的 catch 应该被附加到 Promise 中，现在它在里面。

更正：

ProductListing.fetchData = ({ dispatch },rawParams,location,clubId) => {
  const nextQuery = getListingParams(rawParams,location.query);
  return Promise.all([
    dispatch(newSearch(nextQuery,clubId,location)),dispatch(fetchBloomreachData(nextQuery,location.pathname)),]).catch(() => {});
};

,

能够通过将 dispatchStub 更新为 const dispatchStub = () => Promise.resolve();

使其工作

it("should fetchBloomreachData",() => {
  const ProductListing = require("src/components/product-listing").ProductListing;
  const bloomreachStub = sinon.stub(listingActions,"fetchBloomreachData").resolves();
  const dispatchStub = () => Promise.resolve();
  ProductListing.fetchData(
    { dispatch: dispatchStub },{ searchTerm: "" },{ pathname: "/b/1234" },{}
  );
  expect(bloomreachStub).to.have.been.calledWith({ searchTerm: "" },"/b/1234");
});