动作必须是普通对象。将自定义中间件用于测试库而不是应用程序上的异步操作

Posted 2023-02-22

【中文标题】动作必须是普通对象。将自定义中间件用于测试库而不是应用程序上的异步操作

【英文标题】：Actions must be plain objects. Use custom middleware for async actions on Testing Library but not App

【发布时间】：2021-07-07 20:05:39

【问题描述】：

我正在运行一个 Create React 应用程序，它使用 useDispatch 调度 redux 操作，redux-thunk 用于异步网络请求和 React 测试库。

在我的应用程序上，运行 localhost，以下工作正常，但在测试/RTL (npm run test) 中失败并出现 Actions Must Be Plain Objects 错误。

// CONTAINER

function MyContainer() 
  const [localData, setLocalData] = useState(null);
  const dispatch = useDispatch();
  const  data, error  = useSelector((state) => state.stocks);

  const fetchStuff = async () => 
    dispatch(fetchMyDataThunk(process.env.REACT_APP_TOKEN));
  ;

  useEffect(() => 
    if (!data) fetchStuff();
    setLocalData(data);
  , [data]);

  return (
    <div data-testid="test-accts-container">
      <div className=styles.stockListContainer>
        <p>list of accounts</p>
        <AccountsList passDataInHere=localData />
      </div>
    </div>
  );


// THUNK

export const fetchMyDataThunk = (token) => async (dispatch) => 
  dispatch(loadMyData());
  return Api.fetchStocks(token)
    .then((res) => 
      dispatch(loadedMyData(res));
      return foo;
    )
    .catch((err) => 
      dispatch(loadMyDataFail(err));
      return bar;
    );
;

// ACTIONS CALLED BY THUNK

export function loadMyData() 
  return 
    type: constants.LOAD_MY_DATA,
  ;

export function loadedStocksData(data) 
  return 
    type: constants.LOADED_MY_DATA,
    data,
  ;

export function loadStocksFailed(error) 
  return 
    type: constants.LOAD_MY_DATA_FAIL,
    error,
  ;

thunk 正在返回返回对象的函数。我不确定我做错了什么？

【问题讨论】：

您是否在测试中使用可能缺少 thunk 中间件的不同存储？

@phry 大声喊叫，等一下，我会检查...

【参考方案1】：

感谢@phry - 它出错的原因是测试实用程序商店/提供程序中缺少中间件。

我的完全监督。当我为 RTL 设置新商店时应该点击一下。

在 thunk 中间件中添加。

store = createStore(reducer, initialState, applyMiddleware(thunk)),