使用 redux 连接组件方法测试 react/redux 连接组件时出错 [英] Error in testing react/redux connected components using redux connected components approach

问题描述

Redux 在这里强调了一种测试连接组件的方法，编写测试，我遵循但我不断收到此错误:

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

期望 reducer 是一个函数.

Expected the reducer to be a function.

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

这是我的reducer的格式，

This is the format of my reducer,

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

我导入为:

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 是一个动作

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

采用这种格式:

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

知道为什么我会收到这个错误吗?

Any idea why I get this error?

推荐答案

如果有人遇到类似问题，以下是对我有用的方法:

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

说明:

从我发布的问题，store = createStore(communityReducer, initialState)，我用组合的 reducer 替换单个 reducer，用 thunk 中间件替换 initialState>store = createStore(rootReducer, applyMiddleware(thunk)).

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)).

这里使用的中间件是redux提供的自定义函数这里，但是，您也可以使用从redux-thunk"导入的 thunk.

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

这篇关于使用 redux 连接组件方法测试 react/redux 连接组件时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！