React 测试库 - 无法读取属性 'contents' of undefined] - 来自 redux 的值

Question

我是使用 React 测试库编写测试用例的新手。

这是我的组件

    import React from 'react';
    import PropTypes from 'prop-types';
    import { connect } from 'react-redux';
    class MyContainer extends React.Component {
      static propTypes = {
        graphicalData: PropTypes.object.isRequired,
      };
      render() {
        const { graphicalData } = this.props;
        return (
         graphicalData && (
            <div>
             /////some action and rendering
        </div>
        ))}
        }
        const mapStateToProps = (state) => {
      return {
        graphicalData: state.design.contents ? state.design.contents.graphicalData : {},
      };
    };
    const mapDispatchToProps = (dispatch) => ({});
    export default connect(mapStateToProps, mapDispatchToProps)(MyContainer)));

所以我正在使用 React 测试库编写我的测试用例文件

    import React from 'react';
    import '@testing-library/jest-dom';
    import { render, cleanup, shallow } from '@testing-library/react';
    import MyContainer from '../../MyContainer';
    import configureMockStore from 'redux-mock-store';
    import ReactDOM from 'react-dom';
    const mockStore = configureMockStore();
    import { Provider } from 'react-redux';
    
    
    const store = mockStore({
        state: {
            design: {
              contents: {
                graphicalModel: { cars: [{},{}], bikes: [{},{}] },
              },
            },
          },
    });
    
    afterEach(cleanup);
    
    it('renders without crashing', () => {
      const div = document.createElement('div');
      ReactDOM.render(
        <Provider store={store}>
          <MyContainer />
        </Provider>,
        div
      );
      ReactDOM.unmountComponentAtNode(div);
    });

我不确定出了什么问题，我的想法是检查组件是否加载而不会崩溃，如果汽车数组长度大于 0，请检查页面上呈现的内容。

但是我遇到了一些错误，任何有关示例或建议的帮助都会节省我的时间

Answer 1

错误似乎是正确的。检查您传递给 mockStore() 函数的结构。是

state: {
  design: {
    contents: {
      graphicalModel: { cars: [{},{}], bikes: [{},{}] },
    },
  },
},

因此，当您在 MyContainer 中访问时，您应该将其作为

访问

state.state.design.contents

只是你在状态对象中多了一个层级。

或者，如果您不想更改组件，请将传递到您的 mockStore() 方法的状态结构更改为：

const store = mockStore({
  design: {
    contents: {
      graphicalModel: { cars: [{},{}], bikes: [{},{}] },
    },
  },
});

React 测试库 - 无法读取属性 'contents' of undefined] - 来自 redux 的值

React Testing Library - Cannot read property 'contents' of undefined] - value from redux

javascript

reactjs

react-redux

react-testing-library

react-testing

React 测试库 - 无法读取 属性 'contents' of undefined] - 来自 redux 的值

React Testing Library - Cannot read property 'contents' of undefined] - value from redux

javascript

reactjs

react-redux

react-testing-library

react-testing

React 测试库 - 无法读取属性 'contents' of undefined] - 来自 redux 的值