测试与酶反应容器

我有一个名为“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

任何想法？

来源

2017-07-02 Agustin Castro

-1

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

export class HomeContainer extends Component {

这是除了你default出口。

来源

2017-07-02 18:27:19 CLL

但是，我必须导出组件连接。导出默认连接（mapStateToProps，mapDispatchToProps）（HomeContainer）; –

这是除了您的默认导出。这可以保持原样。 – CLL

-1

我有同样的错误

TypeError: Cannot read property 'history' of undefined

我用MemoryRouter固定它。您可以通过更改安装部分来安装组件

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

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

来源

2017-07-12 21:09:02

测试与酶反应容器

回答

相关问题