Question

我正在尝试为我的应用程序创建测试用例，提供以下源代码：

import React, {Component} from 'react';
import {Tabs, Tab} from 'react-bootstrap';
import ManageUsers from './ManageUsers.jsx';
import ManageRoles from './ManageRoles.jsx';
import ManageUserGroups from './ManageUserGroups.jsx';

export default class UserManagement extends Component {
constructor(props) {
    super(props);
    this.handleSelect = this.handleSelect.bind(this);
    this.state = {
      selectedTab: 1
    }
 }
handleSelect(key){
    this.setState({
      selectedTab: key
    });
  }

render() {
    return (
      <div className="container listView">
        <Tabs activeKey={this.state.selectedTab} onSelect={this.handleSelect} className="customNavTabsHorizontal" id="navUserMgmt">
          <Tab eventKey={1} title={this.state.multiLangMsgs.MANAGE_USERS}>
            <ManageUsers isSelected={this.state.selectedTab === 1 ? true : false} ></ManageUsers>
          </Tab>
          <Tab eventKey={2} title={this.state.multiLangMsgs.MANAGE_ROLES_PERMISSIONS}>
            <ManageRoles isSelected={this.state.selectedTab === 2 ? true : false} ></ManageRoles>
          </Tab>
          <Tab eventKey={3} title={this.state.multiLangMsgs.MANAGE_USER_GROUPS}>
            <ManageUserGroups isSelected={this.state.selectedTab === 3 ? true : false}></ManageUserGroups>
          </Tab>
        </Tabs>
      </div>
    );
  }
}

，测试用例就像这样

import React from 'react';
import {shallow} from 'enzyme';
import UserManagement from './UserManagement.jsx';

describe('<UserManagement />', () => {
  it('should handle selected tab state changes', () => {
    const userMgmt = shallow(<UserManagement />);
    const secondTab = userMgmt.find('Tab').at(0);
    secondTab.simulate('click');
    expect(userMgmt.state().selectedTab).toEqual(2);
  });
});

当我运行npm test时，它总是失败，说预期是2但实际是1.它似乎没有设置状态值。任何人都可以帮我解决这个问题。

Answer 1

当您使用shallow渲染时，它只渲染您测试的一个渲染函数中的元素。它不知道如何处理点击Tab。

要结合您的情况，您有2个选项：

使用mount渲染渲染子节点，并模拟点击DOM节点。
在onSelect元素上致电select或同意Tabs。

模拟点击事件后，状态不会改变

1 个答案: