测试组件做出反应用酶和摩卡

我有我的反应Redux的项目，我想实现测试，但试图测试组件时遇到了问题以下组件测试组件做出反应用酶和摩卡

Users.js

export class Users extends Component { 
componentWillMount() { 
    const dispatch = this.context.store.dispatch; 
    dispatch({ type: UserActions.fetchUsers(dispatch)}); 
} 

render() { 
    const {users,isFetching} = this.props; 
    return (
     <div> 
      <CardHeader 
       title={this.props.route.header} 
       style={{backgroundColor:'#F6F6F6'}}/> 
      <UserListHeader/> 
      {isFetching ? <LinearProgress mode="indeterminate" /> : <UserList users={users}/>} 
     </div> 
    ) 
} 
} 

Users.propTypes = { 
    users: PropTypes.array, 
    actions: PropTypes.object.isRequired 
}; 

Users.contextTypes = { 
    store: React.PropTypes.object.isRequired 
}; 

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

function mapDispatchToProps(dispatch) { 
    return { 
     actions: bindActionCreators(UserActions, dispatch) 
    } 
} 

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

，我想测试它像终极版网站上的例子，但我遇到了问题

UsersSpec.js

import {Users} from '/containers/users/Users' 
const middlewares = [ thunk ]; 
const mockStore = configureMockStore(middlewares); 

function usersSetup() { 
const props = { 
    users: expect.createSpy(), 
    isFetching:expect.createSpy() 
}; 

const enzymeWrapper = mount(<Users />,{context:{store:mockStore}}); 

return { 
    props, 
    enzymeWrapper 
} 
} 

describe('Users',() => { 
    it('should render self and subcomponents',() => { 
     const { enzymeWrapper } = usersSetup(); 
     exp(enzymeWrapper.find(UserListHeader)).to.have.length(1); 

    }) 

})

但我得到的错误'TypeError：dispatch不是函数'我应该嘲笑componentWillMount函数或如何测试这个组件。

我应该只是测试愚蠢的孩子组件？任何指导都会很棒。谢谢

来源

2016-09-05 JKX

mount函数提供完整的dom渲染，因此您需要在您的测试设置中设置jsdom。你可以在这里看到更多的信息：

Error: It looks like you called `mount()` without a global document being loaded

的另一件事是，你应该提供当你定义contextchildContextTypes属性与mount这样的：

mount(<Users />, { 
    context: { store: mockStore }, 
    childContextTypes: { store: PropTypes.object } 
    });

但是如果你正在写您应该使用由酶提供的功能shallow功能的React组件的单元测试。它只是呈现一个深层次的组件，因此在创建包装器组件时不需要创建jsdom并提供上下文参数。在测试中渲染意味着你实际上正在编写一个集成测试。

const wrapper = shallow(<Users />); 
wrapper.find(UserListMenu).to.have.length(1);

来源

2016-09-05 21:49:20 kosker

嗨，感谢您的答案，我有jsdom文件设置问题是'dispatch不是一个函数'，这源于我的componentWillMount函数。所以我得到这个错误浅或安装。解决这个问题的最佳方法是什么 – JKX

哦，我明白了，你不应该在组件中使用dispatch。由于您将'actions'作为道具传递给您的组件，因此您可以在'componentWillMount'函数中轻松调用'this.props.actions.fetchUsers'。如果你真的想在组件中使用dispatch，我想你应该在测试文件的'mount'函数调用中定义'childContextTypes'。 – kosker

啊好吧，开始有意义， '导出函数fetchUsers（调度）派遣（fetchUsersRequest（））; 返回fetchUsersApi（）。然后（功能（响应）{调度（fetchUsersSuccess（response.data.results））}） .catch（功能（前）{调度（fetchUsersFailure（前））}） }” 以上是我的动作，我如何解决传递调度问题，因为如果我调用'this.props.actions.fetchUsers（）;'我得到'派遣不是一个函数' – JKX

测试组件做出反应用酶和摩卡

回答

相关问题