使用 redux 连接组件方法测试 react/redux 连接组件时出错答案

【问题标题】：Error in testing react/redux connected components using redux connected components approach使用 redux 连接组件方法测试 react/redux 连接组件时出错
【发布时间】：2021-03-26 22:32:25
【问题描述】：

Redux 在这里强调了一种测试连接组件的方法，writing tests，我遵循了该方法，但我一直收到此错误：

预计 reducer 是一个函数。

  10 |   {
  11 |     initialState,
> 12 |     store = createStore(communityReducer, initialState),
     |             ^
  13 |     ...renderOptions
  14 |   } = {}
  15 | ) {

这是我reducer的格式，

const communityReducer = (state = INITIAL_STATE, action) => {   
    switch (action.type) {    ...   } 
}

我导入为：

import { communityReducer } from "../../reducers/communityReducer";

我正在测试的组件采用这种格式

const CommunityList = (props) => {
  const { getCommunities, communityList } = props;

  ...
}

const mapStateToProps = (state) => ({
  authReducer: state.authReducer,
  communityReducer: state.communityReducer,
  communityList: state.communityReducer.communityList,
});

export default connect(mapStateToProps, { getCommunities })(CommunityList);

getCommunities 是一个动作

import { getCommunities } from "../../actions";

采用这种格式：

export const getCommunities = () => async (dispatch) => {
  ....
};

知道为什么会出现这个错误吗？

【问题讨论】：

我会检查communityReducer 的导出和导入。您正在将其作为命名导入（非默认）导入，但它前面似乎没有 export。
我将其导出为默认文件，文件末尾带有export default communityReducer;
好吧，那是你的问题！你需要import communityReducer from "../../reducers/communityReducer"; 而不是import { communityReducer } from "../../reducers/communityReducer";
我试过了，我得到一个不同的错误：TypeError：无法读取未定义的属性'communityList' 136 | communityReducer：state.communityReducer，> 137 |社区列表：state.communityReducer.communityList，| ^ 138 | });似乎减速器根本没有被识别
reducer 将 communityList 作为 initialState 中的 props 之一 const INITIAL_STATE = { name: "", year: null, township: "", population: null, communityList: [], currentCommunity: null ，社区项目：{水：{}，卫生：{}，卫生：{}，}，}；现在的错误是：TypeError: Cannot read property 'communityList' of undefined

标签： reactjs redux jestjs

【解决方案1】：

如果有人遇到类似问题，这对我有用：

// test-utils.js
import React from "react";
import { render as rtlRender } from "@testing-library/react";
import { Provider } from "react-redux";
// import your combined reducers here
import rootReducer from "./reducers/index";
import { createStore, applyMiddleware } from "redux";

const thunk = ({ dispatch, getState }) => (next) => (action) => {
  if (typeof action === "function") {
    return action(dispatch, getState);
  }

  return next(action);
};

function render(
  ui,
  {
    initialState,
    store = createStore(rootReducer, applyMiddleware(thunk)),
    ...renderOptions
  } = {}
) {
  function Wrapper({ children }) {
    return <Provider store={store}>{children}</Provider>;
  }
  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
}

// re-export everything
export * from "@testing-library/react";
// override render method
export { render };

解释：

根据我发布的问题store = createStore(communityReducer, initialState)，我将单个reducer 替换为组合reducer，并将initialState 替换为thunk 中间件store = createStore(rootReducer, applyMiddleware(thunk))。

这里使用的中间件是reduxhere提供的自定义函数，但是你也可以使用从“redux-thunk”导入的thunk。

【讨论】：