Состояние не изменяется после моделирования события нажатия - PullRequest
Новая
       19

Состояние не изменяется после моделирования события нажатия

0 голосов
/ 29 мая 2018

Я пытаюсь создать контрольные примеры для моего приложения, предоставив источник ниже: 

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. Кажется, что оно не устанавливает значение состояния.Может кто-нибудь, пожалуйста, помогите мне с этим.

1 Ответ

0 голосов
/ 29 мая 2018

Когда вы используете shallow рендеринг, он рендерит только элементы именно из одной тестируемой функции рендеринга.Он не знает, как обрабатывать нажатие на Tab.

. Чтобы имитировать ваш случай, у вас есть 2 варианта:

  1. Рендеринг также дочерних узлов с использованием mount рендеринга, исимулировать щелчок по узлу DOM.
  2. Вызов onSelect или симуляция select на элементе Tabs.
...