Question

我在react 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);

我尝试像Redux网站上的示例一样测试它，但我遇到了问题

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);

    })

})

但我收到错误＆＃39; TypeError：dispatch不是函数＆＃39;我应该嘲笑componentWillMount函数，还是应该如何测试这个组件。

我应该只测试愚蠢的儿童组件吗？任何指导都会很棒。感谢

Answer 1

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

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

另一件事是，当您使用childContextTypes定义context时，您应该提供mount属性：

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

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

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

用酶和摩卡测试反应组分

1 个答案: