Question

我有一个名为“HomeContainer”的容器，它向我们显示菜单和用户列表。

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import User from '../users/User';
import { getUsers } from '../users/UserActions';
import Menu from './components/Menu';

class HomeContainer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: true,
    };
  }

  async componentDidMount() {
    this.initialFetch();
  }

  async initialFetch() {
    this.props.actions.getUsers();

    this.setState({
      loading: false,
    });
  }

  render() {
    return (
      <section name="Home">
        <Menu selected="Home" />

        <section>
          {this.state.loading && (
            <h2>Loading users...</h2>
          )}

          {this.props.users.map(user => <User key={user.id} {...user} />)}
        </section>
      </section>
    );
  }
}

HomeContainer.propTypes = {
  actions: PropTypes.arrayOf.isRequired,
  users: PropTypes.arrayOf.isRequired,
};

function mapStateToProps(state) {
  return {
    users: state.users,
  };
}

function mapDispatchToProps(dispatch) {
  const actions = {
    getUsers: bindActionCreators(getUsers, dispatch),
  };

  return { actions };
}

export default connect(mapStateToProps, mapDispatchToProps)(HomeContainer);

我正在尝试对此容器进行测试，以获取内部元素。但是我得到了很多错误。

import React from 'react';
import thunk from 'redux-thunk';
import {Provider} from 'react-redux';
import configureMockStore from 'redux-mock-store';
import { mount } from 'enzyme';
import HomeContainer from '../../source/pages/HomeContainer';

const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);

describe("Testing the structure", function() {
  let Component;

  beforeEach(() => {
    const user = { id: 1, email: 'aa', name: 'as' };
    const store = mockStore({
      users: [user],
    });

    const wrapper = mount(
      <Provider store={store}>
        <HomeContainer />
      </Provider>
    );

    Component = wrapper.find(HomeContainer);
  });

  it("menu", function() {
    const menu = Component.find('Menu');
    expect(menu.length).toEqual(1);
  });

  it("section", function() {
    const section = Component.find('section');
    expect(section.length).toEqual(1);
  });
});

测试的错误是：

TypeError: Cannot read property 'find' of undefined

at Object.<anonymous> (tests/pages/HomeContainer.test.jsx:30:27)
at node_modules/p-map/index.js:42:16
at process._tickCallback (node.js:369:9)


TypeError: Cannot read property 'history' of undefined

at Link.render (node_modules/react-router-dom/Link.js:76:35)
at node_modules/react-dom/lib/ReactCompositeComponent.js:796:21

有什么想法吗？

Answer 1

导出您的HomeContainer组件，使其可用于测试：

export class HomeContainer extends Component {

这是您default导出的补充。

Answer 2

我有同样的错误

TypeError：无法读取未定义的属性“历史记录”

我使用MemoryRouter修复了它。您可以通过将安装部分更改为

来安装组件

const wrapper = mount(
      <MemoryRouter>
        <HomeContainer store={store} />
      </MemoryRouter>
    );

从react-router模块导入MomoryRouter。对于第一个错误，您不需要此语句Component = wrapper.find(HomeContainer);。在您的测试规范中，您只需说const menu = wrapper.find('Menu');您也不需要使用Provider

用酶测试反应容器

2 个答案: