Error in testing react/redux connected components using redux connected components approach

Question

Redux highlights an approach for testing connected components here, writing tests, that I follow but I keep getting this error:

Expected the reducer to be a function.

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

This is the format of my reducer,

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

that I import as:

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

The component I am testing takes this format

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 is an action

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

that takes this format:

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

Any idea why I get this error?

I would check the exports and imports of communityReducer. You are importing it as a named import (not default) but it doesn't appear to have export in front of it. — Linda Paiste
– Linda Paiste, Commented Mar 27, 2021 at 1:16
I export it as a default with export default communityReducer; at the end of the file — sanyu
– sanyu, Commented Mar 29, 2021 at 19:18
Ok then that's your problem! You need import communityReducer from "../../reducers/communityReducer"; instead of import { communityReducer } from "../../reducers/communityReducer"; — Linda Paiste
– Linda Paiste, Commented Mar 29, 2021 at 19:19
I tried that and I get a different error: TypeError: Cannot read property 'communityList' of undefined 136 | communityReducer: state.communityReducer, > 137 | communityList: state.communityReducer.communityList, | ^ 138 | }); seems like the reducer is not being recognized at all — sanyu
– sanyu, Commented Mar 29, 2021 at 19:35
the reducer has communityList as one of the props in the initialState const INITIAL_STATE = { name: "", year: null, township: "", population: null, communityList: [], currentCommunity: null, communityProjects: { water: {}, sanitation: {}, hygiene: {}, }, }; and the error now is: TypeError: Cannot read property 'communityList' of undefined — sanyu
– sanyu, Commented Mar 29, 2021 at 19:39

sanyu · Accepted Answer · 2021-03-30 21:18:20Z

In case anyone has a similar issue, here is what has worked for me:

// 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 };

Explanation:

From the issue I posted, store = createStore(communityReducer, initialState), I replace the single reducer with the combined reducers and initialState with the thunk middleware, store = createStore(rootReducer, applyMiddleware(thunk)).

The middleware used here is a custom function provided by redux here, however you can also use thunk imported from "redux-thunk".

Collectives™ on Stack Overflow

Error in testing react/redux connected components using redux connected components approach

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related