时间戳

首页 > 解决方案 > 尝试测试使用 redux 的组件时出现错误无法读取未定义的属性

reactjs - 尝试测试使用 redux 的组件时出现错误无法读取未定义的属性

问题描述

我有一个基于类的仪表板组件

class Dashboard extends Component {
 ...
 render() {
   return sth
 }
}

const mapStateToProps = state => ({
  userId: state.mainState.userId,
  theme: state.mainState.theme,
  companyUsers: state.mainState.companyUsers,
  activities: state.mainState.activities,
  activityTypes: state.mainState.activityTypes,
  projects: state.mainState.projects
});

const mapDispatchToProps = {
  setMainValue: actions.setMainValue
};

export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(Dashboard));

现在我正在尝试使用 jest 和 react-testing-library 开始测试组件。我创建了一个与本文类似的 renderWithProvider 函数，并尝试使用自定义渲染函数进行测试。唯一的区别是，在官方 redux 网站中，它返回 mapStateToProps 上的整个状态，因为它很短，而我只返回特定的变量。

function renderWithProvider(ui, { initialState, ...renderOptions } = {}) {
 const store = createStore(rootReducer, initialState, applyMiddleware(thunk));

  function Wrapper({ children }) {
    return <Provider store={store}>{children}</Provider>;
  }

  Wrapper.propTypes = {
    children: PropTypes.node.isRequired
  };

  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
}

// re-export everything
export * from '@testing-library/react';

// override render method
export { renderWithProvider };

当我渲染组件并运行测试时

import Dashboard from '.';

import { renderWithProvider } from '../testUtils/renderWithProvider'

test('should ', () => {
  renderWithProvider(<Dashboard />, {
    initialState: {
      userId: 106,
      theme: 'light',
      companyUsers: [],
      activities: [],
      activityTypes: [],
      projects: []
    }
  });
});

我得到：

TypeError：无法读取未定义的属性“userId”

  334 |
  335 | const mapStateToProps = state => ({
  336 |   userId: state.mainState.userId,

欢迎任何建议

编辑：我还尝试了以下方法：

test('should ', () => {
  renderWithProvider(<Dashboard />, {
    initialState: {
      mainState: {
        userId: 106,
        theme: 'light',
        companyUsers: [],
        activities: [],
        activityTypes: [],
        projects: []
      }
    }
  });
});

但不断收到同样的错误

标签： reactjsjestjsreact-testing-library

解决方案

根据您的 mapStateToProps 中的预期结构，您的 initialValue 是错误的。您传递的这些属性需要是 mainState 属性的子属性，而不是根状态的顶级属性。

推荐阅读